Techniques for Modular CSS

I want to start using modular CSS, but I'm having trouble figuring out the best way to implement it. I was thinking I could just use a bridging technique, where I have one in my HTML and then @import statements for each module. While I like the simplicity of that method, I'm concerned about the negative effects it has on performance, since the @import-ed stylesheets will download later and not necessarily in parallel. So I want to know if there are any other popular techniques for implementing modular CSS. I don't really want to do multiple tags be开发者_StackOverflowcause PageSpeed and Yslow complain about so many stylesheets (although I know it is actually more efficient than @import). Ideally I would like to combine the stylesheets into one on the server, so the browser only every requests one stylesheet.

Using server side includes to assemble your "modules" into one style sheet on the server side is definitely recommended here. So is having some sort of cache on the server so it doesn't have to do the assembly on every request. There are lots of technologies available for this but your message doesn't include anything about your software stack.

Check out the Compass CSS Framework. It supports modular CSS through mixins and makes CSS a lot more pleasant to work with in general by adding variables, arithmetic, and including style frameworks such as Blueprint.

Just be extremely careful how you do this. Caching is your friend, and if you opt to deliver purpose-delivered, server-side generated CSS pages, you'll lose the benefit of caching. It's the classic chicken and egg problem. Do you preload and cache all your CSS and take the hit up front, or custom load each page and incur a hit on every page change? Only you know what's best.

Don't go too overboard on this. I've worked in huge shops where a minor minification change resulted in a 5 gig/day improvement (with millions of uniques)...but most sites I've worked on wouldn't see much if any gain at all. If you've got time on your hands, go nuts. Otherwise, proportion your response based on the need. Those optimizers report on ideal conditions, and we all know that isn't the case in real life. Try runnig the optimizer on some major sites sometime (don't miss trying to validate them either) Makes for good web-geek fun.