CSS "Normalizer" 工具是什么？

Question

我需要维护和改进一个现有的网站，但我发现它的CSS样式表中存在很多冗余。由于现有元素的冗余和非方法论顺序，很难跟踪和预测如何通过系统传播小变化，或者在哪里应用变化以实现某种效果，而不花费大量时间重新学习CSS文件并进行实验。

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

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

进一步澄清，我不是在寻找一个工具，用"#000000"替换为"#000"，"0.5em"替换为".5em"，"white"替换为"#FFF"等（这解决了"字符数"冗余，但没有解决"级联逻辑"冗余）。我正在寻找一种工具，可以告诉我，例如，子元素的"font-size: 10px"属性是冗余的，因为它已经从其父元素继承。

更高级的功能：类或id的"color: #000000"属性是冗余的，因为它在网站的任何HTML / PHP文件中都没有使用。

有没有一种可以自动执行此类“标准化”的工具？

- Android Eve

---

你真正需要的是一款具有优化和导入功能的CSS编译器。我想知道是否有类似的东西存在？似乎这是一个有趣的问题需要解决。 - gtrak

Answer 1

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

我想知道仅使用导入/导出循环是否足够解决您的问题？

编辑：看起来导入/导出循环不够，但SASS为您提供了方便重构的工具。

- gtrak

---

除了使用Sass外，还可以使用Compass来管理您的样式表项目。它处理构建配置，并具有一套有用的CSS习语库，以缩短源代码。简单的导入/导出不会更改您的CSS。您需要使用Sass的mixin和extend功能将其重构为更可重复使用的部分。 - Andrew Vit

Answer 2

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

话虽如此，我认为使用像 SASS（如已提到的）或 LESS 这样的框架是对你的问题的一个迂回回答。这些框架消除了很多冗余并使你的 CSS 紧凑。我喜欢 LESS 胜过 SASS，因为它与 CSS 相似。

- Aaron D

---

与https://dev59.com/zE_Ta4cB1Zd3GeqPEuF_相比较 - NullUserException

Answer 3

Aaron提出了一个关于复杂性的好观点。例如，这样的工具不仅需要访问CSS文件，还需要访问HTML（否则无法确定继承等内容）。那么，您是在寻找一种可以爬取整个站点并考虑每个页面的工具，还是可以从文件中提供标记？

此外，这样的工具很可能会生成比合格的网页设计师生成的CSS更难以维护的CSS（我想到了缩短选择器，这些选择器可能需要在以后重新变长）。如果这只是暂时的行动，那没问题，但我想知道为什么您首先需要这样做。

- Bobby Jack

Answer 4

寻找基于您的标记重复/未使用/不必要的CSS，您可以尝试WARI 或 Dust-Me Selectors（如@Aaron D所提到的），或者CSS Crunch。最后两个是浏览器扩展程序（分别针对Firefox和IE），只会查看一个页面，而WARI旨在查看整个站点。但是，我并没有很好地让WARI工作。

- bdukes

Answer 5

我不知道是否有这样的工具，考虑到CSS的复杂性，我甚至不确定是否可能解决这个问题（一些CSS样式只是为了使旧的浏览器符合标准而存在）。那么，一个创建新的符合W3C标准的CSS样式表的工具有多少价值呢？由于存在错误，它又不能在大多数浏览器上渲染。

话虽如此，您可以看一下Envjs，它允许您在模拟的浏览器中阅读网页，然后检查结果。虽然不完美，但可以帮助您入门。

- Aaron Digulla

---

这样的黑科技要么根本不使用，要么如果绝对必要，则应该在自己的样式表中隔离，因此我不相信它们会否定这种工具的有用性。 - Bobby Jack

@BobbyJack 是的，理论上是这样的。但例如，原帖似乎遇到了一个由他自己没有制作的文件问题。 - Camilo Martin

Answer 6

你可以尝试使用YUI Compressor。它适用于CSS和Javascript文件。

- goenning

---

YUI compressor更像是一个代码压缩器，其工作原理在此处有所解释。它不会做OP所要求的事情。 - NullUserException

你说得对。谢谢信息。YUI 只会给出最短的 CSS 文件，但不会删除冗余。 - goenning

Answer 7

您可以尝试使用 CSS Tidy (在线版本)。它可以减少冗余，可选地转换为缩写样式，并可用于创建经过压缩的输出和漂亮/格式化的输出。

- bdukes

---

感谢提供 CSS Tidy 在线版本的链接。然而，这个工具并不能像我上面所述的那样去除冗余。我刚试了一下，它所做的只是将 "#000000" 替换为 "#000"，"0.5em" 替换为 ".5em"，"white" 替换为 "#FFF"——这显然不是我想要的。它只解决了“字符数量”冗余问题，而没有解决“层叠逻辑”冗余问题。我正在寻找一种工具，例如，它会告诉我子元素的 "font-size: 10px" 属性是多余的，因为它已经从父元素继承了。 - Android Eve

并不是他所询问的内容。 - gtrak

它将处理样式表中的逻辑冗余（即，它将组合样式并消除相同样式的重复声明）。但是，它将无法从您的HTML结构中确定冗余，这是真的。 - bdukes