DEV Community

Cover image for How does @import works in CSS? What is the pros and cons. πŸ€”

How does @import works in CSS? What is the pros and cons. πŸ€”

Jasmin Virdi on April 15, 2022

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 import...
Collapse
 
spo0q profile image
spO0q πŸ’ • Edited

hello,

Although the time difference is very small

It depends on the amount of CSS you import. @import will 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 of import.

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks for adding up!πŸ™Œ

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

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)">

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks for adding up!πŸ™Œ

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

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

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

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 @import is, 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.

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

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 ☺️

Collapse
 
acode123 profile image
acode123

One problem, CSS imports can also import other stuff except files, like fonts.

Collapse
 
fyrfli profile image
Camille

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?

Collapse
 
acode123 profile image
acode123

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!

Collapse
 
leomjaques profile image
leo πŸ‘¨πŸ»β€πŸ’»

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.

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks for adding up!πŸ™Œ

Collapse
 
lukeecart profile image
Luke Cartwright

Wow! Thank you for sharing the pros and cons πŸ‘ I feel I have a greater understanding of @import now.

Collapse
 
jasmin profile image
Jasmin Virdi

Glad that you liked the post😊

Collapse
 
dougsource profile image
doug-source

I translated this article here to Brazilian Portuguese.

Thanks, πŸ˜‰