『前端规范化』CSS命名规范化

CSS命名规范化

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

BEM命名规范

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

语义理解简写

这里我借鉴的是网易CSS框架NEC的简写规范 nec.netease.com/standard/cs…

可是不必刻板的照抄，吸收本身团队能理解接受的简写便可。

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 {}
}
复制代码

结语

最后，文无第一，规范化的东西并无一个获得你们承认的最优解，欢迎你们讨论本身的想法，共同努力去优化开发规范。