在基于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