Minify CSS – Shrink your CSS down to size

I know there are probably many services offering it already out there, and it’s not too hard to run right in TextMate, but I haven’t been able to find it in 30 seconds of Googling (well, I couldn’t at work, but I’ve since found this… Oh well!), so I set up a quick script to do it for me:

http://dom.hastin.gs/files/minifycss/

If it’s useful, I might set up a memorable URL, let me know in the comments 🙂

I did set up syntax highlighting, using codemirror, which looked pretty nice, but made the minification (on large-ish files) take far too long. I haven’t really tested on any huge files, so try this at your own risk, but it seems faster that TextMate was.

8 Replies to “Minify CSS – Shrink your CSS down to size”

  1. You’re script works just fine. Thank you!
    However, I did notice that it doesn’t fix contiguous semi-colons that exist after the last declaration in a declaration block. If there are two or more semi-colons, they’ll appear in the output.

    1. Hi Dave,

      Thanks for dropping by! Well noticed! I didn’t even think about catering for that, mostly assuming perfectly rendered CSS! As I’ve commented in response to vijayant, I think that there are far superior solutions that exist to reliably compress CSS files, YUI being one of the most widely used, however if I do decide to update this, I’ll ensure to check for multiple semi-colons!

      Thanks!

    1. Hi there!

      I’m glad you’ve found this to be useful, however I think there are a few bugs in there that need to be ironed out!

      For JS, there’s a great utility at: http://yui.2clics.net/ that uses the YUI compressor, which is the best for JS.

      I haven’t tried it, but you may even be able to compress CSS that way.

      Hope that helps!

    2. There are many useful tools for shrinking JS file size, eg.

      Shrinksafe,
      JSMin

      I wrote my own PHP script that allows you to use many JS seperated files in development, but only one is sent to user. It looks like this (look at the code. Post is in polish so you might not understand. Code is writen in english):

      [in polish] http://www.yarpo.pl/2011/04/15/zmniejszenie-liczby-requestow-dla-plikow-js/

      <script src="script.php?files=file_1,file_2" type="text/javascript"></script>

      script.php is PHP script which uses JSMin to provide shrink and merged JS files.

    1. Hi Tak,

      Thanks for commenting! Yeah, it’s an issue I’ve noticed, I need to rewrite it really. I’m actually thinking of building the advanced rule combinations into a post-processor for an implementation of SaSS. Shrinking down colours and multiple declarations where possible.

      I’ll be sure to update this post when I do.

      In the meantime there are some existing tools that minify rules and won’t break colour names in words:

      http://www.csscompressor.com/
      http://www.minifycss.com/css-compressor/

      Hope that helps!

      Thanks,

      Dom

Leave a Reply to Dave Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.