在宅フリーランスとして生きる

【Webサイト制作】BEMのclass命名規則を理解しよう！

在宅フリーランスとして生きる

今回はHTML・CSSコーディングでよく使われる「BEM（ベム）」について解説します。

BEMを理解すればコーディングの効率が上がり、保守性の高いWebサイトを構築できます。

またクラウドソーシングでコーディング案件を探すと「BEMでコーディングが出来る方を優先します」という募集文をよく見るので、需要も高いスキルです。

なんとな〜く難しそうに感じるかもしれませんが、実際はあまり難しくないので、この機会に是非覚えていきましょう！

CSSの設計方法は他にもSMACSS(スマックス)やOOCSS(オーオーシーエスエス)といった物がありますが、BEMは2022年現在で一番使われている設計方法になります。

スポンサーリンク

BEM(ベム)とは？

Block(固まり)、Element(要素)、Modifier(修飾子)の3つの頭文字を繋げた略語で、HTMLやCSSのコーディング効率や保守性を高めるために考えられた設計方法の一種です。

BEMではclass（クラス）名をBlock、Element、Modifierの3つの概念に沿って命名し、それぞれアンダーバー2つとハイフン2つで区切ります。

<div class="block">
   <p class="block__element">BEMを学ぼう！</p>
   <p class="block__element--modifier">簡単に覚えられます</p>
 </div>

Block(固まり)

BlockはWebサイト上に配置するパーツの名称として設定します。

Blockのルール
  • ブロック名はユニーク（1サイト内に同名のブロックは1つのみ）である
  • ブロックの中に他のブロックを作成しても良い

Element(要素)

ElementはBlockを構成する細かい部品の名称として設定します。

※上記サイトのヘッダーblockは「logo」と「menu」の2つのElementから構成されている

Elementのルール
  • Elementの前は「__（アンダーバー2つ）」で区切る
  • 別Block同士ならElement名は重複しても良い
  • 必ずBlockの中に作成する

Modifier(修飾子)

Modifierはここまで紹介したBlockやElementの基本形状は同じだが、色やサイズなどの一部スタイルが異なるものに設定します。

※上記のメニューelementの3つ目だけ青いボタンにする。

Modifireのルール
  • Mofifireの前は「–（ハイフン2つ）」で区切る
  • Block、Elementのどちらに作成しても良い
  • 別Block、別Element同士ならModifire名は重複しても良い

ElementsとModifierの区切りとは別に、「単語の意味として区切りたい」という場合は「-（ハイフン1つ）」を使います。

BEMでclassの命名を行うメリット

次にBEMでclassの命名を行うメリットについて解説します。実際に僕もBEMに変えてみて以下4つを実感しました。

  1. クラス名の命名に迷わない
  2. 他のスタイルと干渉しない
  3. 一度作成したスタイルを流用できる
  4. 複数人で作業を行う際に、共同作業者にも命名ルールが理解しやすい

① クラス名の命名に迷わない

BEMの命名規則に沿ってコーディングをすることで、いちいちclass名を考えるために手を止める必要がなくなります。

あるていど規模が大きい（下層ページが多い）サイトをコーディングする際にclassの命名規則を決めずに進めると、後半になって「このclass名はもう使っているから…」と命名に迷ってしまうことがありますよね。

また他人が制作したサイトの改修を行う際にも、すでに使用されているclass名と重複して余計な時間を食ったりすることも。

その点、BEMならルールに沿ってclass名を決めるだけで重複することはまずありません。

② 他のスタイルと干渉しない

BEMの命名規則なら<h1>や<p>といったHTMLの要素に直接スタイルを指定することが無いため、スタイルが干渉することがありません。

少し伝わりづらいかもしれないので、実例を交えてご説明します。

例えば以下のコードのように<p>に対して直接スタイルを指定すると、同じブロック内に再度<p>を配置する際に干渉してしまいます。

<div class="content">
  <div class="greenbox">
    <p>BEMを学ぼう</p>
  </div>
  <div class="graybox">
    <p>覚えることは少ないです</p>
  </div>
</div>
.content p {
 font-size: 16px;
 font-weight: bold;
}

上記のコードだと.graybox内のは太字にしたくないのに「font-weight: bold;」が反映されてしまうので、「font-weight: normal;」で打ち消す必要が出てきてしまいます。

