CSS规则集
最后更新于：2022-04-01 10:46:56
在这里，极有可能颠覆每个人对书写 CSS 规则集的认知（根据众多规范整理而成，包括[CSS Guidelines](http://cssguidelin.es/#anatomy-of-a-ruleset)）：
* 相关联的选择器写在同一行；不相关联选择器分行书写；
* 最后一个选择器和左开大括号(`{`)中间书写一个空格；
* 每个声明单独一行；
* 冒号(`:`)后添加空格；
* 所有声明的尾部都添加一个分号 (`;`)；
* 右闭大括号(`}`)单独一行；
* 右闭大括号(`}`)添加空行。
示例:
~~~
// Yep
.foo, .foo-bar,
.baz {
display: block;
overflow: hidden;
margin: 0 auto;
}
// Nope
.foo,
.foo-bar, .baz {
display: block;
overflow: hidden;
margin: 0 auto }
~~~
添加与 CSS 相关的规范时，我们需要注意：
* 本地变量在其他任何变量之前声明，并和其他声明用空行分隔开；
* 不需 `@content` 的混合宏在放在其他声明之前；
* 嵌套选择器在新行声明；
* 需要 `@content` 的混合宏在嵌套选择器后声明；
* 右闭大括号(`}`)上一行无需空行；
示例:
~~~
.foo, .foo-bar,
.baz {
$length: 42em;
@include ellipsis;
@include size($length);
display: block;
overflow: hidden;
margin: 0 auto;
&:hover {
color: red;
}
@include respond-to('small') {
overflow: visible;
}
}
~~~
## 扩展阅读
* [Anatomy of a Ruleset](http://cssguidelin.es/#anatomy-of-a-ruleset)