この記事の目的

css設計を考え始めた人が最初のとっかかりに読む記事。

• どういう設計があるのか？
• どう設計方針を選択していくべきなのか？

あたりをまとめる

cssを書く上での規則

• idをなるべく使わない
• importantも使わない
• html側にはstyleを書かず、styleはcssに寄せる

css設計方針

css設計方針においてのポイント

htmlとcssは疎結合に

htmlとcssを別にしておかないと例えばSEO要件でh2にしないといけないけどpとstyle合わせたいといった時に困る。そのためhtmlの要素をセレクターに指定するのは避けた方が良い。

予測しやすくするためにclass名を親と子をわかるものにする

class名は名前から影響範囲が想像できるのが望ましいため、親と子をわかるようにした方が良い。例えば

.header.btn

とあってbtnがheader内のものだとした時には

.header.header_btn

とbtnがheader内のものとわかるようにするのが望ましい。

シングルクラス設計とマルチクラス設計

シングルクラス設計は一つのクラスですむように個別個別にクラスを設定していくもの。対してマルチクラスは汎用的にクラスを設定し、複数組み合わせる形。シングルクラスの方がhtmlは読みやすくなり、影響範囲も狭いので予期せぬバグなどは出にくいが個別に指定しているので保守性は低い。

メジャーな設計手法

OOCSS

• 下記に分けて考える
  • ストラクチャー
  • スキン
• 特定の範囲内での指定ではなくグローバルに指定

OOCSSの考え方はオブジェクティブ思考をcssに持ち込んだもので再利用を前提に考えられている。その際利用するものをストラクチャー、形などを指定するものとスキン、色などの装飾を指定するものに分けている。

再利用を前提に考えているので例えばmainclass内のなどの特定範囲内での指定より全体で使いまわせる指定をこのむ。

BEM

BEMは下記をclass名に一つ一つつける手法で個別にstyleを書いていくので変更時に影響範囲が小さい。

• Block・・・枠組みとなる要素のこと。セクションやコンテナをBlockとして扱うケースが多いです。
• Element・・・Blockの中に存在する子要素のこと
• Modifier・・・BlockやElementを修飾するもの。activeやlargeのように状態を管理する場合もModifierで指定するようにします

.block__element--modifier{}

みたいに

• blockの後ろの_（アンダースコア）２個
• modifierをつける場合は-（ハイフン）２個をつける

SMACSS

下記に分けてモジュール的に設計するもの。

• ベース・・・bodyなど全体に関わるものの設定。リセットCSSも入る。
• レイアウト・・・レイアウトに関わるもので接頭辞にl-をつける
• モジュール・・・レイアウト内に入るもの
• 状態（ステート）
• テーマ・・・背景色など