TechHui

Hawaiʻi's Technology Community

Optimizing CSS with a simple Groovy script and CssTidy

Recently I've been working on a web project that requires quite an extensive CSS markup. Keeping it all in one file became unmanageable pretty quickly, so we've designed a way to split our styles into logical subdirectories with import statements, which is quite easily done with a css
@import tag. Here is an example of what a main file might look like:
@import 'common.css'; @import 'base.css'; @import 'reset.css'; @import 'widgets/buttons.css'; @import 'widgets/windows.css'; etc... The problem is, that now browser needs to fetch a number of Css files, which considerably slows down startup performance and impacts bandwidth/quota restrictions. Given this, we were inspired to find a viable way to compact our css rules into one highly-optimized file without loosing any of its integrity. We found a number of css optimizers available on online that will compact a stylesheet using a number of options. However, we could not find any that will inline nested css files into one master copy (maybe you know of any, in which case please post a link :) After a short research, we finally picked
CssTidy as the optimizer. It's been around for years, built in C++, has a number of handy options, and has a nice
online interface. The only problem was that it does not
inline css files. To solve inlining problem, we've built a simple Groovy script that handles this task very nicely. It takes a root css file, traverses into all import statements, inlines contents and outputs it all into another file. Then, using some Groovy magic, we take that file and execute CssTidy on it, finally producing desired effect of having one optimized css file. Here is a sample Groovy script that recursively traverses css tree appending contents into a StringBuilder

Here is how one can use Groovy AntBuilder to execute CssTidy on the inlined result

This simple technique has helped us manage our css hierarchy, saving web server quota and bandwidth for more useful and exciting applications :) Complete source code is attached for your consideration. Thank you for reading and Aloha!
Ikayzo - Design • Build • Localize | Web • Desktop • Mobile

Views: 807

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by Konstantin A Lukin on October 19, 2009 at 12:38pm
No problem. GWT also 'theoretically' offers a pretty robust mechanism for including JavaScript and CSS files into project distribution. Unfortunately, I've had problems using it with CSS files, hence had to find another solution which is the subject of this blog. This works pretty well, and creates a highly compact version of CSS directory tree.

Gwt incubator project is currently working on CssResource module, which will have support for a number of options, including runtime substitution, conditions, selector obfuscation, etc.. This tool aims to ease CSS development by making it more programmable.. more about it here:

http://code.google.com/docreader/#p=google-web-toolkit-incubator&am...
Comment by Laurence A. Lee on October 19, 2009 at 8:16am
This groovy-combination approach sounds similar to what Rails does with JavaScript and CSS files included within code-generated templates: http://technicalpickles.com/posts/some-tips-for-caching-javascript-...

While the TechnicalPickles article is rails-focused, the tips about TinyMCE not liking to be cached, and the tip about relative URLs in stylesheets are worth knowing about. :-)

Thanks for sharing source code -- it's always a treat to see how thought-leaders write code to get stuff done. :-)

Sponsors

web design, web development, localization

© 2024   Created by Daniel Leuck.   Powered by

Badges  |  Report an Issue  |  Terms of Service