これをBEMのコードに書きかえるとどうでしょうか。以下を見てみてください。

BEMでのコーディング

<div class="content">
  <div class="content__greenbox">
    <p>BEMを学ぼう</p>
  </div>
  <div class="content__graybox">
    <p>覚えることは少ないです</p>
  </div>
</div>
.content__grennbox p {
 font-size: 16px;
 font-weight: bold;
}
.content__graybox p {
 font-size: 16px;
}

.greenbox内の<p>と.graybox内の<p>に個別にスタイルを指定するため干渉がおこらないことがわかります。

理屈はわかるけど、全部こうやって記述するの面倒くさいな

上のシンプルな構造だけで見ると、そのように思うかもしれませんね。

でも実際のWebサイト制作ではコードの記述量が多くなるので、より複雑にスタイルが干渉し合う可能性があります。

同じ要素が登場する度に打ち消し用のスタイルを当てるなどの手間を考えると、最初からBEMでコーディングを行うほうが最終的な作業時間は短く済むでしょう。

③ 一度作成したスタイルを流用できる

BEMの命名規則では、コンテナ名をセレクタにせずスタイルを当てられるので、一度作成したスタイルを他のパーツでも流用できます。

こちらも具体例を交えてご説明します。

<section class="section1">
  <h2>section1のタイトル</h2>
 </section>
・
・
・
 <section class="section2">
 </section>
・
・
・
 <section class="section3">
   <h2>section3のタイトル</h2>
 </section>
.section1 h2 {
  font-size: 20px;
  color: #00FF00;
  borer: 1px solid #00FF00;
}

section1とsection3のタイトルに同じスタイルを当てたいのですが、上例のCSSだとsection1のタイトルにしかスタイルが適用されないため、追加で「.section3 h2」セレクタで同じ記述をしなければなりませんね。

これをBEMのコードに書き換えると以下のようになります。

BEMでのコーディング

<section class="section1">
  <h2 class="title--border">block1のタイトル</h2>
 </section>
・
・
・
<section class="section2">
</section>
・
・
・
 <section class="section3">
   <h2 class="title--border">block3のタイトル</h2>
 </section>
.title--border {
  font-size: 20px;
  color: #00FF00;
  borer: 1px solid #00FF00;
}

block1とblock3の<h2>タグ両方にclass「.title–border」を命名しているため一度の記述で両方のタイトルにスタイルが適用されます。

これなら他のページやsection内でも同じスタイルを流用できますし、<h1>・<h3>など別レベルのタイトルにも同じスタイルを当てられるという訳です。

④ 共同作業者にも命名ルールが理解しやすい

大規模サイトを複数人で分担してコーディングする案件や、既存のサイトを他の作業者が改修するといった場合にもBEMが活躍します。

規則を持たずに命名されたclassと比べて、BEMで命名されたclassは「Block、Element、Modifier」の3つの概念に沿って法則的に記述されているので、誰でもひと目見ただけで「はいはい、このclassはこのブロック用ね」と理解しやすくなるからです。

作業者全員がBEMの命名規則でコーディングを進めると

  • 自分が記述したcssが他の作業者の作成したページを崩してしまった
  • HTMLの要素(<p>や<h1>など)に直接スタイルが当たっているので、毎回打ち消しを書いている
  • 同じレイアウトが何度も出現しているにも関わらず、それぞれが別々のコードで作成している

といった、複数人でコーディングを行う際のストレスが大幅に減らせるのです。

なおBEMのデメリットとしては一つ一つのclass名が長くなってしまうという点です。

比較的規模の大きいサイトではclass名の重複を避けるためにBEMを採用するのが良いですが、LPなどのように1ページで完結するサイトの場合は無理にBEMでなくても良いかもしれません。

このあたりは実際に使っているうちに「このサイトはBEMの方が良さそうだ！」とわかってくるようになるでしょう。

さいごに

Webサイト制作の初心者向け教材は数あれど、BEMでのコーディング方法を紹介する教材って少ないんですよね。

クラウドソーシングでコーディング案件を探していると「BEMでコーディングが出来る方を優先します」という募集文をよく見ますし、意外と需要は高いと思っています。

教材…作ってみようかな？

ブログトップへ戻る