DEV Community

Discussion on: How does @import works in CSS? What is the pros and cons. 🤔

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!🙌