不需要选择器的所有样式都驻留在一个规则中，并且一个规则可以应用于多个选择器…因此，将其 翻转 ：
/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }
/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }
/* ... */
/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }
/* ... */
/* H1-specific styles */
H1
{
font-size: 2em;
margin-bottom: 1em;
}
这样，您可以避免重复在 概念 上相同的样式，同时还要清楚说明它们影响文档的哪些部分。
请注意最后一句中对“概念上”的强调…这只是出现在注释中，所以我将对此加以扩展，因为多年来我已经看到人们一次又一次地犯同样的错误-甚至早于CSS的存在： 。傍晚天空可能看起来是红色的，西红柿也一样- 但是出于相同的原因，天空和西红柿也不是红色的，它们的颜色 会 随时间而独立变化。同样，仅仅是因为您在样式表中碰巧有两个元素具有相同的颜色，大小或位置，并不意味着它们将 始终 分享这些价值观。天真的设计师使用分组（如此处所述）或诸如SASS或LESS之类的变量处理器来避免 价值 重复的风险，这会导致将来对样式的更改非常容易出错。寻求减少重复时，始终将注意力放在样式的 上下文意义 上，而忽略了样式的 当前值 。
602392714
清零编程群