: How can you identify duplicate CSS rules? I'm not talking about used/unused here. I have two stylesheets and some rules differ (either in selectors, rules or both) and some are exactly the same.

@Smith883

Just updated our tool, you can use it to remove the duplicates, then view the report to see the list of duplicate rules and properties:
rbtech.github.io/css-purge

Vote Up Vote Down

@Cofer257

Here is one possible solution:


Copy both files into a CSS code formatting tool e.g. www.codebeautifier.com/ Format it so each CSS ruleset is on one line, e.g. p { font-size: 13px }
Put the result into a sorting program, e.g. the sort command on Linux/Mac terminal. There are online tools that can do this too.


Now all the duplicated selectors should be next to each other. You should be able to combine them by hand pretty easily.

Also, don't forget that different ordering of CSS rules can have different results.

Vote Up Vote Down

@Tiffany637

If Diff tools aren't doing it for you I would recommend starting with a blank file and going through it manually. If your CSS is more than a few months old then it is likely out of date to all of the new stuff you have learned in the mean time; as Geoff mentioned going to LESS or similar will help with that. Also I am not sure a desktop style sheet is the best starting point for a mobile stylesheet, especially if you are not going responsive. Lots of people do say mobile first.

If this sounds more like opinion than answer, ask yourself if you would consider the fact that you have not been able to find software that does that (just like I couldn't either) as evidence that I might be right, at least in the popular vote sense of "right"

Vote Up Vote Down

@Barnes591

Wouldn't a diff tool work? I use Beyond Compare to show identical lines between two files. You can just copy them out.

Am not affiliated with Scooter software, just a content user.

Vote Up Vote Down