41

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?

Alkshendra
  • 411
  • 1
  • 4
  • 5

3 Answers3

54

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

Hynes
  • 3,394
  • 3
  • 22
  • 22
Akshay Vijay Jain
  • 13,461
  • 8
  • 60
  • 73
7

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

joseantgv
  • 1,943
  • 1
  • 26
  • 34
2

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.

flamePuppy
  • 61
  • 5
  • 2
    I am upvoted you because CSSLint and CSSBurner are both pretty nice. CSSBurner appears to be more functional and offer more CSS scanning capability than CSSLint, but CSSBurner's front end / design is nothing to write home about. On the other hand, CSSLint front end/UI very nice but less to offer functionality wise. – The One and Only ChemistryBlob Aug 07 '17 at 00:00
  • CSSBurner is awesome! Based on your answer, I test it. It found the duplicates in my file as well as locating places where LESS had cut off some of my directives. – Eric Hepperle - CodeSlayer2010 Mar 30 '18 at 19:33
  • CSSLint is great for linting but it doesn't find some of the more obvious mistakes like repeated classes, also appreas to be a little behind on new properties/values. – RozzA Jun 05 '19 at 20:28