42

I have a couple CSS files with overlapping CSS selectors that I'd like to programmatically merge (as in not just appending one file to the end of the other). Is there any tool to do this online? or a Firefox extension perhaps?

M. Dave Auayan
  • 697
  • 1
  • 6
  • 8
  • See:https://stackoverflow.com/questions/38798858/how-to-merge-and-clean-2-css-files-with-overlapping-selectors-properties – Keno Jun 16 '17 at 17:55

3 Answers3

22

I found Factor CSS - complete with source code, but I think it does way more than I'd need. I really just want to combine CSS blocks that have the same selectors. I'll check out the source code and see if it can be converted to something usable as a TextMate bundle. That is, unless someone else manages to get to it before me.

EDIT: Even better - here's a list of web-based tools for checking/formatting/optimizing css.

M. Dave Auayan
  • 697
  • 1
  • 6
  • 8
  • 1
    The [combine utility](http://iceyboard.no-ip.org/projects/css_compressor/combine) was exactly what I was looking for - thanks! – daGUY May 09 '12 at 13:56
  • 1
    Maximum execution time of 30 seconds make it quite useless for me... – M.Svrcek Jul 23 '14 at 06:53
2

No I wish there was but the programming effort seems too much since there are multiple ways to reference a single element. The best that you can do is use a runtime like FireBug to find duplicates.

Nick Berardi
  • 54,393
  • 15
  • 113
  • 135
1

I wrote a Perl utility to do this several years ago.

As well as merging one or more stylesheets into a single coherent sorted output (complete with comments to show which file(s) each property appeared in, and warnings when a property has conflicting values), you can also selectively search or merge based on the selector, the property or both.

These are handled intelligently so that, for example, if you search for the property font you also get font-size, font-weight etc (still presented inside CSS blocks with the relevant selectors that they were taken from). Likewise, selector searching tries to Do The Right (ie generally most useful) Thing. If you search for, say, the element a, it will match any block whose selector is a, a:hover, a.extlink, a#mylink, .foo a, #bar a, p a, pre > a, a + p, a img... (the last two don't directly affect the styling of the a itself but of an adjacent or descendent element, which it is often useful to know about in such a search), without matching #a, .a, etc. Of course this behaviour is optional, you can also search for an exact selector. Or a regex.

Apart from perl itself the only dependency is CSS::Tiny

It's free software, and you can get it here: cssmerge

Ben23
  • 11
  • 1