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
You need to be a member of TechHui to add comments!
Join TechHui