こんにちは！ 湘南 藤沢の小さなWeb制作所、S-Create Garageです。

今回は「BEM」について書いてみようと思います。

CSSを記述する際にBEM記法を意識すると、余計なプロパティを作らずにCSSの名前を作成できるというメリットがあります。

• 目次
• BEMとは？
• 普通に書くCSSの記法とは何が違うの？
• Block、Element、Modifierを意識して書き直してみる。
• BEMを用いるメリット。
• まとめ

BEMとは？

まず、BEMとは以下の略称となります。

「Block、Element、Modifier」

Block ＝ 一番大きな括り
Element ＝ ブロックの中の要素
Modifier ＝ ブロックやエレメントの変化

フロントエンドでの設計方法のひとつで、よくある最初に作った人にしか理解のできないclass名の命名についてのルールが、しっかりと構造的に記述できる記述方法の事になります。

普通に書くCSSの記法とは何が違うの？

では、意識しないで普通に書くCSSと、BEM記法では何が違うのでしょうか？？

CSSを書いていると、どこに何という名前を付けたか？…ゴチャゴチャになって来る事もよくありますよね。。汗

今回はそんな悩みを解消できるメリットとしてBEM記法の紹介をします。

例えば以下のようにHTMLをマークアップしたとします。

この様に記述をしても間違いではないのですが、一つのブロック（この場合はoutという箱）が、バラバラになってしまいます。

では、このoutというブロックを一つの塊としてCSSを設計していく為にはどうすればよいのでしょうか？

Block、Element、Modifier意識して書き直してみる。

では、BEM記法を意識してこのCSSを書いてみましょう。

以下の様になりました。↓↓

<div class=”out“>
<div class=”out_box1“><a class=”out_box1__link” href=”#”>Link1です。</a></div>
<div class=”out_box2“><a class=”out_box2__link” href=”#”>Link2です。</a></div>
</div>

これを見るとoutという箱が一番外にあり、その中に「outの中のbox」、「outの中のboxのリンクボタン」

という様に、一つの塊として成立していることがわかります。

この様に記述をしていくことで、何(Block)が何(Element)の何(Modifier)なのか？が明確になります。

「box」というCSSなんて特によく使いそうなクラスネームなので、こうやって書かないと他に使いまわしもしにくくなってきます(;´･ω･)

BEMを用いるメリット。

• 要素が何か明確になる
• クラス名だけでどういった役割なのかを判別しやすい
• ブロック内でスタイルの影響範囲が完結するため後々の変更がしやすい

以上のように「作った人にしかわからない」「後から見直して、よくわからない」「要所要所のポイントで解決できる」というメリットがあります。

また、後日書こうかと思っておりますが「SCSS」を用いた際にも、この書き方を行っているとSCSSの特徴である「入れ子」に対応しやすくなってきます。

まとめ

・CSSの設計をするときにBEMを意識すると、効率が良くなる。

・チーム、社内で共有する時に制作者以外でもカスタマイズしやすい構造が作れる。

・一つのブロック内で命名が完結するので、他のブロックと被って不具合が起きたりしにくい。

今回はBEM記法についての記事を書いてみました！
いかがでしたでしょうか？ 僕も最初はクラスネームの命名がゴチャゴチャで大変でした(;・∀・)

S-CreateGarageは湘南 藤沢でホームページ制作を行っています。
BEM記法を意識した、スッキリ設計の制作を心がけています(｀・ω・´)！

それではまた。

お仕事のご依頼はこちらから。