我们有一些“主题颜色”可在CSS表中重复使用。
有没有设置变量然后再使用的方法?
例如
.css OurColor: Blue H1 { color:OurColor; }
不需要选择器的所有样式都驻留在一个规则中,并且一个规则可以应用于多个选择器…因此,将其 翻转 :
/* 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之类的变量处理器来避免 价值 重复的风险,这会导致将来对样式的更改非常容易出错。寻求减少重复时,始终将注意力放在样式的 上下文意义 上,而忽略了样式的 当前值 。