DEV Community

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

Posted on

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

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.

css @import working

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.

link element working

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

  1. Saves time in copy pasting the same code in every file or adding links approach.

  2. Good for building medium to large organisational projects.

  3. 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! πŸ‘©β€πŸ’»

Discussion (14)

Collapse
jmau111 profile image
jmau111 • Edited on

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 Author

Thanks for adding up!πŸ™Œ

Collapse
alohci profile image
Nicholas Stimpson • Edited on

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 Author

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 on

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
freebeliever profile image
Blogger and Programmer

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
freebeliever profile image
Blogger and Programmer

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
leonardo jaques πŸ‘¨πŸ»β€πŸ’»

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 Author

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 Author

Glad that you liked the post😊