CSS Formatting Woes


As much as I like to save some bandwidth here and there, going in to edit a stylesheet where each rule is on its own line can be a nightmare. I went in search of some CSS formatting tools to make life a little easier. (Because who wants to reformat 4000 lines of CSS by hand, right?).

Validness

It’s always a good idea to try and keep your CSS as valid as possible. On occasion you might need to put some hacks in there for IE6 or IE7 – if there are many, it’s probably a good idea to separate those out to stylesheets that are then loaded in with conditional comments.

To validate your CSS, head over to http://jigsaw.w3.org/css-validator/ – there you can point to a stylesheet URL, upload a file, or directly input CSS and have it validated.

Formatting

To format CSS you can use the “Clean CSS” service at http://www.cleancss.com/.

Input the CSS you want to format and choose from several options, hit submit, and voilà, out comes formatted CSS – it also lets you know the code changes that it made.

The options

From the dropdown select the type of formatting you want. For a production output you should probably choose “High (moderate readability, smaller size)”, if you want to make CSS more readable, use the “Low (higher readability)” option.

Unless you know what you’re doing – you should probably leave “Sort selectors” and “sort properties” unchecked, as these have the potential to break the cascade of styles in your stylesheet.

I personally prefer to keep the “Compress font-weight” option unchecked – (e.g. this changes font-weight:bold; to font-weight:700; doesn’t quite read the same).

DiggTwitterSlashdotFacebookShare

, ,

  1. #1 by Peter Shalson on November 11, 2010 - 21:14

    thanks , nice tools , save lots of times too . I was wondering if you can find some JS tools as well , I couldn’t find any good tools on google.

  2. #2 by allermand on February 15, 2011 - 07:51

    Tried Clean CSS but ran away very fast.. I believe its buggy and should be used with caution and/or strong monocle..

    Example: @media screen and max-width 38.75em

    Becomes: @media screen and max-width 3875em

    Not quite the same output =)

Comments are closed.


Warning: Missing argument 2 for wpdb::prepare(), called in /home/after/domains/blog.geekyjohn.com/wp-content/plugins/wp-facebookconnect/fbconnect.php on line 656 and defined in /home/after/domains/blog.geekyjohn.com/wp-includes/wp-db.php on line 992

Warning: Invalid argument supplied for foreach() in /home/after/domains/blog.geekyjohn.com/wp-content/plugins/wp-facebookconnect/fbconnect.php on line 676