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)
';