【CSSの書き方】 BEM設計のやり方を簡単に解説

CSSを勉強したあと効率の良い記述法を探すとBEMという言葉を見かけると思います。
自分は初めて見たとき難しそうで敬遠してましたが、理解しておくとCSSを書くときに役に立ちます。

BEMを用いることで、CSSを書くときにルールができるのでそれに則って書いていくことになります。
なので、クラス名をつける時の迷いも少なくなったりします。

この記事ではBEM設計について、画像つきで簡単に説明していきます。

BEM設計とは？

BEMという言葉自体が３つの言葉の頭文字を取ったものです。

Block ————– 1つの独立した括り
Element ———- Blockに含まれる要素
Modifier———– 装飾、部分的に色など変更する

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

上の図を御覧ください。簡易的なヘッダーを作成しました。
こちらのヘッダーの部分をそれぞれBEM設計に従って分けると…

Block ————– ヘッダー全体
Element ———- ヘッダー内のロゴ、メニューの部分
Modifier———– メニューで赤くなっている場所

このような形に分けることができます。

BEM設計のクラス名の記述の仕方

クラス名の付け方は3通りあります。

class=”Block”
class=”Block__Element “
class=”Block__Element –Modifier”

「Block__Element –Modifier」については、部分的に変化を加えたい場所に記述します。

もう一度先程のヘッダーを見ながら解説します。

See the Pen Untitled by kento-n96 (@kento-n96) on CodePen.

ヘッダーのクラス名（class=”Block”）

<header class="header"></header>

ヘッダーのロゴと、ヘッダーのメニューのクラス名（class=”Block__Element “）

<div class="header__logo">ロゴ</div>
<li class="header__menu-text">menu-1</li>
※２つの文字を組み合わせるときは「-」1つで繋げます。

メニューの色を変更するクラス名（class=”Block__Element –Modifier”）

<li class="header__menu-text   header__menu-text--red">menu-3</li>

Modifierで気をつけたいのが単体では使用しないということです。
自分は最初ここを理解せずにやってました。解説します。

<ul class="header__menu-list">
        <li class="header__menu-text">menu-1</li>
        <li class="header__menu-text">menu-2</li>
        <li class="header__menu-text header__menu-text--red">menu-3</li>
</ul>

上記はメニューの部分だけ抜粋したコードです。

「header__menu-text」とそれぞれクラス名があります。
3つ目だけ変更するなら、3つ目は「header__menu-text–red」だけでいいんじゃないの？
と思うかもしれませんが、Modifierは既存のものに上書きするという考え方なので単体ではだめです。

なので…

<li class="header__menu-text--red">menu-3</li>

という書き方は正しくはありません。
Modifierはどの要素に対して上書きしているかが分かるように記述します。

なので上記のコードのようにModifierがあるものが単体で存在するのは変な状況です。
ちなみにこのコードは1つだけ「header__menu-text」を赤く上書きしているということが分かります。

以下CSSのコードです。背景を赤くしていることが分かります。

.header__menu-text {
  margin-left: 15px;
  padding: 10px 20px;
  background-color: #fff;
}

.header__menu-text--red {
  background-color: red;
  color: #fff;
}

まとめ

BEM設計は奥が深くまだまだ自分も勉強の途中です。

今回はヘッダーのみをブロック要素として紹介しましたが、ロゴ自体をブロックと考えたりメニューの部分をブロックと考えたり、人によっても扱い方が変わってきます。

あくまでも今回のものは自分の考え方となっております。
簡単な解説でしたが参考にしていただけたら幸いです。