For finding duplicate/unused/unnecessary CSS based on your markup, you can try out WARI, or Dust-Me Selectors (as @Aaron D mentioned), or CSS Crunch. The last two are browser extensions (for Firefox and IE, respectively), which will only look at one page, while WARI is intended to look at an entire site. However, I've not had much luck getting WARI to work.
I think you are looking for the holy grail of CSS. I don't think it exists. The problem being that you never know exactly what the browser is going to render and need in your stylesheet. I have used Dust-me Selectors plugin for Firefox to help locate unused styles, but to automatically do it is a tall task.
That said, I think that using a framework like SASS (as already mentioned) or LESS is a round-about answer to your question. The frameworks eliminate a lot of the redundancy and and make your CSS compact. I like LESS over SASS because of the similarities to CSS.
Aaron makes a good point about the complexity. For example, such a tool would need access to not only the CSS files, but also the HTML (it wouldn't be able to determine things like inheritance, otherwise). Are you then looking for something that will spider an entire site and take every page into account, or can the markup be provided from files?
It's also likely that such a tool would produce CSS that is less maintainable than a decent web designer would produce (I'm thinking shortening selectors which may then just need to be 're-lengthened' at a later date). That's no problem if this is just a temporary action, but I wondering why you would need to do this in the first place.
I'm not aware of such a tool and looking at the complexity of CSS, I'm not even sure it is possible to solve this (some CSS styles are just there to whack older browsers into compliance). So how much value does a tool have that creates a new W3C-compliant CSS which doesn't render on most browsers because of bugs?
That said, you should have a look at Envjs which allows you to read a web page in an emulated browser and then examine the result. Not perfect but might get you started.
You can try out CSS Tidy (online version). It will reduce redundancy, optionally convert to shorthand styles, and can be used to create minified output and pretty/formatted output.
发布评论
评论（7）
要根据标记查找重复/未使用/不必要的 CSS，您可以尝试 WARI，或 Dust-Me 选择器（如 提到@Aaron D），或CSS 紧缩。最后两个是浏览器扩展（分别适用于 Firefox 和 IE），它们只会查看一页，而 WARI 旨在查看整个站点。然而，我并没有太多运气让 WARI 发挥作用。
For finding duplicate/unused/unnecessary CSS based on your markup, you can try out WARI, or Dust-Me Selectors (as @Aaron D mentioned), or CSS Crunch. The last two are browser extensions (for Firefox and IE, respectively), which will only look at one page, while WARI is intended to look at an entire site. However, I've not had much luck getting WARI to work.
我认为您正在寻找 CSS 的圣杯。我认为它不存在。问题是您永远不知道浏览器将在样式表中呈现和需要什么。我使用了 Firefox 的 Dust-me Selectors 插件来帮助定位未使用的样式，但自动执行它是一项艰巨的任务。
也就是说，我认为使用像 SASS （如前所述）或 LESS 这样的框架是一种迂回回答你的问题。这些框架消除了很多冗余，并使您的 CSS 变得紧凑。与 SASS 相比，我更喜欢 LESS，因为它与 CSS 很相似。
I think you are looking for the holy grail of CSS. I don't think it exists. The problem being that you never know exactly what the browser is going to render and need in your stylesheet. I have used Dust-me Selectors plugin for Firefox to help locate unused styles, but to automatically do it is a tall task.
That said, I think that using a framework like SASS (as already mentioned) or LESS is a round-about answer to your question. The frameworks eliminate a lot of the redundancy and and make your CSS compact. I like LESS over SASS because of the similarities to CSS.
亚伦对复杂性提出了很好的观点。例如，这样的工具不仅需要访问 CSS 文件，还需要访问 HTML（否则它将无法确定诸如继承之类的事情）。那么您是否正在寻找能够抓取整个网站并考虑每个页面的东西，或者可以从文件中提供标记？
也有可能这样的工具生成的 CSS 比一个体面的网页设计师生成的 CSS 更难维护（我正在考虑缩短选择器，然后可能只需要在以后“重新延长”）。如果这只是临时操作，那没问题，但我想知道为什么您首先需要这样做。
Aaron makes a good point about the complexity. For example, such a tool would need access to not only the CSS files, but also the HTML (it wouldn't be able to determine things like inheritance, otherwise). Are you then looking for something that will spider an entire site and take every page into account, or can the markup be provided from files?
It's also likely that such a tool would produce CSS that is less maintainable than a decent web designer would produce (I'm thinking shortening selectors which may then just need to be 're-lengthened' at a later date). That's no problem if this is just a temporary action, but I wondering why you would need to do this in the first place.
看看 SASS，它是一个 CSS 编译器，有自己的语言和语法，但它具有 CSS 导入功能。 http://sass-lang.com/
我想知道仅导入/导出循环是否可以解决问题为你？
编辑：看起来导入/导出周期是不够的，但 SASS 为您提供了一些设施，让您在重构时变得更轻松。
Check out SASS, it's a CSS compiler with its own language and syntax, but it has CSS import capability. http://sass-lang.com/
I wonder if just an import/export cycle would do the trick for you?
Edit: Looks like an import/export cycle isn't enough, but SASS provides you with facilities to make your life easier while refactoring.
我不知道有这样的工具，并且考虑到 CSS 的复杂性，我什至不确定是否可以解决这个问题（某些 CSS 样式只是为了让旧版浏览器合规）。那么，创建一个新的符合 W3C 标准但由于错误而无法在大多数浏览器上呈现的 CSS 的工具有多大价值呢？
也就是说，您应该看看 Envjs 它允许您在模拟浏览器中读取网页，并且然后检查结果。并不完美，但可能会让你入门。
I'm not aware of such a tool and looking at the complexity of CSS, I'm not even sure it is possible to solve this (some CSS styles are just there to whack older browsers into compliance). So how much value does a tool have that creates a new W3C-compliant CSS which doesn't render on most browsers because of bugs?
That said, you should have a look at Envjs which allows you to read a web page in an emulated browser and then examine the result. Not perfect but might get you started.
您可以尝试YUI 压缩机。适用于 CSS 和 Javascript 文件。
You can try YUI Compressor. Works for CSS and Javascript files.
您可以尝试 CSS Tidy (在线版本）。它将减少冗余，可以选择转换为速记样式，并可用于创建缩小的输出和漂亮/格式化的输出。
You can try out CSS Tidy (online version). It will reduce redundancy, optionally convert to shorthand styles, and can be used to create minified output and pretty/formatted output.