CSS“Normalizer”工具？

Question

我需要维持＆amp;改进现有的网站，我淹没了我在CSS样式表中发现的冗余。鉴于元素的现有冗余和非方法逻辑排序，很难跟踪和预测微小变化如何在系统中传播，或者在何处应用变化以实现某种效果，而无需花费大量时间重新学习CSS文件和实验。

我一直在使用Firefox的最新Firebug和“Web Developer”附加组件，但显然它们对我来说还不够。我需要一个可以告诉我冗余“覆盖”的工具，并且可能建议一个更好的级联方案。

换句话说，帮助我生成最短的CSS文件，它提供了我现在拥有的完全相同的视觉功能。

为了进一步澄清，我不是在寻找一种工具，用“＃000”代替“＃000000”，用“。5em”代替“0.5em”，用“#FFF”替换“白色”等。（此地址“字符数”冗余，但不解决“级联逻辑”冗余）。我正在寻找一个工具，可以告诉我，例如，子元素的“font-size：10px”属性是多余的，因为它已经从其父元素继承。

更高级的功能：类或ID的“color：＃000000”属性是多余的，因为它不会在网站上的任何HTML / PHP文件中使用。

是否有自动执行此类“规范化”的工具？

Answer 1

查看SASS，它是一个CSS编译器，具有自己的语言和语法，但它具有CSS导入功能。 http://sass-lang.com/

我想知道只是一个导入/导出周期会为你做这个伎俩吗？

编辑：看起来导入/导出周期不够，但是SASS为您提供了在重构时让您的生活更轻松的设施。

Answer 2

我认为你正在寻找CSS的圣杯。我不认为它存在。问题是你永远不知道浏览器将在样式表中呈现和需要什么。我已经使用Firefox的Dust-me Selectors插件来帮助找到未使用的样式，但自动执行它是一项艰巨的任务。

那就是说，我认为使用SASS（如上所述）或LESS这样的框架是对你的问题的回答。框架消除了大量冗余，并使您的CSS紧凑。由于与CSS的相似性，我喜欢SASS而不是SASS。

Answer 3

Aaron对复杂性提出了一个很好的观点。例如，这样的工具不仅需要访问CSS文件，还需要访问HTML（否则将无法确定继承等内容）。你是在寻找能够占用整个网站并考虑每一页的东西，还是可以从文件中提供标记？

这样的工具也可能会产生一个CSS，它比一个像样的网页设计师所能产生的那样难以维护（我正在考虑缩短选择器，这可能只需要在以后“重新加长”）。如果这只是一个临时行动，那没问题，但我想知道为什么你首先需要这样做。

Answer 4

要根据您的标记查找重复/未使用/不必要的CSS，您可以尝试WARI或Dust-Me Selectors（提及@Aaron D）或CSS Crunch。最后两个是浏览器扩展（分别用于Firefox和IE），它们只查看一个页面，而WARI用于查看整个站点。但是，我没有太多运气让WARI工作。

Answer 5

我不知道这样的工具并且看着CSS的复杂性，我甚至不确定是否有可能解决这个问题（一些CSS样式只是为了让老版浏览器符合要求）。那么工具有多少价值可以创建一个新的符合W3C标准的CSS，由于存在错误而无法在大多数浏览器上呈现？

那就是说，你应该看看Envjs，它允许你在模拟的浏览器中阅读网页，然后检查结果。不完美，但可能会让你开始。

Answer 6

您可以尝试YUI Compressor。适用于CSS和Javascript文件。

Answer 7

您可以试用CSS Tidy（online version）。它将减少冗余，可选择转换为速记样式，并可用于创建缩小的输出和漂亮/格式化的输出。