@import or link for importing stylesheets?
I once read this article about performances and <link>
vs @import
: don’t use @import ; quoting a small portion of it :
use LINK instead of @import if you
want stylesheets to download in
parallel resulting in a faster page.
It's quite recent (April 2009), so should still be mostly true -- and written by Steve Souders, whose name is quite well-known when it comes to front-end performances.
On a more subjective point, I quite prefer using several <link>
from my main HTML file : this way, I am able to see in only a quick glance what css files are called -- either looking at the template file on the server, or looking at the generated HTML source on the client side.
Difference between @import and link in CSS
In theory, the only difference between them is that @import
is the CSS mechanism to include a style sheet and <link>
the HTML mechanism. However, browsers handle them differently, giving <link>
a clear advantage in terms of performance.
Steve Souders wrote an extensive blog post comparing the impact of both <link>
and @import
(and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.
Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link>
over @import
Also, using the <link>
tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import
.
Best way to include CSS? Why use @import?
From a page speed standpoint, @import
from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently. For instance, if stylesheet A contains the text:
@import url("stylesheetB.css");
then the download of the second stylesheet may not start until the first stylesheet has been downloaded. If, on the other hand, both stylesheets are referenced in <link>
elements in the main HTML page, both can be downloaded at the same time. If both stylesheets are always loaded together, it can also be helpful to simply combine them into a single file.
There are occasionally situations where @import
is appropriate, but they are generally the exception, not the rule.
@import vs link
Not much if anything has changed in the past year or two, and we're still dealing with a lot of the same browsers from then, so you should not change your practice.
<link>
is preferred in all cases over @import
, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.
You can see this in great detail here:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
So, while @import
may be convenient, that's all it offers. If you really want to take advantage of fast loading times, use the minimum number of stylesheets (probably one in most cases), write good CSS with efficient selectors (the usual stuff), minify it, and use a <link>
tag.
This was going to be a comment but it got too long:
Instead of @import
(I know it is very convenient), you should combine the files into one when your site goes live. You shouldn't be tweaking at that point anyways, and there are a number of tools to help minify it. Personally, using PHP, I have a config file where I define all the CSS files that are written to a separate CSS file (the one I will reference in the <link>
tag), then if the cached version is old (either determined manually or automatically), it combines/minifies them and writes the content to the "cache" file, and returns a timestamp query string to append to the CSS file name to force a fresh download.
If you are using PHP as well, I highly recommend cssmin, it can parse stylesheets for @import
and pull the content into one file, as well as handle all aspects of minification.
CSS: @import vs. link href=
The difference comes down to parallel downloading. @import
blocks parallel downloading. This means the browser will wait to import the imported file before downloading the next file.
Import css file from same non-root directory
As it is an @import, make sure it is placed at the very top of your main CSS document.
@import url("./nav.css");
@import url("./width.css");
Although you can do it, I would personally advise against it. Although it might seem to be more "sorted" it creates extra HTTP requests, which depending on the size of the project, may hurt your performance.
Is using @import declarations a bad practice?
I think you should use 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.
link
- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet.
import
- Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet.
The most common reason given for using @import instead is because older browsers didn't recognize @import, so you could hide styles from them.
This link will solve your all queries
What's the Difference Between @import and link for CSS?
Related Topics
Adding Custom CSS Tags to an Rmarkdown HTML Document
Css3 Animation Is Not Working in Ie11 But Works in Other Browsers
Can You CSS Blur Based on a Gradient Mask
How to Prevent Division When Using Variables Separated by a Slash in CSS Property Values
CSS - Circle Border with Various Colors
How to Hide Default Choose File Button
CSS Link Element Jumps on Hover
Multiple !Important Class Declarations and Precedence
Vertical Scrollbar Leads to Horizontal Scrollbar
Clipping or Chamfering Corners of Image to See Background
How to Set Custom Fonts in Javafx Scene Builder Using CSS
How to Apply Clippath to a Div with the Clippath Position Being Relative to the Div Position
Chrome Doesn't Honor Row Height If Rowspan Is Present
Css: Differencebetween "Bolder" and "Bold" Font-Weight Styles
Which Browsers Support Page Break Manipulation Using CSS and the Page-Break-Inside Element