Zenn
🎃

[CSS,Sass] BEMと命名規則について

2023/03/19に公開
CSS
Sass
Scss
bem
tech

BEMとは (概論)

  • CSSの命名規則の一つで、Block Element Modifierの略称。
  • それぞれ一意の名前で命名することで、コードの保守性や再利用性を高めることを目的としている。

< Block　/ Element / Modifierについての例 >

基本型
HTML file

<div class="block">
  <span class="block__element"></span>
</div>

CSS file

.block__element--modifier{
     ...
}

では、それぞれ何なのかも含めて見ていきましょう。

Block

Webページの構造を構成する要素で、機能的に独立した再利用可能なモジュールのこと。
(どのページでも使い回すことができるパーツとも言える。)

ex. ナビゲーションメニュー, フォームなど　
"それが何であるか"を表すもの！

  • それぞれのBlockは他のBlockと独立して存在し、他のBlockに影響を与えない。

Blockの命名規則

  • Block名は一意で、機能的な要素を表現する名前で命名。
  • 英単語が2つ以上の場合はハイフンで繋げて書く。

Element

  • Blockの中にある要素。
    ※ elementはblock内にしか存在できない

ex. ナビゲーションメニューの中にあるリストアイテムやフォームの中にあるラベルなど.

Elementの命名規則

  • Block名に続く二重アンダースコア（）で区切り、Block内で独自の名前を持つ要素を表現する名前で命名。
    => "接続はアンダーバー２つ。" 単語を繋げるときは1つ。

  • Block名またはElement名に続くハイフン（-）で区切り、状態や見た目の変化などを表現する名前で命名する。

Modefier

  • BlockやElementの外観や状態を変更するための名前のこと.

ex. ナビゲーションメニューの色を変更するModifierや、ボタンの状態を表すModifier

Modefierの命名規則

  • Block名またはElement名に続くハイフン（-）で区切る。
  • BlockやElementの名前に加えて、状態を表す単語を含めることがある。
  • KeyとValueという名前をつけて、分かりやすくすることができる。

BEM基本ルール

  1. IDを使ってはいけない
    => 必ずclassでスタイルを当てよう。(詳細度を均一に保つため)

CSSにおけるセレクタの詳細度:
そのセレクタがどれだけ特定の要素を識別しているか、優先順位の高さを表す数値のこと。

  1. スタイル（css）は全てclassに対して指定する。
    => 上記と同じで、詳細度を均一に保つという厳格なルールがあるため。
  2. 単語が複数ある場合はハイフンケース
  3. Blockには「margin」「position：absolute」を指定しないこと。
    => "独立したパーツ"であって、他のページでも「繰り返し利用されるパーツ」として扱うため、別の場所で利用した際に意図しない挙動が発生する可能性があるから。

Discussion