我需要维护&改进一个现有的网站,我淹死在我的CSS样式表中发现的冗余。鉴于元素的现有冗余和非方法性排序,难以跟踪和预测小变革将如何通过系统传播,或在哪里应用变更来实现某种效果,而不需要大量时间重新学习CSS文件和实验。
我一直在使用Firefox的最新Firebug和“Web Developer”附件,但显然这对我来说是不够的。我需要一个可以告诉我冗余“覆盖”的工具,也许建议一个更好的级联方案。
换句话说,帮助我生成最短的CSS文件,提供与我现在相同的精确视觉功能。
为了进一步澄清,我不是在寻找一个工具,用“#000”,“0.5em”替换“#000000”,“.emem”,“white”和“#FFF”等(这个地址是“字符“冗余,但不解决”级联逻辑“冗余)。我正在寻找一个可以告诉我的工具,例如,一个子元素的“font-size:10px”属性是多余的,因为它已经从父级继承。
更高级的功能:类或ID的“color:#000000”属性是多余的,因为它不在网站上的任何HTML / PHP文件中使用。
有没有自动执行这种“规范化”的工具?
解决方法
为了根据您的标记查找重复/未使用/不必要的CSS,您可以尝试使用
WARI或
Dust-Me Selectors(如上所述为
@Aaron D)或
CSS Crunch.最后两个是浏览器扩展(分别用于Firefox和IE),仅查看一页,而WARI旨在查看整个网站。但是,我没有多少运气让WARI工作。