命名規則を統一すれば、HTMLのクラス名に迷わない。
- BEMとは何？
BEMとは多くの開発者が取り入れている、CSSを記述するルールです。
BEMは
Block：ブロック
Element：要素
Modifier：変更
の頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名します。
メリット
- クラスの命名が簡単になる
- 要素の再利用がしやすくなる
block__element--modifier
のように, blockとelementはアンダースコア2つで区切り, elementとmodifierはハイフン2つで区切る。
hamlでの実装
qiita.haml
.left-content
.left-contet__header
.left-contet__main
.right-content
.right-contet__header
.right-contet__main--background
.right-contet__fotter