查看: 92|回复: 0

[DIV/CSS] CSS样式代码的书写规范

发表于 2018-5-11 08:00:00

可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束。

我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要。

本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是希望可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范。

也希望可以有更多的建议,共同的完善。本规范也可以在我的 Github 上看到,欢迎留言或者提 PR。

我觉得不同的规范都有各自的长处与缺陷,对待所谓的规范最好的方式不是人云亦云,拿来就用,而是应该结合实际情况及需求,取长补短,取其精华去其糟粕。

编码设置

采用 UTF-8 编码,在 CSS 代码头部使用:

[code]color: rgba(255, 255, 255, 0.5)

color: rgba(255, 255, 255, .5);

当长度值为 0 时省略单位。

margin: 0px auto

margin: 0 auto

十六进制的颜色属性值使用小写和尽量简写。

color: #ffcc00

color: #fc0

样式属性顺序

单个样式规则下的属性在书写时,应按功能进行分组,并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写,提高代码的可读性。

如果包含 content 属性,应放在最前面;

Positioning Model 布局方式、位置,相关属性包括:position / top / right / bottom / left / z-index / display / float / ...

Box Model 盒模型,相关属性包括:width / height / padding / margin / border / overflow / ...

Typographic 文本排版,相关属性包括:font / line-height / text-align / word-wrap / ...

Visual 视觉外观,相关属性包括:color / background / list-style / transform / animation / transition / ...

Positioning 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。

合理使用使用引号

在某些样式中,会出现一些含有空格的关键字或者中文关键字。

font-family 内使用引号

当字体名字中间有空格,中文名字体及 Unicode 字符编码表示的中文字体,为了保证兼容性,都建议在字体两端添加单引号或者双引号:

[code]background-image 的 url 内使用引号

如果路径里面有空格,旧版 IE 是无法识别的,会导致路径失效,建议不管是否存在空格,都添加上单引号或者双引号:

[code]!important 的存在会给后期维护以及多人协作带来噩梦般的影响。

当存在样式覆盖层叠时,如果你发现新定义的一个样式无法覆盖一个旧的样式,只有加上 !important 才能生效时,是因为你新定义的选择器的优先级不够旧样式选择器的优先级高。所以,合理的书写新样式选择器,是完全可以规避一些看似需要使用 !important 的情况的。

代码注释单行注释

星号与内容之间必须保留一个空格。

[code]%placeholders,只是一个占位符,只要不通过 @extend 调用,编译后不会产生任何代码量

使用 @extend 引用,则是因为每次调用相同的 %placeholders 时,编译出来相同的 CSS 样式会进行合并(反之,如果使用 @include 调用定义好的 @mixin,编译出来相同的 CSS 样式不会进行合并)

这里的组件类特指那些不会动态改变的 CSS 样式,注意与那些可以通过传参生成不同数值样式的 @mixin 方法进行区分

尽量避免使用标签名

使用 SASS ,或者说在 CSS 里也有这种困惑。

假设我们有如下 html 结构:

[code].g-content .g-content-list li { }

.g-content .g-content-list .item { }

基于 CSS 选择器的解析规则(从右向左),建议使用上述第二种 .g-content .g-content-list .item { } ,避免使用通用标签名作为选择器的一环可以提高 CSS 匹配性能。



回复

使用道具 举报