本文主要是介绍前端代码注释风格 - CSS篇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本文基于《阿里巴巴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选择器从高到低的排序是：
1. id选择器 #header
2. class类选择器 .home
3. 标签（元素）选择器 div
4. 相邻兄弟选择器 .parent + .borther
5. 父子选择器 .parent > .children
6. 后代选择器 ul li
7. 通配符 *
属性和属性值
不推荐使用!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博客
功能 | Vite 官方中文文档 (vitejs.cn)
嵌套选择器
嵌套选择器深度不建议超过3层，否则可能带来一些副作用
- 与HTML强耦合，不利于复用
- 过高的选择器优先级
注释
在Sass和Less中可以使用//双斜杠注释，但是编译为css后，双斜杠注释会被删除，/* */不受影响。
这篇关于前端代码注释风格 - CSS篇的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
