当前位置：首页 > article >正文

前端代码注释风格 - CSS篇

article 2024/11/16 15:58:28

本文基于《阿里巴巴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)