CSS: @import vs. <link href = "">
Well, I heard a million ways to optimize the website loading speed: the less HTTP requests, the better (why figurative sprites are born); Enter only JavaScript files that are needed on only one page. Use CSS for visual enhancements as much as possible, and then perhaps look at SVG graphics (although this is still a controversial issue) ; Compress your CSS and JavaScript files and HTML markup merge your scripts into one file (fewer HTTP requests again); gzip your assets; etc. etc.
But today I find this comment on the website:
"Because we care about the best web development practices, we no longer use the @import rules in our projects."
To clarify, my question is NOT about the difference between:
<link rel="stylesheet" href="file.css"> vs. <style type="text/css">@import url("styles.css");</style>
About the difference between adding this to your HTML document: <link rel="stylesheet" href="file.css"> and adding this @import url("styles.css") INSIDE to your main CSS file.
So what is the difference between loading CSS files from HTML from loading files from another CSS file?
I mean, HTTP requests will still be, they are just made from different places.
I read the article by Steve Souders not to use the @import article and the About.com article. What is the difference between @import and the CSS link? but they compare the methods mentioned above that I didn’t refer to, so it was not clear to me why not use @import .
By the way, I don't care if Netscape 4 or IE6 (thank god I can say it now) or IE7 and FOUC.
Thanks in advance.
The first article you quoted (Steve Souders "do not use @import") specifically addresses the case of @import inside a stylesheet imported via <link> - this is also bad for performance, since setting @import inside the <style> . This is actually a little worse: the browser must first get the associated stylesheet, then @import that stylesheet, then open the @import rule, and then retrieve the imported stylesheet.