CSS設計(2)

 

1.  前回の概要

前回はOOCSSについて取り扱いました。OOCSSの基本原則として、

(1)Separate structure and skin(構造と見た目の分離)

(2)Separate container and content(コンテナーとコンテンツの分離)

というものがありました。

今回はOOCSSと同じくCSS設計の基本となるBEM(MindBEMding)について扱っていきます。

 

 

2.  BEM

BEMとは、

  • Block(かたまり)……大きなくくりの「クラス」
  • Element(要素)……Blockの中にある要素の「クラス」
  • Modifier(変更)……BlockやElementの変化(派生)

の頭文字をとったものです。OOCSSと同じくCSSの設計手法の一つですが、BEMにはこの考えを用いた厳格な命名規則MindBEMding)が存在します。

以下においては「MindBEMding」の命名規則を紹介していきます。(今回はMindBEMdingの命名規則がテーマとなります。)

 

 

3.  MindBEMdingの使用例

MindBEMdingにおける命名規則では、Block・Element・Modifierを次のようにつなぎます。

  • Block(かたまり)……クラスの先頭
  • Element(要素)……「アンダースコア2つ(子供的)」でつなげる
  • Modifier(変更)……「ハイフン2つ(仲間的)」でつなげる

「ハイフン1つ」は複数単語を繋げるだけで特に役割はないので注意。

 

全てをまとめるとこんな感じ。

Block__Element—Modifier

(もちろん、Block--Modifier とかになることもあります)

 

とはいえなんだかわかりづらいので例を示していきましょう。

こんなホームページがあるとして、(デザインがいいかどうかは一旦おいておきます)

 

f:id:sufurin:20180420165225p:plain

 

これはざっくり下のようなくくりになっています。

で、その大きいくくりに対して、例えばこんな感じにclass名をつけることができます。(global-navの「ハイフン1個」は複数単語をつなげるもので、それだけの意味です。)

  

f:id:sufurin:20180420165513p:plain

 

 

さて、これらはいわゆる大きなくくり「Block」となります。

というわけで、次にBlockの子供的要素「Element」を見ていきます。Blockの中をもう少し細かく分けていきましょう。 

 

f:id:sufurin:20180420170156p:plain

 

と、こんな感じに分けることができますね。アンダースコア2つで「Block」と結ばれています

 

さてさて、「gloval-nav__list」は4つありますね。もし、これらを1つずつ色違いにしたいと思ったとします。そんな時には「Modifier」を使用するといいでしょう。

 

f:id:sufurin:20180420172143p:plain

 

Modifier」はハイフン2つでつなげればいいので、

 

f:id:sufurin:20180420173036p:plain

 

と、こうすればいいですね。(あくまでも一例ですが)

 

 

4.  で、BEM(MindBEMding)とは

BEMはロシア人美少女の企業が考案したCSS設計手法で、シングルクラス(クラスは各一つ)と相性がいいです。

 

MindBEMding命名規則を導入すると、「わかりやすい」かつ「破綻しにくい」というメリットがあります。

なぜわかりやすいか、それは、アンダースコアとハイフンがElementとModifierの関係を見た感じで表現できるからです。

Elementはアンダースコアによって「子」の感じがしますし、Modifierはハイフンによって「仲間」という感じがしますよね。ね。

 

デメリットとしては、「クラスが長くなりがちになる」、「シングルクラスで書いていく場合、コード量が多くなってしまう」、などでしょうか。

 

 

今回のまとめとしては、MindBEMdingという命名規則を使うという選択肢もある、ということです。

前回取り上げたOOCSSMindBEMdingを組み合わせたようなパターンもわりとありがちな気がします。

 

 

今回は最初にも書いた通り、「CSS設計手法」というよりかは「命名規則手法」について取り上げました。次回はCSS設計手法の一つ「SMACSS」について取り上げます。たぶん。