📑

BEM記法について

2023/08/27に公開

Rails

tech

はじめに

cssを書く上で保守性の高さから多くの現場で使われているBEM記法への理解を深めようと思います。

BEMの基本「Block」「Element」「Modifier」

Block（ブロック）とは

Blockとは「機能的に独立した再利用可能なモジュール」と定義されています。
簡単にいうと、「どのページでも使い回すことができるパーツ」をブロックと呼んでいます。

Blockの命名規則

クラス名はモジュールの「見た目（赤や大きい）」ではなく「それが何であるか（メニューやボタン」を表すようにします。
英単語が2つ以上の場合はハイフンで繋げて書きます。（ハイフンケース）
いい例と悪い例を記述すると以下のようになります。

<!-- × 見た目の説明になってる -->
<div class="red-text-btn"></div>

<!-- ○「何であるか」を説明している -->
<div class="error-btn"></div>

Blockのネスト

ブロックはネストすることができます。またネストの数に制限はないです。
下の図がわかりやすく表示されていたので張っておきます。

記述してみると以下のようになります。

<!-- ヘッダーブロック -->
<header class="header">
  <!-- ネストされた メニューブロック -->
  <div class="menu"></div>
  <!-- ネストされた ロゴブロック -->
  <div class="logo"></div>
  <!-- ネストされた 検索ブロック -->
  <form class="search"></form>
  <!-- ネストされた ログインブロック -->
  <form class="auth"></form>
</header>

Element（要素）とは

Element（要素）とは「Blockを構成する要素で、Blockの外では独立して使用できないもの」です。
例えば、先ほどのブロックの例であげたメニューブロックは、4つの要素で構成されていることが分かります。

Elementの命名規則

Elementの命名規則を見ていきます。
Elementのクラス名は、Blockの名前を継承し、アンダースコア2つ記述した後にElementの名前を付けます。

<!-- 検索ブロック -->
<form class="search-form">
  <!-- `input` は検索ブロックの要素 -->
  <input class="search-form__input">
  <!-- `button` は検索ブロックの要素 -->
  <button class="search-form__button">Search</button>
</form>

Elementのネスト

注意点として、Elementの中にElementがネストされた命名をしてはいけません。

これを許すと要素を入れ替えたり、削除したり、追加したりすることができなくなるからです。
ただし、要素の中に要素がネストされているのはOKです。
良い例と悪い例が以下のようになります。

<!-- 検索ブロック -->
<form class="search-form">
  <!-- × `span` が`button`の要素になってる -->
  <button class="search-form__button">
    <span class="search-form__button__text">Search</span>
  </button>
</form>

<!-- 検索ブロック -->
<form class="search-form">
  <!-- ○ `span` は検索ブロックの要素 -->
  <button class="search-form__button">
    <span class="search-form__text">Search</span>
  </button>
</form>

他にも以下のような特徴があります。

・Elementは独立できない

・Elementはなくてもいい

Modifier（修飾子）とは

Modifierは修飾子という意味で、モディファイアと読みます。
モディファイアとは「BlockやElementの見た目、状態、振る舞いを定義するもの」です。
例えば、メニューブロック（menu）は、モディファイアの使い方によって見た目が変わります。
下の図では、メニューブロックにモディファイアを加えることで、見た目やレイアウトが変わっています。

Modifierの命名規則

モディファイアのクラス名は、モディファイアを適用したいBlockやElementの名前を継承し、ハイフン(--)2つを記述した後にモディファイアの名前をつけます
Modifierは、Elementと同様に独立して使用することはできません。必ずBlockかElementがある状態で、ふたつめ以降のクラスとしてModifierを使います。

<!-- 検索ブロックに `focused`というモディファイアで修飾している -->
<form class="search-form search-form--focused">
  <input class="search-form__input">

  <!-- ボタン要素に `disabled`というモディファイアで修飾している -->
  <button class="search-form__button search-form__button--disabled">Search</button>
</form>

Modifierは3パターン

モディファイアは概ね3つのパターンに分けられます。
見た目 - どんなサイズか？どの色か？どのテーマに属するか？
例: small（小さい）、caution（警告）
状態 - 他のBlockまたはElementと比べて何が違うか？
例: disable（使用不可）、active（アクティブな状態）
振る舞い - それがどのように振る舞うか（動作するか）？
例: bottom-right（右下に位置する）

Modifierは複数使える

1つのブロック、要素に対して、モディファイアは複数使えます。

<form class="form form--large form--focused">
  <button class="form__button form__button--small"></button>
  <button class="form__button form__button--small form__button--error"></button>
</form>

サンプルコード

<section class="about">
  <div class="about__item">
    <h2 class="about__item-ttl">ここにタイトルが入る</h2>
    <p class="about__item-txt">テキストが入る。テキストが入る。</p>
    <a href="#" class="about__item-link about__item-link--red">MORE</a>
  </div>
</section>

補足

プログラマー・システムエンジニアのためのネーミングツールを使うと誰にでもわかりやすい命名を行うことができます。
https://codic.jp/

参考にさせていただいた記事

まとめ

なんとかポートフォリオが大方完成したので一度、スクールに入ってから学んだことを基礎から振り返ってみようと思います。
とりあえずRubyをざっと振り返ろうと思います！！