@import considered harmful
For CSS, Jon begins with a basic file that tidies up fonts and spacing but doesn’t do any layout. Now he @imports a reset stylesheet and a typography stylesheet and a layout stylesheet.
According to Yahoo!’s recently released 20 additional high performance rules, it is actually preferable to use
<link> elements rather than
@import. The reason given is that when a browser encounters an
@import directive, it has the same effect as a
<script> tag—it stops doing anything else until that file has been downloaded. (Which is why we now put scripts at the bottom of our pages.)
Of course, that means that if you prefer to create separate stylesheets for your layout, typography, colours, and so on, you either have to link to them all separately (also a performance no-no due to the additional HTTP requests needed), or combine them all into a single unwieldy stylesheet.
The solution is to implement another step into your deployment process, and concatenate all your separate CSS files into one single file when it is released to the live site. You could either do this manually every time (yawn); write a simple script to do this; or there are server-side scripts online that allow you to point to a dynamic PHP script that combines the stylesheets on the fly.
Filed under: CSS.
Previously: Web Standards: Semantic or Pragmatic?
Next: Internet semi-famous