292

Any recommendations for a CSS minifier?

I’ll be rooting around Google and trying some out, but I suspected that the smart, proficient and curiously handsome StackOverflow community might have already evaluated the pros and cons of the heavyweights.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 5
    See http://stackoverflow.com/questions/702907/what-are-some-good-css-and-js-minimizers-for-production-code – Julien Apr 24 '09 at 22:39
  • 20
    Busted. I’ve been reading ‘How to Make Friends and Influence People’. *Not closely enough though*. – Paul D. Waite Apr 24 '09 at 22:41
  • 17
    You guys are all weird. We ARE smart, proficient and curiously handsome. – Chuck Le Butt Jun 15 '10 at 10:02
  • 1
    I prefer to be called "evil". – Mateen Ulhaq Mar 24 '11 at 05:20
  • 2
    See also: http://stackoverflow.com/q/65491/85414 – mahalie Mar 24 '11 at 23:29
  • 1
    Check out the **7 steps solution** described here http://stackoverflow.com/a/11624173/863980 – vulcan raven Jul 27 '12 at 10:14
  • Not constructive, but 200 upvotes and 47,000 views! BOOYAH! – Paul D. Waite Jul 18 '13 at 21:51
  • (That said, having just listened to [the big closing questions episode of the Stack Exchange podcast](http://blog.stackoverflow.com/2013/07/podcast-50-listen-to-this-podcast/), this question isn’t a good fit for Stack Exchange.) – Paul D. Waite Jul 26 '13 at 10:20
  • 1
    I don't understand the overzealous use of "closed as not constructive" on SO. This is a completely reasonable question, and would be objective and suitable for discussion here with just a few small edits. – Mark E. Haase Aug 15 '13 at 19:48
  • @mehaase: I disagree with you that this is a reasonable question. For one, Stack Exchange sites aren't designed for discussion - they're designed for questions and answers. General recommendation/list questions like this are problematic because they're not really answerable - to continue being accurate and avoid being misleading after they're asked, they'd have to be continuously maintained, which the Stack Exchange model doesn't support particularly well. – Paul D. Waite Aug 16 '13 at 09:22
  • @PaulD.Waite "Aren't designed for discussion." I don't think this is a discussion. "They're designed for Q&A". OK, this is a question, and it has answers. How is that not Q&A? "...to continue being accurate" Every question on this site will eventually become inaccurate; technology changes quickly. We seem to handle change pretty well. If the question was edited to read, "What CSS minifier runs on $PLATFORM and meets $TECHNICAL_OBJECTIVES," then it would become a more factual question that elicits more objective answers. So, let's fix it up! – Mark E. Haase Aug 16 '13 at 14:49
  • @mehaase: ah yes - you said 'This is a completely reasonable question, and would be objective and *suitable for discussion here*' (emphasis mine). I was querying that. 'If the question was edited to read, "What CSS minifier runs on $PLATFORM and meets $TECHNICAL_OBJECTIVES," then it would become a more factual question... So, let's fix it up!' - Please do. I didn't have any technical objectives in mind when I wrote it. I just wanted to know what everyone else uses, which led to it being a bad question. I still don't have any technical objectives in mind, so I can't add them. – Paul D. Waite Aug 16 '13 at 15:33
  • 3
    +1 just for understanding the 'changing nature' of things around here, and understanding and explaining the reasoning for closing questions like this - even though it's yours! ;) – Andrew Barber Aug 30 '13 at 14:35
  • I'd look at a [current comparison](https://github.com/GoalSmashers/css-minification-benchmark) of CSS minifiers. – wedi May 29 '17 at 00:43

21 Answers21

98

The YUI Compressor is fantastic. It works on JavaScript and CSS. Check it out.

j08691
  • 204,283
  • 31
  • 260
  • 272
Buddy
  • 6,603
  • 1
  • 21
  • 16
  • 4
    Adding onto this, here is a Makefile which will download the YUI Compressor, pack your files, and minify them. http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile – balupton Jul 26 '10 at 15:39
  • http://www.refresh-sf.com/yui/#output – Junior Mayhé Dec 16 '11 at 13:48
  • @JuniorMayhé I used it and my styles got completely messed up though I had checked "Minify only, no symbol obfuscation." option)... sadly every minifier I try always breaks my styles. Is it because online minifiers are all crap? It shouldn't be that way. – dialex Aug 12 '12 at 14:42
  • 1
    @DiAlex I understand many of them messes with our code, we must use them carefully, always choosing a "conservative" approach and not the aggressive re-factoring. A conservative would be only removing unnecessary spaces, trailing semicolons, duplicate styles, and so on. I think a style could be damaged easily by these minifiers if we use some css hacks inside css code. Backslashes and wierd symbols could drive compressor crazy. – Junior Mayhé Aug 12 '12 at 18:49
  • You can try online service http://www.zbugs.com - it uses yui compressor to minify your files. – Tamik Soziev Oct 19 '12 at 01:41
  • @Buddy, it looks like page you have shared is no longer available. Or the project is closed by Yahoo. – Prakash Dayaramani Apr 03 '18 at 11:10
45

There's also a .NET port of YUI Compressor which allows you to:-

  • intergrate the minification/file combining into Visual Studio post-build events
  • intergrate into a TFS Build (including CI)
  • if you wish to just use the dll's in your own code (eg. on the fly minification).

UPDATE 2011: And it's now available via NuGet also :)

Pure.Krome
  • 84,693
  • 113
  • 396
  • 647
  • I'm a little confused. YUI Compressor is [deprecated](http://www.yuiblog.com/blog/2012/10/16/state-of-yui-compressor/) in favor of [UglifyJS](https://github.com/mishoo/UglifyJS2) ([demo](http://js-minify.online-domain-tools.com/run/?inputType=text&beautify=0&mangle=1&mangleReservedWords=myLastName&text=var+hello+%3D+function%28myFirstName%2C+myLastName%29+%7B%0A++alert%28%22Hello+%22+%2B+myFirstName+%2B+%27+%27+%2B+myLastName%29%3B%0A%7D%3B%0Ahello%28%22John%22%2C+%22Smith%22%29%3B)). Does it make a sense to work on a .NET port? – MartyIX Nov 29 '14 at 10:45
  • Mate. I started that port in 2008 or so. That's 6 odd years ago. I also posted this answer in '09. So please check the dates and get some context before you ask silly q's. Now, go outside and play for a wee bit :) – Pure.Krome Nov 29 '14 at 14:01
  • Pure.Krome: I beg to differ. I have looked at the GitHub repo and it is a few months old and the commits are from this year. That's why I asked. "Mate". – MartyIX Nov 29 '14 at 15:32
  • :slow clap: well spotted! you're actually righ--- oh. Wait. I started the proj on codeplex: http://yuicompressor.codeplex.com/. First commit July 7 2008 (http://yuicompressor.codeplex.com/SourceControl/changeset/b437de1e033c2703adbed8433e3bd5b4f630e126). Then moved it to GH _this year_. I've not done any work on porting it for a.long.time. There's only been a few odd bug fixes here and there. So. Dude. I port*ED* it. Not port*ing* it. It's in maintenance mode. Q.E.D. – Pure.Krome Nov 30 '14 at 05:02
  • 1
    You too :) And cheers for the link to UglifyJS - that was something i've been meaning to check out to see if we can use it at work - and you've just reminded us about it! cheers :) – Pure.Krome Nov 30 '14 at 12:15
