ariya.io About Talks Articles

beauty and the beast

2 min read

Something that I’ve been working on as a side project is CSS Beautify, an open-source project from Sencha Labs. It has a simple purpose: reformat styles written in CSS to a certain guideline, primarily to make it easier to read.

An example given there is this raw style:

menu{color:red} navigation{background-color:#333}

which would be formatted as:

menu {
    color: red
}
 
navigation {
    background-color: #333
}

CSS Beautify is implemented entirely in JavaScript. The online demo is available at senchalabs.github.com/cssbeautify (Update: the new site for the demo is cssbeautify.com), feel free to play with it. For the command-line version, just wrap it with NodeJS, Rhino, WSH, or your favorite JavaScript runtime environment. If you like to use a 1 MB executable with no external dependency, get it from my other project: EightPack.

If you are in the business of web development, it is often unavoidable to get minified or compressed CSS, e.g. coming from a theme for your CMS. Using CSS Beautify, those cryptic styles can be analyzed better.

Furthermore, expressive CSS tools such as Sass or Less (or new the Closure Stylesheet) might produce CSS code in various format. In this case, CSS Beautify is handy to unify the style formatting.

Should you need to check in your style into the source control system, storing the formatted version is really beneficial since it facilitates easy comparison between different versions. You may always use minified styles for performance reason, but keep also the formatted versions in case debugging is needed.

If it’s not Baroque, don’t fix it!

Related posts:

♡ this article? Explore more articles and follow me Twitter.

Share this on Twitter Facebook