如何检查重复的 CSS 规则?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25320591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:29:48  来源:igfitidea点击:

How to check for duplicate CSS rules?

cssduplicatesredundancy

提问by Alkshendra

I messed up my css and somehow i have a lot of the duplicate rules and my 1800 something lines css file is now of 3000+ lines..

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

Is there any way/tool that would take my css file as input and check for all the duplicate rules? and possibly generate a css removing those redundancies?

有什么方法/工具可以将我的 css 文件作为输入并检查所有重复的规则吗?并可能生成一个 css 来消除这些冗余?

回答by Akshay Vijay Jain

Install Node JS https://nodejs.org/en/download/

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

if you have already node js installed or after installing open node command prompt window by typing node( on windows machine) in start.

如果您已经安装了 node js 或者在安装打开 node 命令提示窗口之后,在开始时输入 node(在 Windows 机器上)。

Type following command to install css purge tool

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

npm install css-purge -g

npm 安装 css-purge -g

After the tool is installed,

安装工具后,

Open the folder where node command prompt window is open and paste messed up css file there and then type following command in node cmd prompt window

打开节点命令提示窗口所在的文件夹,然后在那里粘贴弄乱的 css 文件,然后在节点 cmd 提示窗口中键入以下命令

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

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

where style.css is the name of messed up css file, the above command will create a new css file with name style_purged.css which does not contain duplicate css rules.

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

But be careful, it will also remove the comments you have. https://www.npmjs.com/package/css-purge

但要小心,它也会删除您的评论。 https://www.npmjs.com/package/css-purge

回答by joseantgv

Have you tried CSS Lint? Click the arrow by the Lint! button and it'll open up some options you can play with. Make sure "Disallow duplicate properties" is checked

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

回答by flamePuppy

I have tried a couple of tools such as CSSLintand CSSBurner. I have also tried the CSS Validator from W3C, which I do not like.

我尝试了一些工具,例如CSSLintCSSBurner。我还尝试过 W3C 的 CSS Validator,但我不喜欢它。

One thing I like about CSSBurner is that it is color-coded and lets you scroll through all of your errors and repeats really quickly. I found all of my repeats (and other things) super fast.

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