Great question! it depends on the context. Vanilla CSS @imports are considered an antipattern because they create another request to the server. In the case of Astro, they aren't treated that way. Astro is smart enough to bundle multiple CSS files together. It is like this for many other frameworks.
@@dmtrmrvSo which is the best way to organize CSS style in vanilla CSS? Do you suggest to use one CSS file full of comments, divided in token, global etc, use html tag to add different css stylesheets or use @import rule even if it is antipattern? Thanks for your amazing content!
@mrparadox165 It depends on the project, tbh. Even if you’re sticking with vanilla CSS, Vite is super easy to set up. You can write vanilla CSS, split it into multiple files, and have it all compiled into one file at the end similar to some of my demos: github.com/dmtrmrv/demo-content-width
Really good question! Mostly because of my work habits. Some of our projects get a lot of traffic, and even though @layers is baseline now, there's still a chunk of users on browsers that don't support it. If we have 1M page views and 0.5% are on IE11 (God forbid), that's 5k people seeing a broken site. And polyfills are a bit ugly. I'm cautious about using new foundational features. That said, for my personal site, it's a great alternative to the approach mentioned in that video.
@@dmtrmrv I think the current implementation of css layers are unusable because how they treat the !important qualifier. Even if I never use it, I still have to use vendor files for plugins, and a lot of them use !important
Another weird thing about @layers is that it wasn’t working in Opera desktop Mac at the time of this writing even though it’s supposed to have full support.
More to Astro please ;P - great video
Thank you! Glad you enjoyed it!
Using css @import is fine now? I always avoided it because it was supposedly slow.
Great question! it depends on the context. Vanilla CSS @imports are considered an antipattern because they create another request to the server. In the case of Astro, they aren't treated that way. Astro is smart enough to bundle multiple CSS files together. It is like this for many other frameworks.
@@dmtrmrvSo which is the best way to organize CSS style in vanilla CSS? Do you suggest to use one CSS file full of comments, divided in token, global etc, use html tag to add different css stylesheets or use @import rule even if it is antipattern?
Thanks for your amazing content!
@mrparadox165 It depends on the project, tbh. Even if you’re sticking with vanilla CSS, Vite is super easy to set up. You can write vanilla CSS, split it into multiple files, and have it all compiled into one file at the end similar to some of my demos: github.com/dmtrmrv/demo-content-width
@@dmtrmrv Many thanks!
7:30 why not use layers?
Really good question! Mostly because of my work habits. Some of our projects get a lot of traffic, and even though @layers is baseline now, there's still a chunk of users on browsers that don't support it. If we have 1M page views and 0.5% are on IE11 (God forbid), that's 5k people seeing a broken site. And polyfills are a bit ugly. I'm cautious about using new foundational features. That said, for my personal site, it's a great alternative to the approach mentioned in that video.
I talk more about my approach to new CSS features in this video btw: ruclips.net/video/WIvQLSPcvtA/видео.html
@@dmtrmrv I think the current implementation of css layers are unusable because how they treat the !important qualifier. Even if I never use it, I still have to use vendor files for plugins, and a lot of them use !important
Another weird thing about @layers is that it wasn’t working in Opera desktop Mac at the time of this writing even though it’s supposed to have full support.
@@HarryPujols @rodrigonovais9624 another great point on why @layers isn't always a good idea!
you should use vanilla extract css
Thanks for the suggestion