如何检查重复的CSS规则？

Question

我搞砸了我的CSS，现在有很多重复的规则，我的1800多行CSS文件现在已经变成了3000多行。

是否有任何方法/工具可以将我的CSS文件作为输入，并检查所有重复的规则？ 并可能生成一个CSS文件以删除这些冗余内容？

- Alkshendra

Answer 1

安装Node JS https://nodejs.org/en/download/

如果您已经安装了Node JS或者在安装完之后，在开始菜单中输入node（在Windows机器上），打开node命令提示窗口。

输入下面的命令来安装CSS清理工具

npm install css-purge -g

安装完成后，

打开存放混乱CSS文件的文件夹，将文件粘贴到其中，并在node cmd命令提示窗口中输入以下命令：

css-purge -i style.css -o style_purged.css

其中style.css是混乱的CSS文件的名称。上述命令将创建一个名为style_purged.css的新的CSS文件，该文件不包含重复的CSS规则。

但要小心，它也会删除您的注释。 https://www.npmjs.com/package/css-purge

- Akshay Vijay Jain

---

...而且您可以决定关闭注释删除 ;) - AEQ

Answer 2

你尝试过CSS Lint吗？点击“Lint！”按钮旁边的箭头，它会展开一些选项供您玩耍。确保选中“禁止重复属性”。

- joseantgv

---

我尝试在这个上面禁止重复，但它甚至没有给出任何警告。我尝试了上面的Devilo，即使内容略有不同，它至少合并了重复的标签。 - Captain Fantastic

对我来说也没有去重。 - mindplay.dk

Answer 3

我尝试了几个工具，比如CSSLint和CSSBurner。我还尝试了W3C的CSS验证器，但我不喜欢它。

CSSBurner的一个好处是它采用彩色编码，并且让你快速浏览所有错误和重复内容。我非常快地找到了所有的重复（和其他问题）。

- flamePuppy

---

我给你点赞是因为CSSLint和CSSBurner都非常不错。CSSBurner似乎比CSSLint更加功能强大，提供了更多的CSS扫描能力，但是CSSBurner的前端/设计并不出色。另一方面，CSSLint的前端/UI非常好看，但在功能方面则稍逊一筹。 - The One and Only ChemistryBlob

CSSBurner很棒！根据您的回答，我测试了它。它不仅发现了我的文件中的重复内容，还定位到了LESS截断部分指令的位置。 - Eric Hepperle - CodeSlayer2010

CSSLint非常适合进行代码检查，但它无法发现一些更明显的错误，比如重复的类名，而且似乎在新属性/值方面有点落后。 - RozzA