@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
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!