Open2
CSS設計メモ
CSSのグローバル問題を冗長なBEMを使わずに対応する
-
BEMのBlockとElementという親子関係による要素の捉え方、そして、スタイルの定義の方法は、グローバルスコープによるスタイルのカスケードの予期せぬ適用を防ぐうえで有益である。
-
上記の観点は有用であるが、命名法が最適であるとは思えない。
-
親子関係でスタイルを定義する場合、「>」直下のものだけスタイルを定義するようにすれば、予期せぬカスケードを防ぐことができる。
-
modifierについては、クラスを通常通り結合することと名称で十分意味が伝わる。
-
抽象的・汎用的な名称についてスタイルを定義することをさけ、かならず、オブジェクトと共に定義するようにする。
<span class="badge active">
value
</span>
.badge {
&.active {
background-color: red;
}
}
Layout(配置)を規定するのはContainer
- 配置は、Containerによって最初に定められる。