【CSS】BEMについて

はじめに

• ユニバーサル・スタジオ・ジャパンのHPを例に取り上げてます。

特徴

• 厳格な命名規則をもつ設計手法
• 認知度が高い

メリット

• 拡張性
• 独立性
• 可読性
• 詳細度が均一

デメリット

• クラス名が長い
• 命名規則の共通理解

利用シーン

• 大規模開発

原則

1. Block（かたまり）
2. Element（要素）
3. Modifier（修飾）

の3つに分類して、それぞれ命名規則を考える。
BEMはそれぞれの頭文字。

Block・Element・Modifierってなんやねん

1. Block（かたまり）：特定の場所に依存しない、どこでも使い回せるパーツ
2. Element（要素）：Blockを構成し、Block外では使用できない要素
3. Modifier（修飾）：BlockやElementの見た目や状態、振る舞いを定義

1. BEM全体の規則

メリット

• HTMLとスタイリングを依存させない
• CSSの詳細度を均一に保つ

規則

• CSSに記述する際は、クラスセレクターを使用する
• クラス名は半角英数字の小文字
• 複数の単語は”-”でつなぐ

CSS

.class{...}
.class-name{...}

2. Blockの規則

メリット

• クラス名から機能が想像できる

規則

命名規則

• block名は、それが何なのかを表す

CSS

.block{...}
.block-name{...}

Blockのネストは可能

レイアウトに関するスタイリングは適応させない

レイアウトに関するスタイリングとは、position、float、marginなど

どうしても指定したい場合は、「Mix」という考え方を適応させる。
（後日、別に記載する）

HTML

<form class="form">
　<form class="log-in">
  <form class="auth">
  <form class="resetting">
</form >

このとき、
認証ブロックをフォームブロックの中央に配置したい場合、
レイアウトに絡む変更が伴う

3. Elementの規則

メリット

• クラス名から役割が想像できる
• クラス名から影響範囲が想像できる
• 特定の場所に依存させない
• CSSの詳細度を均一に保つ

規則

命名規則

• element名は、「それが何なのか」を表す
• Blockから名前を継承し、”__”で記述
  ※アンダースコア2つ。間はスペースなし

CSS

.block__element{...}
.block-name__element-name{...}

• Elementの中にElementを入れない
• Blockの中に複数のElementは可
• Elementは必ずBlock内に配置

CSS

× .block__element__element{...}
○ .block__element1{...}
○ .block__element2{...}

例）
a要素のクラス名はli要素のクラス名を含まない

HTML

<ul class="ul">
  <li class="ul__li">
    <a class="ul__a"></a>
  </li>
</ul>

CSS

.ul{...}
.ul__li{...}
.ul__a{...}

a要素がulブロック内のどこに移動しようがスタイルは変わらない。

4. Modifierの規則

メリット

• クラス名から見た目が想像できる
• 拡張しやすい

規則

命名規則

• BlockかElementがある状態でModifierを付ける
• BlockかElementの名前を継承し、”_”で記述
  ※アンダースコア1つ。

CSS

.block_modifier{...}
.block-name_modifier-name{...}
.element_modifier{...}
.element-name_modifier-name{...}

• Modifier名は、「何が、どうであるか」を表す
  • 「何が_どうであるか」
    ※アンダースコアで区切る
  • 「どうであるか」
    ※アンダースコアなし

の2パターンある

CSS

.block_color_red{...} 　/* 色が赤色 */
.block_enable　　　　　　/* 有効 　　*/
.element_color_red{...} /* 色が赤色 */
.element_enable　　　　　/* 有効 　　*/

所感

• クラス名が長くなる問題に対しては、キャメルケースを使用する

参考文献