前端代码注释风格 - 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后,双斜杠注释会被删除,/* */不受影响。

相关推荐
想你的风吹到了瑞士4 分钟前
变量提升&函数提升
前端·javascript·vue.js
生椰拿铁You16 分钟前
12 —— Webpack中向前端注入环境变量
前端
Huazzi.44 分钟前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉1 小时前
前端和后端
前端·学习笔记
寒雒2 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州2 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
战族狼魂2 小时前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转
javascript·css·html
Komorebi⁼2 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐2 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX2 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos