7

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.

So I'm looking for a way to extract and move those rules, which are the same in both files, into a third stylesheet.

In other words: an intersection of two stylesheets. Strangely, I couldn't find a software for this. Would have expected this to be a more common problem.

Background, for those who care: I'm converting a desktop website into a mobile one and I've started by duplicating the desktop stylesheet and changing it (throwing stuff out, adding to it).

Improve this question
4
  • 1
    I'm not sure on a particular piece of software that will do exactly as you describe but if you were to convert to LESS and consolidate all into one stylesheet and minify at the same time (which of course has additional benefits anyway), it would automatically get rid of any duplicates.
    – zigojacko
    Commented Nov 12, 2013 at 9:23
  • Duplicate rules are expected, unless you mean duplicate ID's (#) and classes (.)
    – Simon Hayter
    Commented Nov 12, 2013 at 10:39
  • @bybe: but it becomes a mess to maintain, if you just keep piling stuff on top of each other.
    – DanMan
    Commented Nov 12, 2013 at 11:01
  • 1
    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
    – AEQ
    Commented Nov 13, 2017 at 7:38

4 Answers 4

Reset to default
2

Here is one possible solution:

  1. Copy both files into a CSS code formatting tool e.g. http://www.codebeautifier.com/
  2. Format it so each CSS ruleset is on one line, e.g. p { font-size: 13px }
  3. 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.

Improve this answer
2
1

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:

http://rbtech.github.io/css-purge

Improve this answer
0

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.

Improve this answer
2
  • Only in a crude way. Problem here is that it doesn't compare whole blocks (selectors AND rules as a whole). Also can't cope with bigger re-arrangements or blocks.
    – DanMan
    Commented Nov 12, 2013 at 10:59
  • Valid point. That requires manual work, or writing a specialized plugin.
    – pritaeas
    Commented Nov 12, 2013 at 13:03
0

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"

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.