CSS Minimizer

What is a good CSS Minimizer to use. I had one I had been using but it seems to have problems now.

I don’t typically minify my CSS as i re-use selectors in website builds to reduce the file size but a could site i found is http://www.minifycss.com/css-compressor/

Another good online one is Clean CSS which is based on [URL=“http://csstidy.sourceforge.net/”]CSSTidy which you could download and implement locally if you were so inclined. I quite like Clean CSS as it allows you to also “un-minify” CSS.

If you want a tool to use on the command line (so you could create a build script for example) then YUI Compressor is for you. (Added bonus is that the YUI Compressor can also minify your JS :))

Thanks for the input. Actually Clean CSS is what I was using and I misspoke earlier, the problem wasn’t with them. I have a gradient button I am using that uses the following code and for whatever reason, it wouldn’t minify. I only use it on one page so I stuck it in another file and just leave it non-minified. So I will probably keep doing that until I change it or find out why it won’t work.

And SgtLegend, could you expound on your reasoning a little bit. I don’t understand why re-using selectors in web site builds would stop you from minifying.

Thanks to both for the input. Very helpful.

#maincontent a.menubutton{
	background: rgb(224,238,252); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(224,238,252,1) 0%, rgba(162,207,246,1) 37%, rgba(141,195,243,1) 100%, rgba(177,214,247,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,238,252,1)), color-stop(37%,rgba(162,207,246,1)), color-stop(100%,rgba(141,195,243,1)), color-stop(100%,rgba(177,214,247,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(224,238,252,1) 0%,rgba(162,207,246,1) 37%,rgba(141,195,243,1) 100%,rgba(177,214,247,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(224,238,252,1) 0%,rgba(162,207,246,1) 37%,rgba(141,195,243,1) 100%,rgba(177,214,247,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(224,238,252,1) 0%,rgba(162,207,246,1) 37%,rgba(141,195,243,1) 100%,rgba(177,214,247,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(224,238,252,1) 0%,rgba(162,207,246,1) 37%,rgba(141,195,243,1) 100%,rgba(177,214,247,1) 100%) /* W3C */

Basically what i mean is rather then creating 2 selectors that share the same font color i will group them together which saves on the amount of code in the file and reduces the file size, for instance the only time i will minify a file is when it gets to around 100kb and anything below that can be loaded within 100ms or so.

I don’t prefer using CSS minifiers as it makes it harder to manage the code in the long run and CSS files should never get past 100kb/s in size anyway as a browser and the users connection can both handle 100kb/s < with no trouble at all when they are no minified.

Very interesting. Thanks for the tip. For now I may stay with it just because I tend to leave a lot of commented out code for reference, etc. and if nothing else it cleans it up. And the 100kb comment is very interesting and I will definitely keep that in mind for CSS as well as js.

I know some argue that faster is better but sometimes that faster takes you longer to do and that’s not better. So this gives some break point or at least an indication of one.

Thanks again.

Ok, I did a little comparison of a CSS Tidy parser and the YUI minifier to show you why this happens :slight_smile:

In basic terms, the CSS Tidy parser sees an unknown value for a property and discards it. While it will keep -vendor-prefixed properties, it zeroes -vendor-prefixed values.


While I agree that doing all this minification can add time to your development, and for small sites with low traffic it’s often something that has questionable gain. Though when talking about a large site with high traffic (and lots of visitors on mobile) it quickly becomes beneficial to minify your code.

There are of course ways to do this in a non-painful manner. If you are lucky enough to work in an environment with source control and a continuous integration server, it’s a simple matter of creating some build scripts that do this for you. Even the manual implementation of this isn’t too onerous. If you’d like an excellent example of this, take a look at the HTML5 Boilerplate which has a [URL=“https://github.com/h5bp/html5-boilerplate/tree/master/build”]“build” folder included. In this you’ll find an Ant build script and several tools that will take all your site’s files and pass them though the appropriate minifier.

Of course if you want to only minify your JS and CSS and just want to do it manually, YUI Compressor’s command line app will do it as well:

java -jar yuicompressor-2.4.5.jar styles.css -o styles-min.css

As a rule of thumb, minimizers are used by two groups – people who have fat bloated pointless CSS, and bad coders trying to hide how bad their code is… Well, I guess that’s really just one group.

To me, it’s a sleazy shortcut used to cover up or make up for one’s ineptitude.

But then the largest CSS for a site I’ve ever had was 48k, and that’s an entire forum template… most of the time what people blow 100k of CSS on is what I’d be doing with 10k in the first place.

Thanks for the input. Very interesting and certainly has me re-thinking my approach. Right now my whole css file is 51k but with some cleanup that will be reduced and it would be much easier not to worry about minimizing. Appreciate the help.

yep, everyone who minimizes CSS is totally inadequate… w/e. So within the last year how many medium to large scale web applications have you built?

What about embedding images in style sheets to reduce the effects of latency on mobile devices.

Because increasing the size of an image file by converting it to base64 – what should be the largest files on a website – is SO worth the time of one handshake… Especially since it doesn’t even work in IE7 and lower. That’s a brilliant battle plan right there – NOT. Nothing like making the image 33 to 200% larger (depending on it’s contents) all to save 150ms to 1000ms handshaking… uhm… I’m SO certain people on metered data plans for mobile are right there behind that idea.

Especially since CSS minification ain’t gonna do Jack to the base64 encoded part of a file… since in CSS “minification” is pretty much nothing more than white-space stripping. Seriously? What’s a CSS minifier going to do to:

top left no-repeat;

ABSOLUTELY NOTHING, that’s what. (actually, not true… a good one would turn “top” and “left” to zeros to save 6 bytes… something you could just type in the first place if going to piddle around over silliness like that)

Disagree. While I’m not saying my stylesheets don’t ever bloat out, stuff like that just happens over the lifetime of a website sometimes, minification isn’t about hiding crappy code, it’s about getting every ounce of performance out of your web applications. It also allows you to write multiple stylesheets and/or javascript and combine them in your build script, encouraging a more modular approach.

If we take a 20kb stylesheet and it gets minified down to 15kb. While 5k certainly doesn’t make a lot of absolute difference, the savings of bandwidth on high traffic websites runs in the gigabytes and mobile visitors who are often on slow 3g networks, will have 2 seconds less loading time.

Don’t forget the comments, zero-values and colour values that get optimized (though to be honest I write “0” and not “0px” for 0 values myself and normally write colours in their short hex form when possible anyway).

Now, we could just gzip everything; best “minification” ever :wink:

If I could, I would like the previous post.

I wrote this a while back but I’ve never actually used it in the wild yet: http://www.sitepoint.com/forums/showthread.php?662602-Variables-in-CSS-(very-easy-to-implement-in-MVC)&p=4524618&viewfull=1#post4524618

Basically, it allows you to write the CSS file readably, as you normally would, and the response filter strips the extra white space and unnecessary characters and caches it before serving it. Saves a few kb here and there.

It’s old and needs to be updated and a few features added.

Updated to an MVC3 project here: http://imaginekitty.com/programmingExamples/CSSControl3.zip (not suggested for production use until tested; I’m just proposing an alternative idea.).

edit - now with working link. Server is case sensitive. :stuck_out_tongue: