本文基于《阿里巴巴CSS编程规约》、stylelint rules进行编写,涉及预编译语言(Sass、Less)的编码风格和最佳实践。
1.1 编码风格
空格的使用
选择器和{之间保留一个空格。.selector-disabled {
在使用逗号分隔的属性中,逗号后保留一个空格。color: rgb(0, 0, 0);
属性名和冒号前无空格,冒号后空一格。margin-top: 15px;
> + ~ || 等组合器前后个保留一个空格。
换行的使用
使用多个选择器时,每个选择器应该单独成行
声明块的右侧大括号}应该单独成行,如果声明块内只有一条语句,也要进行换行。
属性声明应该单独成行
单行代码最多不要超过100字符
注释
和js篇一样,注释分为行注释和块注释,注释只要不是在块的顶部或上一行也是注释的情况下,都需要进行换行。
分号的使用
在css语法中,最后一条的分号是可选的,但为了代码的一致性和易用性,建议使用分号结尾。
1.2 选择器
id选择器
不优先使用id选择器,因为后续很难进行样式覆盖,继而引发!important的恶性循环。
属性选择器
属性选择器的值始终用双引号包裹
css选择器
使用css选择器时,应注意以下性能问题:
使用class而不是原生元素标签
减少在经常出现的组件中使用个别属性选择器如(.home[attr^="val"] {...})// 属性attr的值以val开头的元素
控制选择器的长度,每个组合选择器内的个数不超过3个
从效率的角度看,css选择器从高到低的排序是:
-
id选择器 #header
-
class类选择器 .home
-
标签(元素)选择器 div
-
相邻兄弟选择器 .parent + .borther
-
父子选择器 .parent > .children
-
后代选择器 ul li
-
通配符 *
属性和属性值
不推荐使用!important进行样式覆盖
十六进制统一使用小写字母(更易分辨)#efefef 和 #FEFEFE
值为0时,省略单位 margin-top: 0
保留小数点前的0,同样出于增强代码可读性和一致性的原因。由于css压缩工具会在压缩时帮我们去掉0,所以不存在多占用一个字符的问题。
属性声明的顺序
相关联的属性声明最好写在一起,并按以下顺序排序:
定位:position、left、right、bottom、top、z-index
盒模型: display、float、width、height、margin、padding、border
文字排版:font、color、line-height、text-align
外观:如background
其他属性
定位和盒模型放在最前,因为它们决定了元素的布局、位置和尺寸。定位在盒模型之前,因为定位会让元素脱离正常文本流,从而使盒模型属性失效。
除定位和盒模型之外,其他属性只在元素内部起作用,不会对前两类属性的结果产生影响,因此放在后面。
其他
避免使用css的@import
与<link>相比,@import会在关键渲染路径上增加更多的往返,即渲染路径的深度变长,这样会导致浏览器处理css文件的速度变慢,因此我们应该避免使用@import
1.3 Sass和Less
Sass\Less作为历史遗留下的产物,虽然在一定程度上提高了开发者的效率,但不同的处理器语言也增加了项目维护成本(特别是多人协作,多团队协作的时候)。
随着css一些新特性的出现,Sass、Less的优势也会慢慢消失。
建议使用postCSS处理器,PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具,它提供了一种强大的方式来处理 CSS,例如自动添加前缀、优化代码、进行样式的转换等。通过使用 PostCSS 插件,可以根据具体需求对 CSS 进行各种自定义的处理和增强。
与Sass、Less不同的是,Sass、Less是预处理器,而postCSS是后处理器。CSS 预处理器是一种在编写 CSS 样式之前对其进行处理的工具。它允许我们使用更高级的语法和特性来编写 CSS,然后将其转换为普通的 CSS 代码,以便在浏览器中使用。PostCSS后处理器,它在 CSS 代码已经编写完成后进行处理。PostCSS 提供了一种强大的插件系统,可以让我们在不修改原始 CSS 文件的情况下,对其进行各种修改和优化。
此处参考PostCSS 从入门到精通,看着一篇就够了(1)-CSDN博客
嵌套选择器
嵌套选择器深度不建议超过3层,否则可能带来一些副作用
- 与HTML强耦合,不利于复用
- 过高的选择器优先级
注释
在Sass和Less中可以使用//双斜杠注释,但是编译为css后,双斜杠注释会被删除,/* */不受影响。