We all must have used @import in our css files for importing one stylesheet to another. While working on large projects we often make use of imports to make use of same styles in different views.
The @import statement has some pros and cons related to it. Let's first discuss how the import works over using the <link> element in HTML file.
I personally prefer to use media over text to understand any concepts and like using them in my articles as well 😅
So let's try to understand the difference between using @import and <link> element to load CSS files followed by the pros and cons of @import statement.
Working of @import statement.
In the above example we can see that importing stylesheet into one another builds dependency graph. Due to this dependency tree the base css file which is homeview.css is downloaded first and then the dependent css files are downloaded which are button.css and form.css.
Working of <link> element.
When the stylesheets are loaded using link elements they are downloaded at the same time which can be used to combine them into single file.
We have covered the major difference between the two approaches now let's focus on the pros and cons of @import statement.
Pros of using CSS @import
Saves time in copy pasting the same code in every file or adding links approach.
Good for building medium to large organisational projects.
Create primary CSS file and then import other files like typography or images. This way of managing CSS files is simple yet effective and helps in maintaining good project structure.
Cons of using CSS @import
The only negative that comes with @import statement is increasing the page load time if not used during build process. As it goes and reads the imports and then applies them. Although the time difference is very small but can impact your search ranking where the bots use page loading time to calculate ranking.
I tried to cover all the major points which defines the flow and working of CSS @import statement in brief. 😊
Do let me know if I missed something 😉
Happy Learning! 👩💻
Top comments (15)
hello,
It depends on the amount of CSS you import.
@importwill trigger additional work.Using several
<link>is better, as the browser can download stylesheets in parallel. As a general rule, it's actually safer and easier than any use ofimport.Thanks for adding up!🙌
One use of @import is worth specially considering - its use with cascade layers. If you want to want to import a stylesheet into a layer, you can do
@import "button.css" layer(mylayer). This is not something you can currently do directly with the link element.To avoid the delays involved in download chaining your stylesheets, you can use a data url to combine the benefits of the link element and @import. i.e. you can write this:
<link rel="stylesheet" href="data:text/css,@import "button.css" layer(mylayer)">Thanks for adding up!🙌
This comes down to a small detail that makes a big difference, I grappled with this for years:
dynamic assets Vs static in other words built Vs runtime.
The general consensus was that built ahead of time leads to a bundle which grants speed. Dynamicly loaded could be inefficient and in some cases impossible to cache.
The risk for performance is great where as a bundle is just one thing.
On the other hand, http2 and onwards are said to prefer smaller requests in greater number so then runtime import might be advantageous perhaps wrongly I'm imagining it like async parallel requests.
I think th CSS import implementation is notoriously slow and you should be wary of it none the less
There's a lot of FUD in this comment. "Could be inefficient", "some cases impossible to cache", "notoriously slow". In particular, on the notoriously slow point, a while back I went looking for the primary source of that, because frankly, I'm sceptical. I couldn't find anything beyond the point that Jasmin makes, that slowness is caused by the download chaining. Do you have any measured data to show that
@importis, in itself, slow?As for separate files versus server-side bundling, yes that's a long standing question without a single correct answer, since there's always a trade-off on one side or the other. Without measuring real world usage for each particular site, I doubt it's possible to know which approach works out best per site.
A fair and Excellent question, If I speak in absolutes people tend to ask me for data pertaining to my claim, claims I have hear or seen before. I am indeed a user of CSS imports and I have built a preference based on what I have seen. I'm out in the forest with family not really caring what I said. Look it up if you care ☺️
One problem, CSS imports can also import other stuff except files, like fonts.
Was wondering about this - especially if all you’re importing is fonts. I use the @import with Google fonts quite a bit. Other stylesheets I use the html links for.
What’s the consensus on the @import usage in this case?
It really depends, the @import statement does harm SEO a tiny bit, because it increases the load time. I would reccomend using the HTML link tag, but it's your choice!
Nice read! Don't forget that if you're using SASS, you should slowly migrate from @import to @use, since the first one is not recommended anymore.
Thanks for adding up!🙌
Wow! Thank you for sharing the pros and cons 👏 I feel I have a greater understanding of @import now.
Glad that you liked the post😊
I translated this article here to Brazilian Portuguese.
Thanks, 😉