Open2

CSS設計メモ

Mr.P4MMr.P4M

CSSのグローバル問題を冗長なBEMを使わずに対応する

  • GPS

  • BEMのBlockとElementという親子関係による要素の捉え方、そして、スタイルの定義の方法は、グローバルスコープによるスタイルのカスケードの予期せぬ適用を防ぐうえで有益である。

  • 上記の観点は有用であるが、命名法が最適であるとは思えない。

  • 親子関係でスタイルを定義する場合、「>」直下のものだけスタイルを定義するようにすれば、予期せぬカスケードを防ぐことができる。

  • modifierについては、クラスを通常通り結合することと名称で十分意味が伝わる。

  • 抽象的・汎用的な名称についてスタイルを定義することをさけ、かならず、オブジェクトと共に定義するようにする。

<span class="badge active">
 value
</span>

.badge {
   &.active {
      background-color: red;
   }
}

Mr.P4MMr.P4M

Layout(配置)を規定するのはContainer

  • 配置は、Containerによって最初に定められる。