BEM

BEMとは

BEM ・・・ CSS設計、(Block Element Modifier)
       ⚠︎CSS設計・・・CSSの記述ルール

メリット

・クラス命名が容易
・要素の再利用が容易

使い方

Block ・・・要素の大元のブロック(命名:名詞)
Element ・・・ブロックに属する子要素(命名:名詞)
Modifier ・・・上記二つに修飾をする要素(命名:形容詞)

Block Element はアンダーコアで接続(__)
Modifier はハイフン二つで接続(__)

例)
<div class = “header”>
 <ul class = “menu”>
  <li class = “menu__list”>First</li>
  <li class = “menu__list”>Seconnd</li>
  <li class = “menu__list menu__list—color”>Third</li>
  <li class = “menu__list”>Fourth</li>
 </ul>
</div>

この記事が気に入ったらサポートをしてみませんか?