はじめに
この記事には多分に個人的な考えが含まれており、メジャーなBEMやSMACCSなどを知っている方が重要だと思います。
自分なりにclassについて考え、複数人で開発を行ってもわかりやすい方法をまとめているにすぎないので、すべてを鵜呑みにすることは避けてください。
また、イレギュラーなケースや、案件によって命名規則は変化・応用すべきであることも忘れないでください。
class命名規則において重要なポイント
classの命名規則では以下を重要なポイントだと考えます。
- その要素がどんなものなのかわかる
- そのスタイルの影響範囲がわかる
- そのスタイルの独立性がわかる
- そのスタイルの特異性がわかる
以上を踏まえて、識別子を用いて命名規則を考えます。
class命名規則一覧
レイアウト
レイアウトスタイルのためのclassです。
このclassでは配置についてのみ定義します。
識別子：「l-」
例：「.l-header」「.l-menu」など
グローバル
全ページ共通の要素にスタイルを付与します。
子要素においては一部要素以外、範囲外に出た時のスタイルを保証しません。
識別子：「global-」
例：「.global-header」「.global-footer」「.global-menu」など
ページ
ページ特有コンテンツを収める範囲にスタイルを付与します。
子要素においては一部要素以外、範囲外に出た時のスタイルを保証しません。
識別子：「page-」
例：「.page-index」「.page-products-detail」など
モジュール
複数のページで任意の位置に記述を行う共通要素に対して付与します。
識別子：「m-」
例：「.m-breadcrumbs」「.m-pager」「.m-item-list」など
パーツ
単体でスタイルが維持される要素に対して付与します。
このスタイルはどの位置に記述されても、そのパーツ固有のスタイルを維持することを保証するものです。
識別子：「p-」
例：「.p-heading」「.p-btn」「.p-label」など
ステート (状態)
要素の状態について追加スタイルを付与します。
このクラスは要素のスタイルに依存します。
識別子：「is-」
例：「.p-btn.is-current」「.p-btn.is-disabled」など
デコレーション (装飾)
要素の装飾を定義します。
このクラスは要素のスタイルに依存します。
識別子：「d-」or「-」
例：「.p-heading.d-page-name」「.p-btn.-positive」など
モディフィケーション (修飾)
特定条件下において、どうしてもスタイリングを上書きしなくてはならない場合に使用します。
このクラスは特定条件下以外使用してはいけません。
識別子：「md-」
例：「.md-hidden」など
まとめ
上記はすべてのスタイルに対する種別の定義ではないことを頭に入れておいてください。
識別子が意味するところで重要なのは、冒頭でも列挙しましたが、
- その要素がどんなものなのかわかる
- そのスタイルの影響範囲がわかる
- そのスタイルの独立性がわかる
- そのスタイルの特異性がわかる
です。
例を出すと、あるモジュール内の子要素はそのモジュールに依存しているということになります。しかし、その子要素がパーツの識別子を持っている場合その限りではないということです。
「.m-foo .name」はモジュール「.m-foo」で中のみのスタイルが適用され、「.m-foo .p-name」だった場合「.p-name」は「.m-foo」外に出た時にも同じスタイリングが当てられるべきです。つまるところcssで「.m-foo .name」セレクターに対するスタイルの付与は許可されますが、「.m-foo .p-name」セレクターに対するスタイルの付与は許可されません。そうしたい場合は「.p-name.d-foo」のようにデコレーション(装飾)を使ってスタイリングすべきです。
また、モディフィケーション(「md-」)を用いることで、その要素本来のスタイルを得たい場合は「md-」を削除することで実現できることがわかります。
このように命名規則をまとめ共有しておくことで、他の作業者が見たときに影響範囲やその要素の種別を容易に判別できることが重要だと考えています。