How to check for duplicate CSS rules?

css duplicates redundancy
Alkshendra picture Alkshendra · Aug 15, 2014 · Viewed 54.8k times · Source

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

Akshay Vijay Jain picture Akshay Vijay Jain · Jan 11, 2016

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

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More