CSSの命名規則の紹介

CSSを編集する際に長期的なプロジェクトや複数人での作業が必要な場合、属性名名のつけ方など記法が統一されていないとミスが発生しやすくなったり作業効率の低下を招くため、CSSの記法に一貫性を持たせるためのルールが生まれました。 特に広く認知され実用されているのが下記の3つです。 BEM(Block Element Modifier) OOCSS(Object Oriented CSS) SMACSS(Scalable end Modular Architecture For CSS)  

・BEM

  BEMではid属性を使うことはほとんどなくclass属性で名前を付けていきます。 その際、block, element, modifierにそれぞれ要素を分類分けすることで命名規則を単純化しています。 block ページ内で独立して機能する要素として定義します。 element blockを構成する要素です。 modifier blockやelementの特徴などを表すために定義するもので、単独では使うことができません。   また、block, element, modifierを区切る際に一貫したセパレーター(ハイフン、アンダースコア等)を使用することが重要となっており、下記のような規則が推奨されています。 block__element_modifier blockとelementはアンダースコアを2つ繋げて区切り、blockとmodifier, elementとmodifierはアンダースコア1つで区切ります。 また、block名やelement名に単語を複数組み合わせる場合はセパレーターにハイフンを使用することが推奨されています。 ただし、セパレーターに関してはあくまで推奨であり、サイト内で統一されてさえいればセパレーターに決まりはありません。  

・OOCSS

  OOCSSでは構造(共有できるスタイル)とスキン(固有のスタイル)を分けて記述する書き方をします。 例えば同じ大きさの赤色と青色の正方形を記述する際に、
<div class="box-red"></div>
<div class="box-blue"></div>
.box-red {
  width: 50px;
  height: 50px;
  background-color: red;
}
.box-blue {
  width: 50px;
  height: 50px;
  background-color: blue;
}
と記述すると構造(width, height)を繰り返し書く必要があり、編集したくなった場合に効率的ではありません。
<div class="box box-red"></div>
<div class="box box-blue"></div>
.box {
  width: 50px;
  height: 50px;
}
.box-red {
  background-color: red;
}
.box-blue {
  background-color: blue;
}
このように構造とスキンとで分けてクラス名を定義し組み合わせることで、見栄えもシンプルになり効率的に編集することができます。  

・SMACSS

  SMACSSはBEMとOOCSSを組み合わせたような規則となっており、ベース、レイアウト、モジュール、ステート、テーマの5つのルールにより定義されています。   ・ベース
body {
  background: white;
}
 
a:link {
  color: gray;
}
ベースでは上記のように要素そのものの見た目を定義します。   ・レイアウト
.l-header {
  margin-bottom: 20px;
}
 
.l-footer {
  border-top: 1px solid black;
}
 
.l-main {
  float: left;
  width: 80%;
}
 
.l-sub {
  float: right;
  width: 20%;
}
レイアウトでは上記のようにエリア分けを行います。 headerやfooterなど主要なものはid属性で名前をつけ、再利用する可能性のある要素はclass属性で名前をつけます。 その際、モジュールやステートと混同しないためにlayout-やl-のようなプレフィックスを使用することでそれがレイアウトであることを示します。   ・モジュール レイアウトで定義した要素を除いたすべての要素がモジュールに当てはまります。 義務付けられてはいませんがmod-やm-などのプレフィックスが使われることが多いです。   ・ステート ステートではjavascriptを使用するときなど、状態によって変わるスタイルを定義するためのルールです。 is-というプレフィックスをつけることでステートであることを示します。   テーマ ステートよりも大きい変化を定義するためのルールです。 theme-というプレフィックスをつけることでテーマであることを示します。   より詳しくは各公式サイトをご覧ください。 BEM OOCSS SMACSS  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です