Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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).

share|improve this question
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 Nov 12 '13 at 9:23
    
Duplicate rules are expected, unless you mean duplicate ID's (#) and classes (.) –  bybe Nov 12 '13 at 10:39
    
@bybe: but it becomes a mess to maintain, if you just keep piling stuff on top of each other. –  DanMan Nov 12 '13 at 11:01
add comment

3 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 Nov 12 '13 at 10:59
    
Valid point. That requires manual work, or writing a specialized plugin. –  pritaeas Nov 12 '13 at 13:03
add comment

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"

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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