YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー - morishitter blog
この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。 よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS 数あるCSSの設計手法のベースとなる、OOCSS (Object Oriented CSS、オブジェクト指向CSS)というものがある。OOCSSはその名の通り、CSSのクラス設計（ルールセットの定義）にオブジェクト指向プログラミングの考え方を少し取り入れたようなものだ。 OOCSSの原則として、「構造と見た目の分離」、「コンテナとコンテンツの分離」というものがある。OOCSSが提唱していることは要するに、HTMLの構造に依存しないセレクタを書き、レイアウトと見た目に関するルールセットは別
CSSのマルチクラス設計の問題点 - morishitter blog
CSSのルールセットを細かく（classセレクタで）定義し、HTMLに複数のclass属性値を書いてスタイルをあてるような設計をマルチクラス設計と言ったりする。 マルチクラスにすることで冗長な記述が減り、ファイル容量が減り、ルールセットの再利用性が高くなり、保守性が向上する。 OOCSSをはじめとしたCSSの設計概念はマルチクラスを前提としており、Twitter Bootstrap等の多くのCSSフレームワークはマルチクラスでスタイルをあてるようになっている。 <!-- Twitter Bootstrapのボタンの例 --> <button class="btn btn-primary btn-lg">Save</button> 良いことしかないように見えるマルチクラス設計だが、いくつか問題点もある。 まず、HTMLに複数のclass属性値を書くと共通するプロパティが上書きされるということ
CSSのルールについて考える！ ー OOCSS、BEM、SMACSSって何？ | panmimi design
模写をする習慣がついてから、公開されているいろいろなスタイルシートを見るようになったのですが、その中で気になる表記を見つけました。 .mt5{ margin-top: 5px; } .mt10{ margin-top:10px; } .text-left { text-align: left; } .text-right { text-align: right; } ↑こういう表記です。「common.css」とか「base.css」と名付けられたファイルの中に記述されていることが多く、見かけるたびにこれって業界ではよく使われているのものなの？と思いました。 この表記の意味はわかります。あらかじめわかりやすいクラス名でスタイルシートを用意しておいて、HTMLにクラス名を記述しレイアウトを組んでいく…というものですよね。私も「.clearfix」と名付けたクラス用意して同じ手法を使っています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
