据我了解,当您使用速记属性background
时,浏览器首先将所有背景属性设置为其默认值,然后放入您声明的值。那么使用更好吗background-color:white
?而不是background:white
?当您输入更多值(例如背景位置或背景图像)时,这会改变吗?还是最好单独声明属性?
我认为必须有某种临界点,其中字节的节省平衡了通过单独指定属性获得的处理时间。但是,我可能完全错了——这就是我在这里问的原因。
据我了解,当您使用速记属性background
时,浏览器首先将所有背景属性设置为其默认值,然后放入您声明的值。那么使用更好吗background-color:white
?而不是background:white
?当您输入更多值(例如背景位置或背景图像)时,这会改变吗?还是最好单独声明属性?
我认为必须有某种临界点,其中字节的节省平衡了通过单独指定属性获得的处理时间。但是,我可能完全错了——这就是我在这里问的原因。
我听说过最佳实践,但如前所述,处理甚至加载时间的差异可以忽略不计。除了在样式表中有意义之外,没有关于何时使用这些规则的最佳实践。真正的区别在于它们对继承属性的影响不同。设置background-color: white;
只会覆盖background-color
规则(无论它最初是否使用 or 设置background
)background-color
,但background
会覆盖任何/所有background
规则集,因此可能会杀死背景图像和关联background-repeat
等。这是一个示例:
.box {
background: url(star.png); // set with just background instead of background-image
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
.box1 {
background-color: blue;
}
.box2 {
background: green;
}
使用 HTML 如下:
<div class="box1 box"></div>
<div class="box2 box"></div>
.box1 将显示 star.png 图像(如果图像是透明的,则具有蓝色背景),而 .box2 将仅显示绿色背景,没有图像。这两条规则的最佳实践课程是评估 CSS 创作和继承,而不是渲染性能。请记住,通常最好应用background
到元素的最通用/抽象规则,然后使用类或 ID,使用 , 等覆盖更具体实例的background-color
属性background-image
。
CSS 的处理时间应该可以忽略不计。如果你只是因为这个而限制使用它们,那么,不要再限制自己了。
当只使用一种颜色时,background: color
应该background-color: color
给出相同的结果。
最后,归结为您是否更喜欢简写而不是单独的声明。通常,速记会使用合理的默认值,所以没关系。我通常不记得它们的正确顺序(尤其是font
速记),但除此之外,我认为它们还不错。
无论如何,您使用的速记属性可能比您预期的要多得多。例如,margin
和padding
是它们的-top
、、和组件的简写,并且是、-right
和的简写,它们都是它们属性的简写。通过使用 而不是所有非速记属性,您可以节省 11 行。-bottom
-left
border
border-width
border-color
border-style
border-[direction]-[attribute]
border