Discuss: Would you have one style sheet for all or make a style sheet for each page when making a basic website?

Depends on a website.
To avoid a layout shift when page loads and the styles kick in I prefer to have crucial styles in the head and the rest in css file(s).

But if all pages are very different from one another it doesn't really make sense to group them together. And if the styles are really short, it doesn't make sense to separate them to a file.

Nowadays I'd start with everything in <style> and extract when it gets too crowded

I have adopted a style where I use 3 style sheets. A main style sheet that applies to all devices. Then a style for portrait orientation and one for landscape orientation. When I link the style sheets in the head I use media queries so only the necessary style sheet loads depending on the screen orientation. So like <link rel="stylesheet" href="styles/landscape.css" media="(orientation:landscape)">. This way not all the css is downloaded unless it is needed. So if a person views the website on a laptop then the portrait.css will not he downloaded etc. It gives a slight performance boost.

Here's how I usually organize my stylesheets:

• global : has all definitions for components I'd prolly use all throughout the site, that is typography, colors, sizings, etc.
• responsive : here's where I write all of my media queries. Mind that in this setup, good documentation is a must since you may be compiling styles for different pages.
• page-specific : there are some styles that I just can't put inside global. Here's where "overriding" usually happens. Say, I have a card component on global which has narrow spacings and I want some cards in certain pages to have more padding.

A good way to split up the css files in a crucial css file and a page specific css file.

The crucial file is the easiest file. It contains css that is used on every page.
Most of the times specific content of the pages are build up with components. So you can split up css files in components and generate css files with all the components combinations there are.
Once a page is created or changed, there needs to be a component check to link to the css file with the right component combination.

We've thought about this for years. At Thought Might, finally we've come up to a decision that using a single file will be beneficial. Because browser will have to download the css file once no matter how many pages users browse.

The main target should be keeping the css file short.

I'd say not to code css directly. Get a library like Foundation or Bootstrap and let that be your global definition. There's other css libraries out there now, but those are my go-tos.

A good library will do Sass or Scss. Build out repeatable styles that form up widgets and reuse variables defined in your library. Or define new variables when you have something truly unique that is tied to something that only your UI does.

The library will cover more than 80% of your use-case and anything unique you can generate from Sass/Scss.

I hope that helps! :)

For my personal website, all of the css common across all pages or most pages is in a single css file, which my custom static site generator then embeds directly in the head of each page. The css file itself is just so I have a single place to edit it, and my site generator takes care of updating on all pages. For the couple pages on my site that need additional page-specific styling, I also just embed in head. Site is at cicirello.org if you want to see complexity of site that I handle this way.

For all of my project sites, I use AMP HTML, which doesn't allow external style sheets, so the css for those sites is also emdedded in the head. One of these sites is at actions.cicirello.org. I currently edit this site by hand so modifying style is tedious and potentially error-prone. I actually just made a couple css changes the other day--had to make same changes to each page (luckily just 5 at the moment).

I would add some of my way of work too. Nowadays I usually use Sass, which is handy and worthwhile.
For each component, I use a saas partition, where I write scss.
All the partitions are then imported to the index.scss file. For the rest, you can have globals, responsive, etc.
I think it's better than one massive file of CSS, if you have to change property you don't have to search all the files and it's a bad experience.

Good question! I mostly only use a single CSS file for the entire website, but I also write a different CSS file for mobile devices. Although I'm no expert in CSS, I think having everything in a single file makes navigation way easier.

@jorensm If the user rotates their phone then the necessary stylesheet gets automatically downloaded. I use this method specifically for mobile devices. Here is a working example ryanguitar.github.io/onlineBooking