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...
For further actions, you may consider blocking this person and/or reporting abuse
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, 😉