DEV Community

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

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