19

I like Minify. In PHP and works with CSS or JavaScript.

artlung
  • 33,305
  • 16
  • 69
  • 121
  • 2
    +1 for Minify. If you are familiar with PHP already you may be more comfortable installing it. Requires PHP5. Once you set it up you can forget about it, work as normal on as many super white-spaced and commented css or js files as you want and minify will compress them on the fly. – mahalie Mar 24 '11 at 23:32
14

CSSO is currently best minifier/optimizer.

Undo
  • 25,519
  • 37
  • 106
  • 129
silent
  • 3,843
  • 23
  • 29
  • 2
    Dunno about “the best”, but worth a look. – Paul D. Waite Oct 04 '11 at 09:39
  • Just try it and you'll find it is the best. There is no analogs for its minification technics for this moment as I know. – silent Oct 17 '11 at 20:12
  • 1
    alrighty, I’ve compared CSSO to YUI Compressor on a 30 KB test file, and after gzipping the compressed output of both tools, CSSO wins, having compressed the file by an extra 7 bytes. That’s just one test file though of course. – Paul D. Waite Oct 17 '11 at 21:52
  • reduce CSS online with CSSO: http://css.github.io/csso/csso.html – tomByrer Dec 17 '13 at 14:45
  • At least it's one of the two recommended by [Google PageSpeed Insights](https://developers.google.com/speed/docs/insights/MinifyResources). – TechAurelian Nov 08 '17 at 09:00
8

If you use Python I would recommend slimmer which is probably not as fast as YUI Compressor but unlike csscompressor.net it doesn't choke on CSS hacks.

I'm biased since I wrote slimmer and I'm currently evaluating YUI Compressor to see how it handles hacks. An example of slimmer in action can be seen if you view the source of crosstips.org

Bao Nam
  • 69
  • 4
Peter Bengtsson
  • 7,235
  • 8
  • 44
  • 53
6

If you are looking for an online tool, try this: https://csscompressor.net/

