假设我有许多按钮.每个按钮都有一个不同的图标,但都来自同一个精灵表.
现在我想知道的是,这在浏览器方面更有效率.通过多个小规则为每个按钮设置样式,如下所示:
.icon { background-image: url('iconsheet.png'); } .a-button { background-position: -x -y; } .b-button { background-position: -x -y; } .c-button { ... <input class="icon a-button"> blabla ...
或者这更好:
.a-button { background-image: url('iconsheet.png'); background-position: -x -y; } .b-button { background-image: url('iconsheet.png'); background-position: -x -y; } .c-button { background-image: url('iconsheet.png'); background-position: -x -y; } <input class="a-button"> blabla ...
请注意
>代码是在程序上创建的,所以我只对解析,渲染等效果感兴趣,而不是最好的编码实践.
>这只是一个玩具设置.实际上,游戏中有不同属性的组合(边框,字体等).
只有少数臃肿的规则适用于每个标签,这些规则是否会超过必须提供更大的CSS文件?
非常感谢!!
[编辑]:到目前为止,感谢您的所有答案!为了澄清,我正在使用SASS / SCSS.我正在使用的* .scss文件很好,可读性/可维护性.
我特别感兴趣的是,每个标签具有更少的单个规则是否有性能优势,这使得最终拥有bazillion-line css文件是可以接受的.