Multiple CSS files or one for websites with multiple pages?
Okay im sorta a beginner but when i have multiple pages and im trying to use one css file for everything i keep having to add a bunch of classes to elements so they don't conflict with other styling i had for another page and it seems so time consuming. any tips?
17 Replies
Use a bundler, it lets you use multiple css files and does some magic to make it performant
but what is the industry standard? i usually see one css file
That way you can have separate css files for specific reusable pieces of your user interface and keep everything cleanly separated without sacrificing performance
oh i see
A bundler is industry standard
In a large project, a bundler will take all the css files that are relevant for a page and combine it into 1 file
so people use a different style sheet file for every extra page?
omg thats amazing
That's the old way of thinking about it
We've moved away from building pages, and instead we build reusable components that can plug into different pages when needed
so if i have 2 pages lets say and index.html and another html page, creating a css file for both wouldnt be bad if i then use a bundler to merge into one?
So instead of thinking about it like 1 css file per page, you'd realistically want to make a separate css file per reusable component, and then you can have specific page css files that cover the pieces that aren't reusable / global to that page. Then your bundler will do all the magic behind the scenes to make it 1 file (or multiple, not really super familiar with how bundlers work -- but the idea is that you don't need to worry about it)
so by reusable component,would be like a template u would make to then base all other pages on?
You don't really need a bundler if your project is small honestly.
This is the general idea:
If you have 2 separate pages with 2 separate css files, keeping page-specific styles separated will make it easier for you, the developer, to maintain and develop. This comes with the tradeoff that the browser will have to load a different css file if you navigate to the second page, meaning that the browser has to make two requests instead of one.
If you have 1 css file for 2 pages, it makes it harder for you to maintain and develop but allows the browser to cache the css file when you visit the first page. When you navigate to the second, you can use the cached version your computer already downloaded instead of making an additional request for a separate css file.
Now, instead of worrying about performance vs developer experience, you can use a bundler which will do all the heavy lifting for you behind the scenes. Instead of merely creating page-specific styles, you can start building based off of component driven design. You have separate css files for your reusable components, and page-specific css files if you need them. Then, the bunder will minify your css to make it more performant and serve a single css file. With that being said, I believe in your 2 css files and 2 pages scenario, even with a bundler you would be served 2 separate css files. But, like I said before, if you use a bundler you can kind of just trust it to do a good job of managing your css and making it performant.
I'm not really knowledgable on how bundlers really work, but I know enough to let it to its job and not worry about css files vs performance tradeoffs.
That's how I look at it and I'm sure I've said some parts wrong as well so if anyone wants to chime in go for it
Close. Say you have a product card. You can make a separate css file called
card.scss that only houses specific styling to your card component.
Say you have 10 different components like that, leading to 10 different css files (not including your page-specific styles). And let's assume you use every component you have on a single page.
Without a bundler, you'd be serving 10 component css files + your page specific styles, leading to 11 different css files the browser has to download. That would cause a performance issue most likely if you did that without a bundler. But, with a bundler, it will take those 10 component css files + your page specific styles and combine it into one so that the browser only has to download a single file
I believe that is how it worksso if u were making a small static website with like 3 pages u would still use a bundler or would u just make it all with one css file. im not going to be doing anything too big or crazy anytime soon lol i think
okay i see what you are saying
You could do one file or three files. Since the site is so small it probably won't make much of a difference no matter what you take. A bundler isn't needed.
A good way to test out performance is a program by Google called Lighthouse. If you're already using Google Chrome, you can tab into the devtools and use it there. It'll rank your site based off a few different metrics - performance being one. With a small site like yours, you really shouldn't be getting anything less than 90 at the lowest on mobile and desktop.
My suggestion would be to try it out with three different files since it makes it easier for you to develop. Plug each page into Lighthouse and see if they're performant and go from there
I recommend learning a bit about Vite, a build tool with bundling. Should be really simple to get up and running and you'll never have to worry about this again
https://vitejs.dev/
okay thank you so much man
ill check it out
Great 🙂 👍 Let me know if you have any questions or problems setting it up. It honestly probably takes 5 minutes to set up if you already have Node installed on your computer, 10 minutes if not.
As has been mentioned above, for a small site you can easily have one main CSS file that has all the default styles for all pages and then use a page-specific CSS file for each page to avoid naming collisions.
The extra HTTP overhead for small files is not going to be noticeable to the end user except for really bad internet connections…and if their connection is that bad they'll be used to it.
Bundlers and the like are great, sure, but are really only needed for large-scale sites that have dozens of pages and unique CSS for almost all of them. For smaller-scale sites the overhead of getting the bundler setup and working, along with having to modify the HTML to use the new CSS files, is (IMO) too much work for no noticeable gain.
My advice is to start simple, only add more complexity when you need it, not before. So start with separate files. That'll work for a long while. Once you start making Nike's homepage or Apple's site you'll want to be proficient with bundlers, etc.
I generally program using the Angular framework. There is an overall CSS stylesheet for those classes that are used across the intire site. Then each component/page has it own stylesheet that is specific to those items. It makes editing and keeping track of CSS styles very easy.