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

相关推荐
qq_3901617729 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js