miguelSantirso
  • 1,243
  • 1
  • 12
  • 26
  • 1
    I wish I could down vote this answer (its already too late after i upvoted it). I'm trying to compress my css and it breaks things. That isn't good at all. Warning to everyone out there, my guess is that unless you have pristine standards compliant css, it might break your shit! – B T Sep 23 '10 at 02:24
  • 19
    But, *shouldn't* *you* have pristine, standards compliant CSS? – Chuck Le Butt Sep 23 '10 at 12:12
  • 2
    if you're using HTML5 boilerplate, nope. – SkaveRat Apr 17 '11 at 01:34
  • Nice tool. I've tested it on `html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}` and it did better job than YUI Compressor (which didn't eliminate duplicates for #test's padding). Still, both failed to satisfy me with `html,body{width:100%;height:100%}body{padding:0}` (which, in my understanding, is equivalent, as both selectors have same specificity). – drdaeman Jun 13 '11 at 00:45
  • CSS is the one thing where crappy hacks are sometimes acceptable. Some of those hacks use weird comment tricks that minifiction can break. – Brandon Sep 06 '11 at 07:54
  • I personally use [CompressCSS](https://compresscss.net/). It uses clean-css and very safe to use. – Vianne Sep 01 '17 at 17:00
6

Check out CSSTidy: http://csstidy.sourceforge.net/usage.php

And online at: http://cdburnerxp.se/cssparse/css_optimiser.php

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Murali Bala
  • 1,133
  • 2
  • 18
  • 28
4

I've written an ultra fast CSS minifier in C#. The algorithm does not handle Javascript though. Thy this: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx.

Kerido
  • 2,930
  • 2
  • 21
  • 34
  • Nice-looking option. One query though: you said “According to the CSS specification, two types of strings are supported: single-quoted and double-quoted. My algorithm leaves the string intact, even if whitespace characters are found inside it... I just think that keeping the string unmodified is more intuitive and professional.” Surely any space characters that don’t add meaning should be removed, to make the output file as small as possible? Isn’t that the point of minification? – Paul D. Waite Feb 08 '10 at 19:50
  • 3
    Well, in my opinion this is surely right in a general case. But I consider strings a special case. It is up to the developer of the original CSS whether or not to remove meaningless whitespace from strings. The algorithm I'm showing simply follows the specification keeping the string unmodified. – Kerido Feb 09 '10 at 08:47
4

Try closure-stylesheets.

Beside minification it also supports linting, RTL flipping, and class renaming.

It can also add variables, functions, conditionals, and mixins to CSS.

Also note that some of these features depend on rest of Closure Tools (which are very powerful on their own).

Andrzej Duś
  • 1,338
  • 1
  • 10
  • 16
3

If you're looking for something in PHP, here's the link:-

Fat-Free Minify

Although it's part of the PHP Fat-Free Framework, it can also be used stand-alone.

bcosca
  • 17,371
  • 5
  • 40
  • 51
3

I find that isnoop's CSS SuperScrub works very well. It can only handle direct links to CSS online though :/ You can get around that though by using your preferred pastebin service to hold the css code and just giving SuperScrub the raw link.

  • I've tried it on `#test { padding: 1em; width: 10em; } #test { padding: 2em; }` and it failed. – drdaeman Jun 13 '11 at 00:53
  • @drdaeman That's probably because it doesn't know what to do with conflicting/duplicate values for a given selector. Since I don't maintain SuperScrub, I can't tell you when or if that will be fixed. – John Michel Jun 15 '11 at 15:42
3

If your site is in ASP.NET, you can let your site do the CSS minification on the fly (so you don't have to do it manually each time you make a change). For example with this:

http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx

Katz
  • 31
  • 1
3

Still "in beta", but should work fairly well. I use the code behind it in every project: http://claudiu.phpfogapp.com/ It's built in PHP and also hosts your *.css file for a fairly large amount of time, surely enough to let you test your code with the minified css. (I would only delete old css files if the space gets crowded on the server).

Claudiu
  • 3,261
  • 1
  • 15
  • 27
3

Perl has CSS::Minifier (and an XS version for extra speed).

Ether
  • 53,118
  • 13
  • 86
  • 159
3

Others have mentioned YUI Compressor, then the .NET port of it, and I'll add another link to the chain. StyleManager is a server control which wraps up the .NET port of YUI Compressor so you can use it just like you're used to using ScriptManager. It adds a bunch of other nice features too, like CSS constants, tilde (~) resolution w/in your background-image definitions, etc etc. It's tight, well documented, and I've used it on all my recent projects w/o an issue. Check it out - gStyleManager.com

andrew
  • 76
  • 2
2

An online tool (much better than www.csscompressor.net which jacked my css up): http://www.cssdrive.com/compressor/compress.php does an excellent job.

Bao Nam
  • 69
  • 4
B T
  • 57,525
  • 34
  • 189
  • 207
2

There is a codeplex project that will plug in to .net websites that will minify and compress the CSS and the JS files. There is also a comparison between the Microsoft AJAX Minifier and the YUI Compressor which shows the YUI coming out slightly better. There is an extra variation which combines the Microsoft Minifier and compression which drastically srunk the file.

Anyway the link is http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers)

Jonathan Stanton
  • 2,531
  • 1
  • 28
  • 35
2

This is how I did it for MVC3: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html The beauty of this approach is that it does it all on the fly and you don't have to pre-process files manually or configure post-build.

m_kramar
  • 410
  • 4
  • 15
1

C# example:

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");
1

zbugs.com will be a good online tool for you, it will minify your css in a single click

Tamik Soziev
  • 14,307
  • 5
  • 43
  • 55
1

Have a peek at the latest HTML5BoilerPlate by Paul Irish - it contains a build script to minify all your assets (including PNG's and JPG's). You can see a demo video here.

Ben Hughes
  • 2,527
  • 1
  • 18
  • 16