项目CSS命名规范

当在一个老项目的基础上，进行大规模工作的时候，通常我们会花费较多时间去阅读，维护现有代码（重构的话我还做不到），保持整体开发风格的一致性，开发风格一致也是有利于项目维护的。所以，我个人会比较专注于代码开发风格、命名约定、项目的体系结构等等。自己比较乐于在可维护性上去进行探索，并且努力使得我的代码具有透明和自记录两个特点，在此之上形成规范清晰的结构。

透明：对于他人，可以清楚的知道代码含义，力求第一眼就透彻。

自记录：不必花多余的时间去写注释作为补充文档.

一。引子

在mpVue中，看到了下面这种，第一眼的感觉就是多、无序。

目的一：希望别人看到CSS的感觉是 结构化，容易阅读和理解。

.container-x {}
.guideBar {}
.barrage-wrapper {}
.canvas-cover {}

想到我在H5项目中是如下结构。这种结构开发时方便，但维护上可能不是很好。

如果未来需求改变DOM结构，之前的CSS瞬间就gg。

目的二：希望代码具有一定的 健壮性。

.salesman-info-line-main {
    > .NotRevoke {
        > ._avatar {
            width: 47px;
        }
        > ._infoContainer {
            margin-left: 9px; // 与左侧头像留白
            > ._name {
                font-size: 18px;
            }
            > ._regdate {
                margin-top: 3px; // 与 推销员name 间距
            }
        }
    }
}

目的三：代码量适当，且力求自记录。

二。解决

方案：命名空间 + BEM + less &

命名空间 准确表达一个类的功能，以在全局上的行为方式。可读性提高。

BEM 把CSS结构化，有利于维护。

PS: CSS写注释是WHY，class的命名是WHAT。

（1）命名空间

前缀          描述

c-              组件。样式修改可被观察到，且无副作用。
o-              抽象对象。具有通用性样式。此处更改可能影响别处样式。此类极少与你要更改的特定UI相关。
u-               单一功能。工具集。通常使用!important提升权重，样式难以覆盖。应只被定义一次且不被修改。
t-                有状态主题。提供上下文。相当于开关状态的样式切换器。有助于理解当前UI状态。
s-                 范围作用域。创建新作用域隔离外部样式，书写依赖less嵌套方式。慎用（几乎不用）。
l-                 纯粹用于定位和布局。
_-                 Hack。相当于私有变量。应是临时的，且不被重用。
js-               拥有JS行为的组件。更加安全的开发和重构。
qa-             UI测试。
ss-             与服务器相关。
is-,has-      有状态。交互UI的临时状态。

（2）BEM

块（block）、元素（element）、修饰符（modifier）

用__表示块与元素的结构关系，用--来表示修饰符。

尽量保证嵌套层级不要超过四层。块力求用一个单词来表达。（毕竟BEM写长了会让人苦恼）

（3）结合使用

.c-modal {      
    t--active & {}      
    &__title {}      
    &__btn--success{}      
    &__btn--cancel{}
} 

https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
（4）标签顺序
伪类写在后面