The practice of “Modular CSS” has been in vogue lately as a way to better organize and repurpose styles. But there’s one downside often left out of the discussion: modular CSS means more CSS files, and that means more HTTP requests. And as Yahoo!’s Developer Network states, reducing HTTP requests is one of the best ways to speed up your website.
For example, let’s say we’ve got our styles separated into three parts as is often recommended: layout.css, typography.css and color.css. We also want to serve nice alternate styles for when the page is printed, so we’ll include print.css, and lastly, as is another current best practice, let’s separate our IE hacks into ie.css and include it with a conditional comment. That’s five HTTP requests, and the average time for each request is about 0.2 seconds, so this means the user will spend a full second just loading the CSS. This can get even higher when using a CSS framework like Blueprint.
So, it’s up to the developer to determine if the benefits of modular CSS are worth the increased page load time. There are definite benefits to keeping code modules around for development, as re-using existing code means not having to spend time reinventing the wheel. That’s all well and good. However, when a site is ready to go live, it would seem best in my opinion to combine all the necessary styles into one file and serve that.
The “Net” tab in Firebug and the Lori Firefox add-on are both great ways of monitoring HTTP requests.
One Response to “One warning about modular CSS”
Nov 7th, 2007
Both YUI and Blueprint developers suggest the use of a combined and compressed single file version of the CSS file. So in fact you theoretically could have only one css file and one request. That being said you still may need to have a conditional style for IE versions but otherwise you would not need to worry.
Cheers, Jay