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 because 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.
Share
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.