【CSS】CSS設計BEMについて - rails　技術ブログ

BEMとは？

Block(かたまり)
Element(要素)
Modifier(修飾) この頭文字をとったCSS設計の一つ

Block

ヘッダー、メイン、フッターなどのかたまりをBlockといい、BlockはBlockを含めることができる
例えばコメントブロックがあったとして、BEMで定義するとこのようになる

<div class="comment"> <!-- Block -->
  <input class="comment__form"> <!-- Element -->
  <input class="comment__btn"> <!-- Element -->
</div>

Element

Blockを構成する要素
ElementはBlockに属しているので、必ずBlock__(アンダースコア2つ)Element=>comment__formこのような書き方になる

Modifier

既存のBlockやElementの一部の見た目のみを変えたい時にModifierを使用する
Modifierを使用するときは--(ハイフン2つ)で表現する

<div class="comment"> <!-- Block -->
  <input class="comment__form"> <!-- Element -->
  <input class="comment__btn"> <!-- Element -->
</div>

<!-- 基本スタイルは同じだが、色をブルーにしたい -->
<div class="comment comment--blue"> <!-- Modifier -->
  <input class="comment__form"> <!-- Element -->
  <input class="comment__btn"> <!-- Element -->
</div>

◆参考にしたサイト・書籍

一番詳しいCSS設計規則BEMのマニュアル - Qiita

【HTML５・CSS３】CSS設計のBEMを１から理解してマスターしよ | Pikawaka - ピカ1わかりやすいプログラミング用語サイト