CSS开发中的编码规范

Posted 2021-04-09 木亦Sam

CSS开发中的编码规范

为什么要规范编码

作为一名合格的前端开发工程师，编码规范是极其重要的，当页面的样式随着时间的增加而变得复杂的时候，css文件和代码量也随之增多，如果没有一个合格的规范去约束我们的编码，这个时候去看我们写过的代码肯定是很痛苦的，如果是别的同事去接手你的项目，那估计也是无从下手。

规范编码的好处：

• 减少代码量，增强可阅读性，提高可维护性

• 减少项目沟通的成本，加强开发效率

• 提升css性能，加快页面渲染速度，提升用户体验

注：文中有参考其它优秀文章来源，并非完全个人整理。

代码风格

1.空格规范

1-1.选择器与 { 之间

例子：

.user_info { margin: 0; padding: 0;}

1-2.冒号与属性值之间

例子：

margin: 0;

1-3.逗号后必须跟一个空格

例子：

color(0.04, rgb(88,94,124));

2.每行的长度限制

每行不得超过 120 个字符，除非单行不可分割。

例子：

/* 不同属性值按逻辑分组 */background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0;
/* 可重复多次的属性，每次重复一行 */background-image: url(aVeryVeryVeryLongUrlIsPlacedHere) url(anotherVeryVeryVeryLongUrlIsPlacedHere);
/* 类似函数的属性值可以根据函数调用的缩进进行 */background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124)), color-stop(0.52, rgb(115,123,162)));

3.值用双引号包围

属性选择器中的值必须用双引号包围，不允许使用单引号，不允许不使用引号。

例子：

/* 建议 */article[character="juliet"] { voice-family: "Vivien Leigh", victoria, female;}
/* 不建议 */article[character='juliet'] { voice-family: "Vivien Leigh", victoria, female;}

4.选择器相关

4-1.多个选择器独占一行

当一个规则包含多个选择器时，每个选择器声明必须独占一行。

例子：

/* 建议 */.text-danger,.danger { color:#4695ed;}
/* 不建议 */.text-danger, .danger { color:#4695ed;}

4-2. 不得为 id、class 选择器添加类型选择器

会影响一定性能哦。

例子：

/* 建议 */#error,.danger-message { font-color: #c00;}
/* 不建议 */dialog#error,p.danger-message { font-color: #c00;}

4-3.选择器的嵌套层级应不大于 3 级

例子：

/* 建议 */#username input {}.comment .avatar {}
/* 不建议 */.page .header .login #username input {}.comment div * {}

5.属性相关

5-1.属性定义必须以分号结尾

例子：

/* 建议 */.user_info { margin: 0;}
/* 不建议 */.user_info { margin: 0}

5-2.尽量使用属性缩写

例子：

/* 建议 */.user_info { font: 12px/1.5 arial, sans-serif;}
/* 不建议 */.user_info { font-family: arial, sans-serif; font-size: 12px; line-height: 1.5;}

5-3.属性书写顺序规范

同一 规则下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

解释：

• Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等

• Box Model 相关属性包括：border / margin / padding / width / height 等

• Typographic 相关属性包括：font / line-height / text-align / word-wrap 等

• Visual 相关属性包括：background / color / transition / list-style 等

另外，如果包含 content 属性，应放在最前面。

例子：

.sidebar { /* formatting model: positioning schemes / offsets / z-indexes / display / ... */ position: absolute; top: 50px; left: 0; overflow-x: hidden;
 /* box model: sizes / margins / paddings / borders / ... */ width: 200px; padding: 5px; border: 1px solid #ddd;
 /* typographic: font / aligns / text styles / ... */ font-size: 14px; line-height: 20px;
 /* visual: colors / shadows / gradients / ... */ background: #f5f5f5; color: #333; -webkit-transition: color 1s; -moz-transition: color 1s; transition: color 1s;}

6.值与单位

6-1.文本内容必须用双引号包围

例子：

/* 建议 */html[lang|="zh"] q:before { font-family: "Microsoft YaHei", sans-serif; content: "“";}
html[lang|="zh"] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”";}
/* 不建议 */html[lang|=zh] q:before { font-family: 'Microsoft YaHei', sans-serif; content: '“';}
html[lang|=zh] q:after { font-family: "Microsoft YaHei", sans-serif; content: '”';}

6-2.省略整数部分的 0

当数值为 0 – 1 之间的小数时，可以省略整数部分的 0。

例子：

/* 建议 */.box { opacity: .8;}
/* 不建议 */.box { opacity: 0.8;}

6-3.url()函数中的路径不加引号

例子：

body { background: url(../images/background.png);}

6-4.url()函数中的绝对路径可省去协议名

例子：

body { background: url(//baidu.com/img/bg.png);}

6-5.长度为 0 时须省略单位

例子：

/* 建议 */body { margin: 0 5px;}
/* 不建议 */body { margin: 0px 5px;}

6-6.颜色值尽量使用缩写

例子：

/* 建议 */.success { color: #fff;}
/* 不建议 */.success { color: #ffffff;}

6-7.不允许使用命名色值

例子：

/* 建议 */.text-success { color: #90ee90;}
/* 不建议 */.text-success {
color: lightgreen;}

7.文本编排

7-1. 字号

需要在 Windows 平台显示的中文内容，其字号应不小于 12px。

解释：

由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

7-2.字体风格

需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。

解释：

由于中文字体没有italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

7-3.字重

font-weight 属性必须使用数值方式描述。

解释：

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

例子：

/* 建议 */h1 { font-weight: 700;}
/* 不建议 */h1 { font-weight: bold;}

7-4.行高

line-height 在定义文本段落时，应使用数值。

解释：

将line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置line-height。

当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

例子：

.container { line-height: 1.5;}

8.变换与动画

8-1.使用 transition 时应指定 transition-property

例子：

/* 建议 */.box { transition: color 1s, border-color 1s;}
/* 不建议 */.box { transition: all 1s;}

9.响应式

9-1.Media Query 不得单独编排，必须与相关的规则一起定义

例子：

/* 建议 *//* header styles */@media (...) { /* header styles */}
/* main styles */@media (...) { /* main styles */}
/* footer styles */@media (...) { /* footer styles */}

/* 不建议 *//* header styles *//* main styles *//* footer styles */@media (...) { /* header styles */ /* main styles */ /* footer styles */}

9-2.Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中

例子：

@media(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */(min-resolution: 2dppx), /* The standard way */(min-resolution: 192dpi) { /* dppx fallback */ /* Retina-specific stuff here */}

10.兼容性

10-1. 属性前缀

带私有前缀的属性由长到短排列，按冒号位置对齐。

解释：

标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

例子：

.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

其它规范

11.Class和Id命名规范

• 使用语义化、通用的命名方式；

• 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；

• 避免选择器嵌套层级过多，尽量少于 3 级；

• 避免选择器和 Class、ID 叠加使用；

例子：

/* 建议 */.user-info{}
/* 不建议 */.userInfo{}
.user_info{}

12.不使用 @import

与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：

• 使用多个 元素

• 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

• 其他 CSS 文件合并工具

13.链接的样式顺序

a:link -> a:visited -> a:hover -> a:active