CSS规范化及解决方案

CSS规范化及解决方案

说到规范，我们会较容易联想到git分支命名及合并规范、发布规范、js编写规范等等，比较容易忽略CSS规范，通常一些大型公司中成熟的前端团队，对css代码编写也会有一套自己的简单规范。规范不必过于苛刻，目的在于提升开发效率、降低维护成本。

一、定义一套合理的规范（css命名+属性书写顺序）

1、css命名—-BEM规范?

在业界之前比较流行的css编写规范是BEM规范【块（block）、元素（element）、修饰符（modifier）】，实际也可根据团队情况制定推动更符合业务场景需要的自己的规范。

示例:

<div class="health-account">
    <div class="health-account__head">
    </div>
    <div class="health-account__body">
        <div class="tag"></div>
        <button class="health-account__button--primary"></button>
        <button class="health-account__button--success"></button>
    </div>
</div>

总的来说有以下三点核心：

1. 中划线 ：仅作为连字符，表示某个块或者某个子元素的多单词之间的连接记号，如health-account。
2. __ 双下划线：用来连接块和块的子元素
3. • 双中划线：用来描述一个块或者块的子元素的一种状态

Tips:

• 并不是所有地方都应该使用BEM命名方式，如果只是公共的单独样式，就没有使用BEM的意义。BEM的初衷是为了明确模块的关联关系，提升语义化，同时也避免css嵌套过深。
• 避免过长的样式名称定义，如 .block__el1__el2——selected
• BEM命名方式势必会比普通定义的命名要长，势必会降低代码整体的可读性，尤其在less、stylus等一些预编译工具出现后，BEM命名方式的优势就大大降低了。但这种命名规范在局部关联关系强的模块中还是很有必要的，对样式丰富的组件，这种命名方式也可以在CSS代码中避开过深的层级嵌套，提升性能，因此BEM规范可在项目中灵活使用。

2、合理的属性书写顺序

    不管是直接书写css，还是使用预编译的工具，都不可避免的要书写css属性。对简单的样式来说，属性的简写和书写顺序未必显得重要，但在复杂页面上，合理的顺序对于快速定位样式问题是非常有帮助的。

建议按照布局定位、自身属性、文本属性、其他属性的顺序来书写，而不是想到什么写什么：

1. 布局定位属性：position display float left top right bottom overflow clear z-index
2. 自身属性：width height padding border margin background
3. 文字样式 font-family font-size font-style font-weight font-varient color
4. 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5. 其他属性（CSS3）：content box-shadow border-radius transform background:linear-gradient

对比下面两种书写，后者明显可阅读性更强

.card {
    color: #1289fb;
    font-family: PingFangSC, PingFangSC-Medium;
    height: 20px;
    text-align: right;
    margin-left: 6px;
    display: flex;
    weight: 500px;
    border-radius: 2px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
}

按照顺序书写：

.card {
    display: flex;
    margin-left: 6px;
    height: 20px;
    weight: 500px;
    border-radius: 2px;
    text-align: right;
    line-height: 20px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1289fb;
}

     这样书写除了提升代码可阅读性、快速定位样式问题外，最大的作用是**减少浏览器回流（重排），**提升浏览器渲染dom的性能。

示例：

    如果将布局定位放在最后面，当浏览器在对render树解析布局的时候，遍历到position的时发现该元素是绝对定位元素，需要脱离文档流，而之前却是按照普通元素进行解析的，则不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。

延伸

浏览器渲染主流程、重排重绘

解决方案

1、css命名——可以引入less等预处理器、制定团队命名规范

2、css属性书写顺序——引入stylelint，可酌情自定义并引入到对应的开发项目中去。

安装运行工具stylelint

npm install -d -save-dev stylelint

安装stylelint的推荐配置stylint-config-standard 和 CSS属性排序插件stylelint-order

npm install stylelint-config-standard stylelint-order --save-dev

配置.stylelintrc文件,配置如下：

{
processors: ["stylelint-processor-html"], // 通过处理器processors，我们可以让styleline去处理html中style标签里面的css代码，MarkDown里面的css代码块或者js里面一段包含css的字符串。
plugins: ["stylelint-order"], // 引入属性排序插件
extends: "stylelint-config-standard", // 官方推荐配置
rules: {
		"at-rule-empty-line-before": "always"|"never",
		"at-rule-name-case": "lower"|"upper",
		"block-no-empty": true,
		"order/properties-order": [
      "position",
      ...... // 自定义各种属性的顺序
      "speak"
    ]
	}
};

由此，会根据定义的属性顺序，自行检测，规范css的书写

如果要进行自定义修复，指定文件，可执行完成自定义修复

npx stylelint **/*.{vue,css,scss} --fix

可能出现的问题——stylint与processors处理器不兼容，报错：Autofix is incompatible with processors and will be disabled.则需要去掉.stylelintrc中处理器processors的配置再执行自定义修复。

(具体可见git的issue)

更多配置可见：stylelint与order的使用