16

我需要维护和改进一个现有的网站,而我正沉浸在我在其 CSS 样式表中发现的冗余中。鉴于元素的现有冗余和非方法排序,如果不花费大量时间重新学习CSS 文件和实验。

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

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

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

更高级的功能:类或 id 的“颜色:#000000”属性是多余的,因为网站上的任何 HTML/PHP 文件中都没有使用它。

有没有一种工具可以自动进行这种“标准化”?

4

7 回答 7

2

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

我想知道如果只是一个导入/导出周期就可以为您解决问题吗?

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

于 2010-08-23T16:15:54.317 回答
2

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

也就是说,我认为使用像 SASS(如前所述)或LESS这样的框架是对您问题的一个全面回答。这些框架消除了很多冗余,并使您的 CSS 紧凑。由于与 CSS 的相似性,我更喜欢 LESS 而不是 SASS。

于 2010-08-23T16:30:40.077 回答
2

Aaron 对复杂性提出了很好的观点。例如,这样的工具不仅需要访问 CSS 文件,还需要访问 HTML(否则它将无法确定继承等内容)。然后,您是否正在寻找可以蜘蛛整个站点并考虑每个页面的东西,或者可以从文件中提供标记?

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

于 2010-08-23T16:34:29.630 回答
2

要根据您的标记查找重复/未使用/不必要的 CSS,您可以尝试使用 WARIDust-Me 选择器(如@Aaron D所述)或CSS Crunch。最后两个是浏览器扩展(分别针对 Firefox 和 IE),它们只会查看一个页面,而 WARI 旨在查看整个站点。但是,让 WARI 工作的运气并不好。

于 2010-08-24T13:40:06.790 回答
1

我不知道有这样的工具,并且看着 CSS 的复杂性,我什至不确定是否有可能解决这个问题(一些 CSS 样式只是为了让旧浏览器合规)。那么,创建一个新的符合 W3C 标准的 CSS 的工具有多大的价值,而该 CSS 由于错误而无法在大多数浏览器上呈现?

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

于 2010-08-23T15:34:26.070 回答
0

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

于 2010-08-23T15:29:50.210 回答
0

你可以试试CSS Tidy在线版)。它将减少冗余,可选择转换为速记样式,并可用于创建缩小输出和漂亮/格式化输出。

于 2010-08-23T15:33:38.797 回答