triBlog

トリアナのブログ。

【vol.3】有名な3つのCSS設計をまとめてみた〜BEM編〜

2019.8.6
自動車学校を卒業してから一度も運転してません
ライター画像
おくだ

こんにちは!インターンの奥田です。

OOCSS編、SMACSS編に続いて、今回はBEM編です!(⌒▽⌒)

……。

サムネイルをフルーツで統一してたの、気づきました?

 

CSS設計とは(おさらい)

もう説明不要かな〜〜〜と思いつつ、2度目のおさらいです。

CSS設計はCSSを快適にするためのルールです。

誰が見ても分かりやすく、変更にも対応しやすい。そして何より書きやすいCSSになります。

有名な設計としてOOCSS、SMACSS、BEMがあります。

BEMとは

ついに来ましたね。BEM。読み方はベムです。そのまま。
今世界でもっとも支持されていながら、もっとも好き嫌いが分かれる設計と言っても過言ではありません。
その独特な命名規則から「あの気持ち悪い命名規則のやつ」的な認識の人も多いかもしれません。
しかし、世界中で支持されるには理由があります。
Block、Element、Modifierという3つの要素の頭文字を取ったBEMは、
OOCSSやSMACSSと違って、その命名規則が主な特徴となります。

特徴

命名規則

BEM唯一の特徴です。これが一番肝となる部分です。

BEMはほとんど他のクラスを汚染することなく、かつ、そのクラスの所属関係がはっきりしています。
前述したとおり、Block、Element、Modifierの3つの要素があるんですが、これらをシングルクラスで表現します。
(シングルクラスが適しているというだけで、必ずしもシングルクラスにする必要はありません。)

– Block
大きな塊のことですね。メインとかサイドバーなどの、SMACSSでいうレイアウトの部分です。

– Element
Blockの中にある要素です。ボタンやリストなんかがそうですね。

– Modifier
Elementのパターンです。エラーメッセージのスタイルは、メッセージのModifierといえます。
メッセージ(Element)のエラーのパターン(Modifier)に当てはまるわけですね。

BlockとElementはアンダースコア2つ、ElementとModifierはアンダースコア1つで結びます。

しかし、MindBEMdingというBEMから派生した考え方では、
BlockとElementはアンダースコア2つ、ElementとModifierはハイフン2つで結ぶことになっています。

MindBEMdingのほうが一般的なので、こっちのほうがいいかもしれません。

この長くユニークなクラス名は、コードの汚染を防ぎます。
「うっかり同じクラス名のCSS書いて上書きしちゃった」なんてことも、
BEMを使えばあまり心配はありません。

実際のコーディングでは以下のように使います。

CSS

HTML

BEMは基本的に1個のクラスで表現しますが、
Modifierがないクラスとあるクラスは両方記述します。ここはOOCSSっぽいですね。

header内かmain内かでクラス名のBlock部分が変わるわけですが、
同じ形のボタンを使いまわしたいときはちょっと不便かもしれません。
(同じスタイルを複数回記述することになります。)

Scssの@extend機能を使うなどの工夫が必要です。

BEMまとめ

BEMは他の命名規則に比べてクラス名が長くなり、敬遠されることがあります。
しかし、慣れてしまえばひと目で所属関係がはっきり分かるので、とりあえず使ってみるのが吉。
.main__label- -newなんて、「メインの中にラベルがあって、そのNEWのパターンなんだな」ってのが一目瞭然です。

3つのCSS設計まとめ

それぞれに特徴がありますが、必ずしもこの通りに行う必要はありません。
3つの設計思想を参考に、チーム独自のルールを決めていくのが一般的です。
OOCSSをベースにしながら、BEMの要素を持っていても構いません。
実際私も新規からコーディングするときはOOCSSとSMACSSをブレンドさせたやり方を採用してます。
(命名規則はOOCSSに準拠し、SMACSSのようにカテゴライズしてます。)

また、そういったルールは新規メンバーにもわかりやすいように、
CSSの最初の方にコメントアウトで簡単にルールを記述しておいたほうが親切でしょう。

3記事に渡って有名なCSS設計をざっくり紹介しました。
もし気になる設計思想があったら、ぜひさらに詳しく調べてみてください(⌒▽⌒)

記事を書いた人

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ページ上部へ