BEMの命名規則について

1025 ワード
bem 命名規則 bem テキストリンク

命名規則を統一すれば、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