Thursday, April 9th, 2009
Souders: Don’t Use @import
Category: CSS, IE
, Performance
Web performance guru Steve Souders noted some time ago in his book that @import is harmful to web page rendering times, but today he elaborated on this claim in a longish blog post:
There are two ways to include a stylesheet in your web page. You can use the LINK tag:
<link rel=’stylesheet’ href=’a.css’>
Or you can use the @import rule:
<style>
@import url(‘a.css’);
</style>I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.
He shows that while always using @import by itself is actually okay, there are a number of scenarios where @import can jack you up:
- link mixed with @import breaks parallel downloads in IE
- using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
- LINK blocks @import embedded in other stylesheets in IE
- @import causes resources to be downloaded out-of-order in IE
His conclusion:
It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.
See the full blog post for fancy charts and more detail.
well! i never liked @import because of it’s odd syntax, vs. regular HTML tags, but now that I know there are other, more reasonable arguments for avoiding it, I can feel appropriately smug for avoiding it all these years!
Unless network latency isn’t a worry for you, there’s no reason to ever use @import at all anymore. It is always best, given the browser landscape, to stream all of your stylesheets into a single file, just as we’re all hopefully doing with our scripts as well.
I use YAHOO.util.StyleSheet, I don’t use link tags or @import. I used to use CSS.Loader which injected link tags into the DOM but that does not work after window.onload is called for the first time. Link tags are actually not that great of an option either for this reason.
http://developer.yahoo.com/yui/stylesheet/
@jhuni: Have I got the wrong end of the stick here? you use Javascript to load all your CSS? That sounds (pardon my bluntness) just silly…
One handy use of @import is for easing the addition or removal of styles from an entire website. For instance you link to a style sheet that @imports a bunch of other sheet. That way if you need to add or remove a style sheet yo don’t have to add the link reference to each page. This could also be done with server side includes, but for those without that ability @import can actually be very helpful.
RE: ‘sixtyseconds’ you use Javascript to load all your CSS? That sounds (pardon my bluntness) just silly
I never said I load all my CSS using JavaScript I was just saying that there isn’t only two options and this one is great for performance, besides that if your doing something that is really heavy in JavaScript (as I am) then I think Yahoo.util.StyleSheet is the best option available. I am recommending it to other people because it was a major help to me.
Although LINK works well, it must be noted that having multiple CSS files is a burden on any page request. By stitching your .css files into a single one — and compressing them for good measure — you can save on a few requests to the server.
Then again, you can hope on browser behavior and send the right HTTP headers. :)
I usually put all generic (overall) styles into one file, that is included on all subpages, and put subpage-specific styles into separate files and serve them when required.
The same goes to JS.
This way I don’t serve one big file, and don’t stress server with unnecessary requests.
Sometimes, when subpage-specific CSS/JS is not that big, then I put that in one file. But that is not always the case.
There is some use for @import as well, if for example you let people to use custom styles, and those people would like to separate their styles into different files, so that they would look clean – this works.
I think that there isn’t any perfect method for all purposes, you have to use what is best for what you are doing at the moment. Knowing what is best – that is important, and that article provided me with some additional knowledge, that I’m sure to use in future. Thanks :)
Another vote for loading css through javascript here. To get the initial page size down I’m loading in all scripts and stylesheets not necessary for the initial page view from script.
I shall amend my ways! Cheers Steve!
I’d recommend this article by Dave Hyatt which addresses perf impact and FOUC (Flash of unstyled content): http://webkit.org/blog/66/the-fouc-problem/
And the original FOUC post itself: http://bluerobot.com/web/css/fouc.asp/ This article was really influential in getting web-devs to stop using @import.
Cheers,
Nicole