Style every page element in seperate css file
Hello I've seen tutorial in youtube ,the guy did a YouTube clone which he styled page elements separately for example :
header.css , nav.css , general.css , video.css
My question is it a good practice to do so ,is it professional ,does it slow the website?
31 Replies
it really depends on how it is implemented
having multiple files is and isn't bad - it depends on how it is used
More explaining please?
are those files bundled? are those files
@imported by a general file? are those files put in multiple <link> tags? are those files minified? is there repeated code between files? are those files used with media queries?He used link
that's not bad
would be a lot better if it was bundled and minified, but well, there's nothing wrong with that implementation
Im sorry but how can they be bundled
with vite or webpack
vite is the better choice now-a-days
sorry to jump in, is there any negatives with having a
global.css file @import all of them?Thnks
yes: each
@import is a new file transfer
and each download is done one after the other
instead of doing in paralel
and it does while the dom is being rendered
that can slow down the page quite a lot
imagine waiting to render your website because google fonts is being slow
(or an alternative, if you want to follow gdpr)Were any build tools involved? Many build tools will combine all the CSS files into 1. In that situation, having many files will let you organize while still avoiding the slight delay caused by fetching many files, because the built version only actually has 1.
oh hm, that's the way i do it haha, what's the most optimised way?
not doing that
multiple links or a bundler
links as in
<link>?yes
and does that make it load quicker then or is there a more in depth reason to why that's better?
perhaps things like
preload make it better?it means that the browser can download the files in paralel
you can try, but i would use it only for images and stuff that's more important
what do you mean by in parallel?
ah okay i see
at the same time?
oh so
@import doesn't do it like that?
it does it synchronously? so if one takes a while the others wont download until it's done?it's not synchronously
it's sequentially
and it's not just sequentially: it also stops the page rendering
it literally blocks the page from being rendered
oh so if one takes ages to download it just wont render the page until it's done?
yup
oh wow, i didn't know that
thank you
so until i knew that, i used to import all my files via one and put the main one in a link tag. Is there a similar way to sort of group them into one using link tags so half the html isn't imports haha? is that bundling?
you can use a bundler or use
<link>and that's vite or webpack right?
and when you say "use
<link>", let's say you have 30 different css files, that would be a lot of links which was my concern e.g.
unless you can bundle multiple imports into one link tag?yes, that would be a lot of links
but that's why you use a bundler, and let the bundler do it's magic
and yes, that would be vite or webpack
(there's more, but, those are the most known)
alright, i'll take a look into those, thanks for the info
you should just take a look at vite
Its common practice to use CSS Modules with tools like React where you have a css file for each component so they are reusable without having to hunt down all the css for that component in your main stylesheet e.g. style.css .
I havent yet adopted this but i havent had a big enough project either. There is also some fancy thing in react when using css modules that it will hash each class so its unique