前言

在前两篇文章中，我们有讲过前端开发过程中需要注意到的HTML和Javascript规范问题，如果还没看过的，可以去看一下这两篇文章。今天这篇文章我们继续学习一下关于CSS的规范问题。

1. 前端开发中的Javascript规范，来学习一下吧

2. 前端开发过程中的HTML规范，来学习一下吧

CSS

ID和Class

ID作为网页上唯一标识一个元素的属性，在CSS中不推荐被使用，而应该使用Class来代替。

因此，我们不推荐下面采用id的写法。

不推荐写法

我们推荐下面采用class的写法。

推荐写法

而且，CSS的选择器具有不同的权重，大致可以表示成这样。

选择器权重

通过上面的权重图可以看出，一个ID选择器的权重是class选择器权重的10倍，因此如果使用ID选择器来定义CSS样式，很容易就会覆盖后面定义的Class选择器，而且还不容易发现。

通过下面一段代码，就能说明问题。

代码

避免使用标签名

在编写CSS时，应该尽量使用具有语义化的class选择器，而不应该直接使用标签名，这样可以使得CSS样式更加容易维护。

我们可以考虑这样一种情况，如果页面上的标签需要更换，而我们使用了标签名去定义样式，这样就会修改CSS文件中的内容；而如果我们只采用了Class去定义样式，那么页面上标签的修改并不会影响到CSS文件中的内容。

因此我们不推荐下面这种写法。

不推荐写法

我们推荐下面这种写法。

推荐写法

缩写属性

在CSS中提供了很多例如margin, padding一样的缩写属性，在编写CSS样式时，应当尽可能的使用缩写属性，不仅可以提高代码的可读性，而且还会提高代码执行效率。

因此，我们不推荐下面这种写法。

不推荐写法

我们推荐以下使用缩写属性的写法。

推荐写法

0值

在属性值为0时，可以省略掉后面的单位。

因此我们不推荐下面这种写法。

不推荐

我们推荐下面的写法。

推荐写法

属性声明

为了保证书写CSS样式的一致性，属性名后紧跟冒号，冒号和属性值之间有一个空格。而且每个选择器和属性声明都应该另起一行。

因此，我们不推荐以下写法。

不推荐写法

我们推荐以下写法。

推荐写法

引号

在需要使用到引号的地方，推荐使用双引号("")，而不是单引号('')，在需要使用到url时，不应该使用引号。

因此我们不推荐下面的方式。

不推荐写法

我们推荐使用下面写法。

推荐写法

结束语

今天这篇文章讲解的是前端开发中的应该遵循的CSS规范，内容可能不是很全面，大家可以自行补充。