Help us understand the problem. What is going on with this article?

html・cssにおけるclass命名規則について

More than 3 years have passed since last update.

はじめに

この記事には多分に個人的な考えが含まれており、メジャーな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-」を削除することで実現できることがわかります。

このように命名規則をまとめ共有しておくことで、他の作業者が見たときに影響範囲やその要素の種別を容易に判別できることが重要だと考えています。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away