Remove duplicate CSS declarations across multiple files

Question

I'm looking to remove duplicate CSS declarations from a number of files to make implementing changes easier. Is there a tool that can help me do that?

Right now I'm faced with something like this:

styles.css
#content {
width:800px;
height:1000px;
background: green;
}

styles.game.css
#content {
width:800px;
height:1000px;
background: blue;
}

And I want this:

styles.css
#content {
width:800px;
height:1000px;
background: green;
}

styles.game.css
#content {
background: blue;
}

The total number of lines across all files is well over 10k, so techniques that rely on manual editing aren't an option.

score 13 · Answer 1 · answered Apr 22 '13 at 20:09

13

I wrote a tool specifically for this purpose called csscss. As a bonus it also integrates with Sass and LESS. Give it a shot and let me know if you have an issues in github.

answered Apr 22 '13 at 20:09

Zach Moazeni

375
2
5

4

Looks really neat, but it doesn't seem to support automatic removal of duplicates and multiple files. – kotekzot Apr 22 '13 at 20:38
3

No, that is on purpose. There are many ways for a developer to refactor their css. And I believe automatic removal makes it harder to debug problems in the styles, after the fact. – Zach Moazeni Apr 23 '13 at 12:15
22

That's what options are for. – kotekzot Apr 23 '13 at 12:18
I love that there are versions for both gulp and grunt! https://www.npmjs.com/package/grunt-csscss – Drkawashima Sep 13 '17 at 18:54

score 9 · Answer 2 · edited Apr 25 '23 at 08:00

9

helped me to clean up selectors - CSS usage - Firebug extension to view which CSS rules are actually used.

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

http://web.archive.org/web/20120127123107

edited Apr 25 '23 at 08:00

Jan

2,178
3
14
26

answered Mar 11 '12 at 16:44

Praveen Vijayan

6,521
2
29
28

score 7 · Answer 3 · answered Apr 05 '13 at 23:46

7

I made a nodejs tool to help with this, it currently handles single files but lemme know if it helps or of any improvements, feel free to fork it and take it to another level too :)

https://npmjs.org/package/css-purge

https://github.com/rbtech/css-purge

answered Apr 05 '13 at 23:46

AEQ

1,339
1
16
20

Our latest version does this and more! http://rbtech.github.io/css-purge – AEQ Nov 18 '17 at 20:37
Seems like it doesn't remove duplicates? – Kalpesh Singh Oct 15 '19 at 07:22
@KalpeshSingh please provide your sample CSS and how you used it: https://github.com/rbtech/css-purge/issues – AEQ Oct 16 '19 at 11:49

score 3 · Answer 4 · edited Apr 25 '23 at 08:05

3

This system claim to do that: http://sourceforge.net/projects/cssmerge/?source=dlp

But I couldn't make it work, though.

So here it goes some tools to compare the CSS files. It is not as fast as an automatic solution, but would make it faster than going by visual comparison alone.

http://www.diffchecker.com/

http://www.araxis.com/merge_mac/index.html

(csscompare.codeplex.com) -> https://github.com/bertjohnson/CSSCompare

edited Apr 25 '23 at 08:05

Jan

2,178
3
14
26

answered Mar 12 '13 at 20:44

Fabio Nolasco

7,122
6
35
32

Facing a similar issue as @kotekzot, I used CSScompare. Worked like a charm! Thank you. – daan_tallguys Apr 10 '13 at 08:05

score 2 · Answer 5 · edited Apr 25 '23 at 08:09

2

You can use W3C CSS validator to remove the duplicates of the properties. Upload the css file by clicking By file upload and click on check, then go to warnings part where you can see the duplicate properties repeated. Then you can remove your duplications by going to specific line in the file.

URL: jigsaw.w3.org/css-validator

edited Apr 25 '23 at 08:09

Jan

2,178
3
14
26

answered Mar 22 '12 at 10:24

harshakasireddy

322
1
2
13

Doesn't seem to work. I get a few warnings about background and text colors being the same, but no warning about duplicate declarations. – kotekzot Mar 30 '12 at 06:47

Connor · Answer 6 · 2012-03-11T16:24:54.583

0

Probably the closest thing to what you're looking for is a css preprocessor and css imports. I like LESS: http://lesscss.org/

I would do something like

styles.css
@site-width: 800px;
@site-height: 1000px;

#content {
width: @site-width;
height: @site-height;
background: green;
}


styles.game.css
@import url("style.css");

#content {
width: @site-width;
height: @site-height;
background: blue;
}

EDIT: I sort of overlooked that you don't even need LESS at all, or the height and width in styles.game.css

It would just look like

styles.game.css
@import url("style.css");

#content {
background: blue;
}

edited Mar 11 '12 at 16:24

answered Mar 11 '12 at 16:13

Connor

1,024
4
16
24

An interesting solution, but in the end I would still have to deal with duplicate declarations when editing CSS, and the total number of lines in those files is well over 10k, editing them by hand is not feasible. – kotekzot Mar 11 '12 at 16:18
RE: edit, is there a way to arrive at that state without editing all the files by hand? – kotekzot Mar 11 '12 at 16:22
Not that I know of... from what you've said, it sounds like a lot of Find & Replace – Connor Mar 11 '12 at 16:26

Remove duplicate CSS declarations across multiple files

6 Answers6

Linked

Related