staffCSSを編集する際に長期的なプロジェクトや複数人での作業が必要な場合、属性名名のつけ方など記法が統一されていないとミスが発生しやすくなったり作業効率の低下を招くため、CSSの記法に一貫性を持たせるためのルールが生まれました。広く認知され実用されているのが下記の3つです。CSS)・BEMBEMではid属性を使うことはほとんどなくclass属性で名前を付けていきます。modifierにそれぞれ要素を分類分けすることで命名規則を単純化しています。ページ内で独立して機能する要素として定義します。blockを構成する要素です。blockやelementの特徴などを表すために定義するもので、単独では使うことができません。modifierを区切る際に一貫したセパレーター(ハイフン、アンダースコア等)を使用することが重要となっており、下記のような規則が推奨されています。elementとmodifierはアンダースコア1つで区切ります。block名やelement名に単語を複数組み合わせる場合はセパレーターにハイフンを使用することが推奨されています。セパレーターに関してはあくまで推奨であり、サイト内で統一されてさえいればセパレーターに決まりはありません。・OOCSSOOCSSでは構造(共有できるスタイル)とスキン(固有のスタイル)を分けて記述する書き方をします。height)を繰り返し書く必要があり、編集したくなった場合に効率的ではありません。blue;}このように構造とスキンとで分けてクラス名を定義し組み合わせることで、見栄えもシンプルになり効率的に編集することができます。・SMACSSSMACSSはBEMとOOCSSを組み合わせたような規則となっており、ベース、レイアウト、モジュール、ステート、テーマの5つのルールにより定義されています。gray;}ベースでは上記のように要素そのものの見た目を定義します。20%;}レイアウトでは上記のようにエリア分けを行います。headerやfooterなど主要なものはid属性で名前をつけ、再利用する可能性のある要素はclass属性で名前をつけます。その際、モジュールやステートと混同しないためにlayout-やl-のようなプレフィックスを使用することでそれがレイアウトであることを示します。レイアウトで定義した要素を除いたすべての要素がモジュールに当てはまります。義務付けられてはいませんがmod-やm-などのプレフィックスが使われることが多いです。ステートではjavascriptを使用するときなど、状態によって変わるスタイルを定義するためのルールです。is-というプレフィックスをつけることでステートであることを示します。ステートよりも大きい変化を定義するためのルールです。theme-というプレフィックスをつけることでテーマであることを示します。詳しくは各公式サイトをご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。