CSS规范

1. 文件

文件格式

1. 字符编码 字符编码必须是UTF-8无BOM格式
   • VS Code → 文件 › 首选项 › 设置 › 文件 › Encoding › utf8
2. 行尾序列 必须设置为Unix (LF)？
   • VS Code → 文件 › 首选项 › 设置 › 文件 › Eol › \n

文件名称

文件的名称必须使用英文单词，特殊情况下可使用汉语拼音缩写。

1. 字母 必须全部小写
   • e.g. sidebar.css
2. 单词 必须分开并且使用-连接
   • e.g. social-media-widget.css

▲ 目录

2. 文档设置

本节展示了CSS文件的文档设置。

1. 字符编码 必须在css文件第一行指定
   • e.g. @charset 'utf-8';
   • 注意，必须要定义在 CSS 文件所有字符的前面（包括编码注释），@charset 才会生效。

▲ 目录

1. 字符编码

字符编码必须在css文件第一行指定

✖ 错误

/* 字符编码 */
@charset "utf-8";

↳ 错误，因为 @charset 在 /* 字符编码 */ 之后，没有设置在第一行。

✔ 正确

@charset "utf-8";

▲ 文档设置

3. 注释

本节介绍如何格式化和使用注释。

1. 单行注释 必须独占一行，星号与内容之间必须保留一个空格。
   • e.g. /*·This is a comment·*/
2. 多行注释 必须在他们自己的行上开始和结束，星号要一列对齐，星号与内容之间必须保留一个空格。
   • e.g. /** ↵ *·Line number one ↵ *·Line number two ↵ */
3. 单行样式注释 必须在该条样式属性后使用 空格 + 单行注释 的样式。
   • e.g. width:·10px;·/*·宽度10px·*/
4. 文件注释 必须在顶部添加关于本文件/模块的注释。

▲ 目录

1. 单行注释

单行注释必须独占一行，星号与内容之间必须保留一个空格。

✖ 错误

/*
This is a comment
*/

↳ 错误，因为 /*, This is a comment 和 */ 应该在一行内。

/*This is a comment*/

↳ 错误，因为 This is a comment 的前后没有被空格包围。

✔ 正确

/* This is a comment */

2. 多行注释

多行注释必须在他们自己的行上开始和结束，星号要一列对齐，星号与内容之间必须保留一个空格。

✖ 错误

/** This is a comment
that spans multiple lines
*/

↳ 错误， 因为 /** 和 This is a comment 在一行上。

/**
*This is a comment
*that spans multiple lines
*/

↳ 错误， 因为 This is a comment 和 that spans multiple lines 之前没有空格。

✔ 正确

/**
* This is a comment
* that spans multiple lines
*/

3. 单行样式注释

单行样式注释必须在该条样式属性后使用空格+单行注释的样式。

✖ 错误

#foo {
    position: relative;/* 设置定位方式 */
}

↳ 错误， 因为 /* 和 position: relative; 之间没有空格。

✔ 正确

#foo {
    position: relative; /* 设置定位方式 */
}

4. 文件注释

文件注释必须在顶部添加关于本文件/模块的注释。

示例

@charset 'utf-8';
/**
 * @name: 文件名或模块名
 * @description: 文件或模块描述
 * @author: author-name(mail-name@domain.com)
 *          author-name2(mail-name2@domain.com)
 * @update: 2015-04-29 00:02
 */

▲ 注释

4. 格式化

本节概述了与css样式声明和空格相关的各种常规格式规则。

1. 当规则声明块中有多个样式声明时，每条样式独占一行。
2. 在规则声明块的左大括号 { 前加一个空格。
3. 在样式属性的冒号 : 后面加上一个空格，前面不加空格。
4. 在每条样式后面都以分号 ; 结尾。
5. 规则声明块的右大括号 } 独占一行。
6. 每个规则声明间用空行分隔。
7. 所有最外层引号使用单引号 ' 。
8. 当一个属性有多个属性值时，以逗号 , 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。
9. 所有行禁止添加尾空格。

▲ 目录

示例

.footer,.header {
  position: relative;
}
.content {
  background:
    linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
  }
.content::before {
  content: '';
}

▲ 格式化

5. 样式属性顺序

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

1. 如果包含 content 属性，应放在最前面；
2. Positioning Model 布局方式、位置，相关属性包括：display / flex / float / position / top / right / bottom / left / z-index / ...
3. Box Model 盒模型，相关属性包括：width / height / padding / margin / border / overflow / ...
4. Typographic 文本排版，相关属性包括：line-height / text-align / word-wrap / font / ...
5. Visual 视觉外观，相关属性包括：color / background / list-style / transform / animation / transition / ...

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

▲ 目录

示例

.foo::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  line-height: 2;
  text-align: center;
  word-break: break-all;
  word-wrap: break-word;
  font-size: 16px;
  color: #fff;
  background: #f8f9fa;
  transform: translateX(10px);
  transition: all .3s;
}

▲ 样式属性顺序

6. 数值与单位

本节主要介绍了特殊数值和单位的书写规则。

