Many years ago it was clear, that CSS “@import” was an antipattern because of many problems:
- some browsers (e.g. old IE) included CSS @import styles not in the right order
- import() requests were made not in parallel
- with HTTP1, in many cases, it was easier for performance/development to avoid additional CSS requests, and simply concatenate the CSS files into one
Here are some links with descriptions: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ https://gtmetrix.com/avoid-css-import.html
But today we are switching to HTTP/2 and native ECMAScript modules “imports”, which have a bit similar behavior. All the modern browsers fixed the CSS @import problems, mentioned before, loading them in parallel and including styles in the right order.
The only concerns, I see so far, may be loading concerns, but it depends on the app architecture and will work kinda same as native ES6 modules. The additional requests problem will be solved by HTTP/2.
Of course, the difference with native ES6 modules is that you can use @import only at the beginning of the CSS file, but in the case of JS they are hoisting, but use “import” in JS only on the top level of the code- so there are still similar limitations.
What issues am I missing and what do you think, is CSS @import still considered as an anti-pattern?