答案是：各不相同。

Question

是否建议在CSS中组合相等的声明以减少文件大小并避免重复？

例如：

#topbar,#searchbox.focus,#usermenu li:hover a,#cart-flyout-table tbody td,.btn_remove:hover,#heading-warenkorb a:hover,.button:hover span,.input-text:focus,#pages li a:hover,select:focus,.picture-overview li:hover,#category-sub li a:hover {background-color:#e3eed3}

是否建议对其他一些经常使用的属性执行此操作，例如float，text-align或padding？

代码会越来越难以阅读和编辑，但如果只针对最常见的属性，我会接受它。什么是渲染的性能？它会使我的网站更快还是更慢？

Answer 1

我会避免你提到的CSS样式的类型。

它使您的样式表更难以阅读和更新。

相反，我会根据页面的各个部分对样式进行分组

nav，header，content等

或通过行动

form，call to actions等

或两者的组合。

如果您在这些类别中看到一些重复，那么组合就可以了。

否则，例如，如果您要更新一个a，则可能需要查看四个或更多不同的位置（用于链接，活动，访问和悬停）。

Answer 2

答案是：各不相同。

一般情况下，我只建议在相关元素在内容或区域中相似时执行此操作。我会解释一下。

假设您有一个侧边栏，并且该侧边栏中有几个标题，您希望它们具有相似的样式。使用aside h1, aside h2, aside h3 { font-weight: normal; color: blue; }完全可以接受。

但是，要按照您描述的方式使用它，对于页面不同部分的100个不同元素，我不会推荐它。

Answer 3

我在组合声明时看不到任何问题。

但是，如果您想将相同的样式应用于整个页面，最好考虑调用body { }或* { }。

此处描述了在这两者之间进行选择的详细信息：difference between body and * in css

您也可以考虑使用classes或css inheritance来避免这么多组合

在这种情况下避免重复声明被认为是好的做法吗？

3 个答案:

答案是：各不相同。