CSS命名规范化

CSS命名规范化，有利于代码阅读和维护，在大型项目及团队协作开发中有着重要的意义。这里我推荐采用BEM命名规范+适当的语义理解简写。因为BEM命名常常会因为太长而被人诟病，所以适当加上一些简写，既可保证良好的阅读性同时保证良好的书写性。

BEM命名规范

• block：模块，名字单词间用 - 连接
• element：元素，表示模块的子元素，以 __ 与block连接
• modifier：修饰，表示模块的变体，定义特殊模块，以 -- 与block连接

语义理解简写

这里我借鉴的是网易CSS框架NEC的简写规范
http://nec.netease.com/standard/css-practice.html

但是没必要刻板的照抄，吸取自己团队能理解接受的简写即可。

image

Tips

• 当遇上block后面可能既要接element和modifier的情况时，可以考虑两种思路：

  第一种思路：按照block__element--modifier的顺序进行命名

  第二种思路：此时可以考虑将element看成block来进行命名，即写成block-element--modifier

• element后面还是可以继续接block的

  例如 .van-button__loading-text 类似的命名方式

实践举例

.van-button{
    &--loading,
    &--disabled {}
    
    &__loading-text {}
}

.hd{
    &__text {}
    &__icon {}
    
    &__text--primary {}
    &__text--warning {}
}

.list{
    &-item {}
    &-item__text {}
    &-item__value {}
}

结语

最后，文无第一，规范化的东西并没有一个得到大家认可的最优解，欢迎大家讨论自己的想法，共同努力去优化开发规范。