BEMとは

BEMとは
– フロントエンドの設計方法
– Block、Element、Modifier
– 厳格なclass名の命名ルール
https://en.bem.info/methodology/

背景
– スタイルの優先順位の指定が難しい
– !importantの多用
– パーツを別の場所に流用すると表示が崩れる
– 制作者本人しかわからないclass名

制作ボリュームが膨大になった時、全体像を誰も理解できないってのはよくありますね。
特に、長いサービスだと、前任者が全員退職して、知っている人がいないとか。

BEMではパーツをBlockと呼ぶ
Blockはid属性ではなく、classを使う
※idは1ページ1回、classは重複利用可能
Blockは入れ子にしない

ElementはBlockの構成要素
Elementのclass名はblockの構成要素名を入れる

.search
.search__input
.search__button


Modiferは既存のBlockやElementと似た物を作りたいとき

<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
 
<ul class="list  list_type_check">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>

BEMでは、block, element, modiferで一貫したセパレーター(_)を使う

modife: Block_key_value
単語はハイフン(-)もしくはキャメルケースなど

で、BEMはどれ位使われているかというと、50%くらい
50%といえば、かなりの割合ですなー