css bem

Block Element Modify

 

1. 使用類，不使用id選擇器
2. 不使用元素選擇器
3. 特殊的一些用法不依賴於block可直接命名如：.sr-only {}

 

.block__element--modify {}

 

<ul class="menu">
  <li class="menu__item"><a class="menu__link">Home</a></li>
  <li class="menu__item--active"><a class="menu__link">About</a></li>
</ul>

 

雖然有點難看。寫起來也麻煩，不過語義清晰，好處多多