是否建议在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?
代码会越来越难以阅读和编辑,但如果只针对最常见的属性,我会接受它。什么是渲染的性能?它会使我的网站更快还是更慢?
答案 0 :(得分:1)
我会避免你提到的CSS样式的类型。
它使您的样式表更难以阅读和更新。
相反,我会根据页面的各个部分对样式进行分组
nav
,header
,content
等
或通过行动
form
,call to actions
等
或两者的组合。
如果您在这些类别中看到一些重复,那么组合就可以了。
否则,例如,如果您要更新一个a
,则可能需要查看四个或更多不同的位置(用于链接,活动,访问和悬停)。
答案 1 :(得分:1)
一般情况下,我只建议在相关元素在内容或区域中相似时执行此操作。我会解释一下。
假设您有一个侧边栏,并且该侧边栏中有几个标题,您希望它们具有相似的样式。使用aside h1, aside h2, aside h3 { font-weight: normal; color: blue; }
完全可以接受。
但是,要按照您描述的方式使用它,对于页面不同部分的100个不同元素,我不会推荐它。
答案 2 :(得分:0)
我在组合声明时看不到任何问题。
但是,如果您想将相同的样式应用于整个页面,最好考虑调用body { }
或* { }
。
此处描述了在这两者之间进行选择的详细信息:difference between body and * in css
您也可以考虑使用classes或css inheritance来避免这么多组合