XuLaLa.Tech

BEM是指Block, Element, Modifier (通常叫做BEM ) ,是一种CSS的命名方法,可能在学习CSS的时候,各种各和来命名CSs的class的方式,大写加小写,全部小写,小写加下划线等等,哪种方式更合理一点,哪种方式便于扩展,都没有考量. BEM是一种相对规范的命名方式,现在很多开源的框架都在用这种方式。来看一个例子:

.btn {}

.btn__price {}

.btn–orange {}

.btn–big {}

• 在这个例子中, block是指顶层的一个组件,如按钮.btn
• 子组件或者子元素,用连个下划线来表示”,如例子中价格.btn_price
• 组件的修饰或者描述,用两个中划线来表示”,如例子的颜色.btn-orange

通过上面的描述,生成一个HTML的例子如下:

<a class=“btn btn–big btn–orange“ href=“https://css-tricks.com“> <span class=“btn__price“>$9.99</span> <span class=“btn__text“>Subscribe</span> </a>

BEM写起了很简单,那它的好处优势在哪里

1. 新增一个组件,结构清晰明了;
2. 代码易于理解和维护
3. 开发者之间很容易通过代理来理解功能

BEM其实很好理解,使用也方便,如果你还没有找到一种合适的Css取名方法,不妨先就用这种方式。 参考文章:

httos://cssticks.com/bem-101