让css的权重变得更友好的小技巧

技巧一：样式总是作为特定属性组合出现

一个很好的例子就是color和bakground-color的组合。除非你只做小调整，不然你需要一起调整他们。当给一个元素添加背景颜色时，它可能不包含任何文本，但可能会有一些子元素。因此，我们一起设置前景色(color)和背景色(background-color)，我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时，不需要到处寻找需要修改的文本颜色，因为他们都以一个组合的形式出现在一起。

技巧二：使用动态值，比如currentColor和em等

有时候文本颜色也会使用在其他属性上。比如说border、box-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案，可以直接使用currentColor。默认情况下，color是可以继承的，你只需要在一个地方修改就可以改变其他属性的颜色。

同样的，给font-size属性使用em单位，允许你只修改:root的font-size就可以改变元素的盒模型大小。

技巧三：使用inherit属性值继承其父元素样式来覆盖UA自带样式。

像button、input这样的表单控件，不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用inherit继承其父元素样式，从而覆盖浏览器的UA样式。

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}