CSS設計 BEMを使うとき

参照元画像

##はじめに
良いCSSを書く方法として、CSS設計がいくつかあります。

その前に、そもそも良いCSSとは？
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい
とのことです。

で、良いCSSを書くためのCSS設計の1つとして妖怪人間BEMがあります。
もちろん良いCSSが達成できるなら、必要なし

今回はCSS設計ルールの1つであるBEMについてまとめてみました。

##BEMとは
BEMとは、Block、Element、Modifierの略語

Block ⇒ 塊
Element ⇒ 要素
Modifier(kyeとvalueで表す) ⇒ 状態（変化）

##なぜBEMを使うの？
・長期間メンテナンスできる設計で、ファーストバージョンの開発をすばやくするため
・チームのスケーラビリティ
・コードの再利用性

私が使う理由は、ブロックの再利用があるかも！？と思った時にBEMを使用します。

たとえばランディングページとか
以前作ったサイト内にある、ブロックを他のサイトに利用したい時に、HTMLとCSSのブロックを抜き出しすことで再利用が簡単にできます。（継承とか諸々気にしなくて済む）

##BEMを使うための必要知識

1. Block、Element、Modifierという3つの概念の理解
2. class名の命名ルールの理解

概念を理解して、命名ルールに基づいてコーディングをすればOK

##Block、Element、Modifierという3つの概念
前提としてWebページはBlockの集まりと考える。

###1. Block（ブロック）
Block
###2. Element（エレメント）
Blockの構成要素
###3. Modifier（モディファイア）
・BlockやElementのバリエーションの軸や、状態を表すプロパティの役割
・Modifierは名前（key）と値（value）を持ち、複数のModifierを同時に使用可能
・Blockに対するModifierと、Elementに対するModifier　の2つある

##例
Block
└　Element

<div class="search">                           <!--Block-->
  <input class="search__input" type="text">    <!--Element-->
  <input class="search__button" type="submit"> <!--Element-->
</div>

BlockとModifier
└　Element

<ul class="list  list_type_A">        <!--Block-->と<!--Modifier-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
</ul>

<ul class="list  list_type_B">        <!--Block-->と<!--Modifier-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
  <li class="list__item"></li>　　　　　　　　　　　　　　　　<!--Element-->
</ul>

Block
└　ElementとModifier

<ul class="menu">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--Block-->
  <li class="menu__item"></li>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--Element-->
  <li class="menu__item  menu__item_state_current"></li>　　　　<!--Element-->と<!--Modifier-->
  <li class="menu__item"></li>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<!--Element-->
</ul>

##class名の命名ルール
Block、Element、Modifierそれぞれの区切りに、
一貫したセパレーター 「_」　「_ _」 「-」を使用します。

基本ルールは3つ

1. BlockとElementとの区切り
2. Block(or Element)とModifierとの区切り、Modifierのkeyとvalueの区切り
3. BlockやElement名を、2つ以上の単語で表す場合の単語と単語との区切り

※大事なのはセパレーターの種類によって
・BlockとElementの区切りなのか?
・Modifierの区切りなのか?
・ただの単語の区切りなのか?
が、はっきり判別できるようにすること。

##まとめ
再利用するかも！？と感じたらBEMで組むが今のところの使用用途です。
他にこうゆう理由で私は使用しますとかあれば教えて頂けると嬉しいです。

##参考記事
###BEM
・BEMを参考にしたCSS設計
・BEMによるフロントエンドの設計

###良いCSS設計について知る
・Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
・より良いCSSを書くための様々なCSS設計まとめ