如何检查重复的 CSS 规则？答案

【问题标题】：How to check for duplicate CSS rules? [duplicate]如何检查重复的 CSS 规则？
【发布时间】：2014-10-08 20:17:02
【问题描述】：

我搞砸了我的 css，不知何故我有很多重复的规则，我的 1800 行 css 文件现在有 3000 多行..

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

【问题讨论】：

【解决方案1】：

我尝试了一些工具，例如CSSLint 和CSSBurner。我也尝试过来自 W3C 的 CSS Validator，我不喜欢它。

我喜欢 CSSBurner 的一点是，它是彩色编码的，可以让您滚动浏览所有错误并快速重复。我发现我所有的重复（和其他事情）都非常快。

【讨论】：

我支持你，因为 CSSLint 和 CSSBurner 都很不错。 CSSBurner 似乎比 CSSLint 更实用，提供更多的 CSS 扫描能力，但 CSSBurner 的前端/设计没什么可写的。另一方面，CSSLint 前端/UI 非常好，但提供的功能较少。
CSSBurner 太棒了！根据你的回答，我测试一下。它在我的文件中找到了重复项，并找到了 LESS 切断了我的一些指令的位置。
CSSLint 非常适合 linting，但它没有发现一些更明显的错误，如重复类，在新属性/值方面也有点落后。

【解决方案2】：

安装节点 JS https://nodejs.org/en/download/

如果您已经安装了 node js，或者在安装打开 node 命令提示符窗口后通过在 start 中键入 node( 在 windows 机器上)。

输入以下命令安装 css purge 工具

npm install css-purge -g

工具安装后，

打开节点命令提示符窗口所在的文件夹并粘贴混乱的 css 文件，然后在节点命令提示符窗口中键入以下命令

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

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

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

【讨论】：

【解决方案3】：

你试过CSS Lint吗？单击 Lint 旁边的箭头！按钮，它会打开一些你可以玩的选项。确保选中“禁止重复属性”

【讨论】：