文章详情
关于css命名规范之bem
标签:
  • css
日期:2021-4-24 19:28
摘要:bem是一种历史悠久的css命名规范,结构清晰,便于维护...

bem是block__element--modifier的缩写,中文是块__元素--修饰符,年代久远但影响深远,现代ui框架大部分都是基于bem规范或稍加修改,例如element-ui、vant-ui...

遵循bem规范,可以避免css的混乱无序,保持结构清晰,方便定位维护,缺点也有,那就是稍显冗余。额,还有最重要的一点是避免冲突,不过自从webpack之类的构建工具出现后,有了类似scoped的作用域效果,写类名就有点放飞自我了。

在我看来,遵循bem最大的好处是之后的维护会很省很多工作,后续接手项目的同学也能快速理清样式之间相互的联系。

bem具体释义如下:

block:一个独立的、可复用的、且不依赖其它block和element的部分,被定义为块。

element:属于block的一部分,不能独立,需要依赖block,被定义为元素,在一个已知的block中,所有的element在语义上都是相等的。

modifier:用来修饰block或element,用来区分块和元素的不同状态和不同行为特征。

命名连接符有三种:

横线 -              单词之间的连接,如user-card、home-banner

双下划线 __    连接属于block的元素,如user-card__btn、user-card__close

双横线--         代表元素不同的状态,如user-card__btn--submit、user-card__btn--color-main

在此规范里,从结构上来说各个block并不是平级,也可以是嵌套,但从语义上来说它们是等价的,没有层级关系,如:

<div class="msg-list">
<div class="tip tip--success">
<div class="tip__icon" />
<div class="tip__text" />
</div>
<div class="msg-list__item">
<div class="msg-list__time" />
<div class="msg-list__text" />
</div>
</div>
<div class="good-list">
<div class="tip tip--warning"></div>
</div>

在这段html里,msg-list是一个block,但是里面的tip又是一个block,因为同一个tip可能在另一个list里也出现,所以tip是独立的block。

注意事项:

1. 尽量避免出现block__el1__el2,如果el2是el1的后代,从语义上来说el2和el1是等价的,它们都是block的element。(个人认为可以非严格遵守,实际开发中可能会出现很复杂的结构)

2.修饰器不能独立出现,在没有定义block或element时,不能直接出现block--modifier。

3.仅使用类名,不使用id和标签名来约束选择器。

如果想了解更多bem的内容,可以看看这篇文章:

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

发送
评论(0)