创建可读性良好的 CSS

资料：创建可读性良好的 CSS

你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。

空白字符

空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。

对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。

如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。

样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。

示例

有人喜欢我们这里使用的紧凑的书写风格，但是如果规则较长的时候就需要来进行分割：

.carrot {color: orange; text-decoration: underline; font-style: italic;}

也有人喜欢下面这种每行只写一个属性-值的风格：

.carrot{color: orange;text-decoration: underline;font-style: italic;}

还有人喜欢缩进（两个空格、四个空格，或者tab键是最常用的方式）：

.carrot {  color: orange;  text-decoration: underline;  font-style: italic;}

还有人喜欢这种垂直对齐的方式（这种方式比较难维护）：

.carrot    {    color           : orange;    text-decoration : underline;    font-style      : italic;    }

有些人混合使用空白字符来提高可读性：

.vegetable         { color: green; min-height:  5px; min-width:  5px }.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }

而且，在使用的空白字符的时候，有人喜欢用tab键，有人喜欢使用空格。

注释

CSS注释以/* 开始，以 */结束。

你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。

对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。

示例

/* style for initial letter C in first paragraph */.carrot {  color:            orange;  text-decoration:  underline;  font-style:       italic;  }

选取器组

当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。

在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。

示例

这条规则将 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/h1), [, 和 “ 匹配到的元素设置为相同颜色。

将定义颜色的规则写在一个地方是正确的，因为有些时候，这个颜色值可能需要统一修改。

/* color for headings */h1, h2, h3 {color: navy;}

实践：添加注释来提高展现力

1. 编辑你的样式表，将下面的几条规则添加进去（规则顺序可以任意设置）：

   strong {color: red;}.carrot {color: orange;}.spinach {color: green;}#first {font-style: italic;}p {color: blue;}

2. 为了让代码变得可读性更高，你需要通过分析其中的联系来对代码重新排序，并选择你认为最合适的方式来添加一些空白字符和注释。

3. 保存文件并刷新浏览器页面，要确保你更改后代码不影响原来的显示效果：

**C**ascading **S**tyle **S**heets **C**ascading **S**tyle **S**heets

​