【CSS設計基礎】BEMを用いた堅牢なCSSの書き方

【CSS設計基礎】BEMを用いた堅牢なCSSの書き方

こんにちは。
いきなりですが皆さんはCSS設計をどのくらい意識していますか?

CSSはその自由度ゆえ、規則を作らずに書き始めると無法地帯となってしまいます。
かく言う自分もBEMを知るまでは、北斗の拳よろしく、まさに無法地帯のようなCSSを書いていました。
────そう、BEMを知るまでは。

この記事では、そんなCSSを書いてしまっている方のためにBEMの基礎について簡単にまとめます。

BEMとは

BEM(MindBEMding)とは、Block(塊)Element(要素)Modifier(状態)の頭文字を取ったものです。
webサイトのコンポーネント化のための設計方法のひとつで、厳格なクラスの命名ルールが特徴的な手法です。

BEM記法で設計をしていくことで、CSSの弱点である「再利用性」「拡張性」「メンテナンス性」が低くなることを防げます。

ちなみに正確には、BEMをCSSのクラス名に適用するため作られた規則のことをMindBEMdingと言いますが、CSS界隈でBEMと言った場合はこのMindBEMdingを指すことが多いです。

Block

構成のルートとなる要素の塊のこと。ヘッダ、検索バー、記事などの大きな要素がこれに当たります。

Element

Blockの中に存在し、Blockを構成するための各要素のこと。必ずBlockの中にあり、単体では存在しません。

Modifier

BlockやElementの中で、状態やレイアウトが変化するプロパティのこと。Key(名前)とValue(値)のセットで表します。

BEMの記述方法

BEMの書き方のルール

  • BlockとElementの区切りはアンスコ2つ(__)
  • BlockまたはElementとModifierの区切りはハイフン2つ(--)
  • ModifierのKeyとValueの区切りはアンスコ1つ(_)
  • BlockやElementを2つ以上の単語で表す時はハイフン1つ(-)
  • CSS側では、クラス名のセレクターにのみスタイルを指定

以上がBEMの書き方の基本となります。セパレータを2つ繋げるのが特徴的ですね。
また単語の区切りにはハイフンを一つだけ使います。
スタイルの指定は必ず命名したクラスに対して行い、タグやid指定しないのも特徴です。

記述例を挙げるとこんな感じ。

.block__element
.block--modifier
.block__element--modifier

.block__element--modifier…。
そう、BEMはクラス名が冗長になってしまうのが唯一のデメリットです。
セパレータを2つ繋げるという使い方は初めて見るとなかなかに気持ち悪いと思います。

しかししばらく我慢して使ってみると、この命名規則のわかりやすさに納得がいくはずです。
見た目の醜さを生贄に捧げ、拡張性と保守性を召喚するのがBEMの特徴です。

記述例

さて、実際にBEMでhtmlとCSS(scss)を書いてみると、こんな感じになります。

html

CSS(scss)

html、CSS共にルール通り記述されているのがわかるでしょうか。
厳格なルールのもと記述することで、管理しやすく、またBEMを知っている人であれば誰にでも読みやすいコードを書くことができます。

この例ではシングルクラスで記述していますが、開発しやすい方法で書いて頂ければ良いと思います。自分がシングルクラスを採用している理由は後述します。

今回はBEMの記事なのでsassについては割愛しますが、一言で説明するとCSSのメタ言語です。

Syntactically Awesome StyleSeatの略で、訳すと構文激ヤバスタイルシートとなるわけですが、実際かなり便利でBEMとの親和性も激ヤバなので、今後の記事で紹介したいと思います。

シングルクラスとマルチクラス

シングルクラスとマルチクラスはどちらも一長一短なため、とりあえずどちらかに統一できていれば良いと個人的には思っています。

自分はhtml側をなるべく綺麗にしておきたいこともあって、上記のようにscssの '@extend'を使ってシングルクラス方式で書いています。

scssを使っていなかったり開発を制約上マルチクラス方式で書く場合は、以下のような書き方になります。

html(マルチクラス)

CSS(scss)

最近はマルチクラスの書き方が主流のようですが、BEMでこの書き方をするとこのようにかなり冗長で読みにくいhtmlになってしまいます。

特にチーム開発などをしている場合は、冗長なhtmlは開発さんに渡す時のことなどを考えると好ましくないというのが自分の見解です。
開発の形態などに応じて適した書き方ができるのがベストですね。

まとめ

  1. Block(.block)を作る
  2. Block(.block)の中にElement(.block__element)を作る
  3. パターンを作る場合は、Modifier(.block__element--modifier)を作る

コーディングの手順を簡単にまとめると以上のようになります。

僕も最初は冗長に見える書き方に違和感を感じていたのですが、堅固かつ流用可能で素早く書けるCSS設計として突き詰めていくとBEMが非常に効率的であることがわかってきます。

見た目の奇妙さと引き換えに強力な明快さをもたらしてくれるBEM、これを機にマスターしてみては如何でしょうか。

それではまた。

web制作カテゴリの最新記事

ページトップへ戻る