编写更优质的css

这篇文章是通过学习一段时间的css写的，想通过写一些文章来记录我的前端学习历程，希望能给大家一些小启示。

在我的认知里优质的css代码是清晰明了的，易维护，易重构，易扩展的。

以以下psd写的代码为例子：

1.清晰明了的注释：

为了构建响应式，此处所以写了尺寸，为之后的布局留下参考

注释的内容应是：

css代码的内容。

选择器的依赖。

使用特定声明的原因（例如因为浏览器的兼容性等）。

注释的内容不应该是一些可有可无的，或者别人不易看懂的。

2.样式不依赖于HTML：

保持选择器的简单：

div ul li a{

background-color:red;

}

多层级的样式应直接写一个类选择器，防止HTML重构带来的混乱。

尽量不要写内敛样式：

内敛样式不能实现代码的复用，也会因为HTML重构带来混乱，可根据选择器的特指度来替换内敛样式。

（也不要用HTML来实现样式 ，换行等<br/><hr>等标签通过css代码实现。）

3.分离css和JavaScript：

由于js和css都能添加样式，但应该尽可能让css和JavaScript各司其职，从而使网页结构清晰。

4.尽量使用类选择器：

由于每个网页的ID最多只能用一次。对于持续变化的网页，在编写css时，应为类选择器为元素添加样式，并且可提高代码的复用性。

5.在JavaScript中使用带前缀的类:

由于HTML中的类即用来为元素添加css样式，又在js中用做选择器，所以若未在css中使用，只用于js选择元素的类（可在类命名的时候加上前缀js-）。

6.为样式分类：

添加基础样式:

纵观psd，发现所有的文字基本都是白色，并且文字之间有padding，所以添加基础样式，之后就不用为每一个span标签添加color：white；简洁了代码。

（由于我是个前端的萌新，有什么错误或者有什么建议，大佬们可以给我说，共同进步，嘻嘻嘻）