我使用的Bem的习惯

Posted 2021-01-21 ww01

在基于BEM命名思想的基础上，我整理一些实用的点：

BEM，B即block（块），E即element（元素），M即modifier（修饰符）

块：最顶层，可包含块和元素

元素：被块包含，通常为最终被包含项，即无子代，当然，也有例外，它有时也会包含其他，如：

<div class="media">
  <img src="logo.png" alt="Foo Corp logo" class="media__img--rev">
  <div class="media__body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>
</div>

应注意的，它内部的东西class单独命名，最好不要有层级关系

修饰符：可修饰块和元素，表示一种状态

 

注意，不是所有时候都用BEM，当你觉得一个DOM结构符合使用BEM的条件时，你就可以用

完整的class名结构如下：

block-name__element-name--modifier