CSS Formatter & Optimiser

By Alex Walker

Just a quick one.

I tend to use a couple of text editors depending on what I’m doing. jEdit is my current pick of the crop for ‘ ‘down’n’dirty’ texting (but how bad is the placement of that Download button?).

However I also tend to keep a couple of really small, fast-loading editors handy for making little changes, edits and mistakes as you spot them. EmEditor and Crimson Editor are great, but there are hundreds of them out there.

One of the main features I miss in those small editors is a good code formatter. I may have a solution now.

I’m not sure why it’s on the CDBurnerXP website, but this CSS Formatter and Optimiser is pretty handy. Cut and paste your code into the text box, select a setting between readability and compression, choose your sorting options and hit ‘Process CSS’. It even preserves my favorite ‘IE!important’ hack.

Looks promising.

  • Marc

    Is that something you need to do often, optimising your css?

    Can you give an idea of how much difference it makes to your projects?


  • Thirteenva

    I was recently looking for something like this. Though, I just ran it and am quite pleased to say that the most it was able to remove from any of my css files was 300 bytes and that seemed to be the result of it removing comments and compressing a few colors. So i guess my css files are fairly optimized even the larger one that is about 7 kb. Thanks for the link though, I plan to book mark it.

  • BaldPenguin

    Not to go too far off topic, but have anyone seen some sites that do the same with javascript. I would like to be able and compress both.

  • junjun

    How marginal is this though? You’d have to run a pretty high traffic website where bandwidth being a relative large factor in your costs to save money on it. For the user, I don’t see saving a few bytes making any significant difference either.. unless I’m missing the point here?

  • AlexW

    From my point of view, the compression isn’t really the key. If you already write your code using ‘shorthand properties’ (‘font’ rather than ‘font-style’, ‘font-family’, ‘font-weight’ etc), the compression afforded by removing whitespace and changing ‘white’ to ‘#fff’ is relatively marginal — even on a site like this.

    Formatting is another issue though. We are always adding, editing and deleting CSS. Some of it’s permanent, other stuff is temporary. Some is site-wide, other CSS is section-specific(blogs, category, forum etc) or page-specific.

    Keeping track of which rule is doing what is a challenge, so any tool that can beautify a huge chunk of CSS in 1 click just makes life easier. If it then happens to shave a byte or two, that’s a bonus.

    BaldPenguin: Memtronic have a really nice ‘FREEWARE HTML/JavaScript Cruncher-Compressor‘ that is definitely worth checking out. It’s quite configurable and I think even obfuscates your code. Just make sure your JS is standards-compliant and sound — in particular that each line finishes with a semi-colon, or it will fail.

  • Tim Bednar

    I have done this and found one problem. When optimizing, it uses short-hand for px measurements. IE sometimes will not render these, I recently had to go back and put all the px’s back and everything was fine.

  • AlexW

    Thanks Tim. What is shorthand for ‘px’ ?

  • Floele

    > I’m not sure why it’s on the CDBurnerXP website

    Well (it is a little late to reply but anyway), the creator of this script (that’s me) is a member of the CDBurnerXP development team. I didn’t have any other web-related homepage so I used this one. In the meantime I also created a n project though (CSSTidy).

    > Thanks Tim. What is shorthand for ‘px’ ?

    There is no shorthand for ‘px’. You can, however, remove the unit if the value is 0 (this is done by my script automatically). Some people also remove ‘px’ for other values (>0) but this is incorrect (in those cases my script adds ‘px’ again :) ).



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.