How to check for duplicate CSS rules?

Question

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..

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?

Answer 1

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

Answer 2

Install 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.

Type following command to install css purge tool

npm install 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-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.

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

Answer 3

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

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.