1. 当属性值或颜色参数为 0-1 之间的数时，省略小数点前的 0 。
2. 当 长度值 为 0 时省略单位。
3. 十六进制的颜色属性值使用小写和尽量简写。
4. flex 属性需要设置为 0px 时应带单位。

▲ 目录

▲ 数值与单位

7. 最佳实践

1. 使用Normalize.css重置样式
2. 合理使用使用引号
   • i.e. 正确 background-image: url('...');, 错误 background-image: url(...);
3. 避免使用 !important
4. 尽量使用缩写属性
   • e.g. margin: 0 10px; background: url('...') no-repeat;
5. 理解css选择器的权重
6. 合理使用伪元素
7. 兼容性
8. 合适的嵌套层级
9. 适当添加媒体查询完成一定的页面适配
10. 添加浏览器前缀
11. base64图片 禁止使用

▲ 目录

1. 使用Normalize.css重置样式

相比于传统的CSS reset, Normalize.css 是一种现代的、为HTML5准备的优质替代方案，其体积也很小，而且还具有以下优点：

• 保护有用的浏览器样式而不是去掉他们。
• 一般化的样式：为大部分HTML元素提供。
• 修复浏览器自身的bug并保证各浏览器的一致性。
• 优化css可用性：用一些小技巧。
• 解释代码：有注释和详细的文档。

2. 合理使用使用引号

在某些样式中，会出现一些含有空格的关键字或者中文关键字，我们需要添加合适的引号保证代码的兼容性。

例如：

1. font-family 内使用引号

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

   body {
     font-family: 'Microsoft YaHei', '黑体-简', '\5b8b\4f53';
   }

2. background-image 的 url 内使用引号

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

   div {
     background-image: url('...');
   }

3. 避免使用 !important

使用 !important 会造成代码难以维护，当你考虑使用 !important 的时候，请先考虑以下情形：

1. 是否已经读懂所要维护的代码，考虑是否可以通过修改原来的样式实现页面效果。
2. 是否可以通过增加选择器权重来实现。
3. 是否可以通过其他方式实现效果。

如果以上情形都已经考虑，还是要用 !important，那么请在这条样式前添加注释说明这么做的理由，提高代码的可维护性。

示例

.hide {
  /* 将该类设置为最高权限隐藏类 */
  display: none !important;
}

5. 理解css选择器的权重

浏览器是通过判断CSS优先级，来决定到底哪些属性值是与元素最为相关的，从而作用到该元素上。CSS选择器的合理组成规则决定了优先级，为此，我们需要对选择器的优先级及权重有深刻的理解，才可优雅地编写和维护CSS样式代码。

CSS选择器优先级顺序：

1. 内联样式
2. ID 选择器
3. 伪类
4. 属性选择器
5. 类选择器
6. 元素（类型）选择器
7. 通用选择器

CSS选择器权重顺序：

1. 内联样式，如: style="" ，权值为 1000 。
2. ID选择器，如： #content ，权值为 100 。
3. 类，伪类和属性选择器，如 .content ，权值为 10 。
4. 类型选择器和伪元素选择器，如 div p，权值为 1 。

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

6. 合理使用伪元素

当只需要用到表现类的元素时，考虑使用伪元素。

示例

/* 添加一个小矩形 */
.foo::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 5px;
  height: 10px;
  ...
}

7. 兼容性

在书写css规则时考虑兼容IE9，并添加浏览器回退样式。

示例

.foo {
  border: 10px solid;
  border-color: #000; /* IE9不支持border-image，添加此样式在IE9下会回退到具有没有渐变颜色的边框样式 */
  border-image: linear-gradient(#000, #fff) 10;
}

8. 合适的嵌套层级

一般来说，书写CSS样式应总是从 id 开始，且一般情况下嵌套层级不超过 3 级，特殊情况下最多不超过 5 级。

✖ 错误

#first .second .third div ul li {
  ...
}

↳ 错误， 因为嵌套层级超过了 3 级。

✔ 正确

#first .second .third {
  ...
}

9. 适当添加媒体查询完成一定的页面适配

某些情况下，我们的样式需要对不同屏幕进行适配，如果不需要改变布局，可以通过 @media 规则直接写在该类的后面，如果是不同布局，如手机屏幕的分辨率，则在该样式文件的最后面统一书写。

示例

#main-container {
  margin: 10px;
}

@media screen and (min-width: 1601px) {
  #main-container {
    margin: 20px;
  }
}

10. 添加浏览器前缀

如果需要书写CSS3的样式属性，可通过编辑器插件或者webpack插件等形式为样式属性添加浏览器前缀。
如在 VS CODE 中可以安装 Autoprefixer 拓展插件，IDEA 和 Sublime 也有类似的工具。

11. base64图片

将图片转化为Base64后的的字符通常会占用较大的存储空间，css文件也会比原来大很多，因此在样式文件中使用base64是没有必要的，但这不意味着不可以在其他地方使用。

12. 禁止使用@important

与 <link> 相比，@import 更慢，使用这种方式将添加额外的页面请求，并可能导致其他无法预料的问题。