BEM規則のルール

BEMとは？

BEM（Block Element Modifier）とはCSSの設計思想の一つで、厳密な命名規則を定めることで、クラス名だけでチーム全体に共通の認識を持たせることができます。BEMは「Block」、「Element」、「Modifier」の頭文字を取った略語であり、サイト内の要素をそれぞれ「Block」、「Element」、「Modifier」に分離してクラス名を割り当てていきます。

BEMの特徴

BEMを使うことで、以下の利点があります。

1. コードの読みやすさ: BEMはクラス名の命名規則を厳格に定めるため、コードが読みやすくなります。
2. 理解のしやすさ: 命名規則を共有することで、チーム全体で共通の認識を持つことができます。
3. メンテナンスの容易さ: CSSを操作する際にもメンテナンスが楽になります。

　
BEMの命名規則は以下のようになります。

• BlockとElementはアンダースコア2つで区切ります。
• ElementとModifierはハイフン2つで区切ります。
• Block、Element、Modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切ります。

例えば、Blockには「menu」、Elementには「item」を使い、Modifierには「red」を使っています。このようにBEMを適用することで、クラス名が明確になり、保守性が向上します

例１ ちょっと残念な例：

以下はちょっと残念なBEMを使った例です。

 <nav class="header__menu">
      <ul class="header__menu-li">
          <li class="header__menu-li-item"><a href="<?php echo home_url(''); ?>"></a></li>
          <li class="header__menu-li-item"><a href="<?php echo home_url(''); ?>"></a></li>
          <li class="header__menu-li-item"><a href="<?php echo home_url(''); ?>"></a></li>
          <li class="header__menu-li-item"><a href="<?php echo home_url(''); ?>"></a></li>
      </ul>
  </nav>

例：書き換え例

以下はBEMを適用した例です。

  <nav class="header__menu">
      <ul class="menu">
          <li class="menu__item"><a href="<?php echo home_url(''); ?>"></a></li>
          <li class="menu__item"><a href="<?php echo home_url(''); ?>"></a></li>
          <li class="menu__item"><a href="<?php echo home_url(''); ?>"></a></li>
          <li class="menu__item"><a href="<?php echo home_url(''); ?>"></a></li>
      </ul>
  </nav>

結論

BEMはチームでの作業においておすすめの設計思想であると言えます。

厳格な命名規則を持つことで、チーム全体が共通の認識を持ち、スムーズなコードの理解とメンテナンスが可能になります。こんなBEM活用してみてはいかがでしょうか！

参考