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

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! :)

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.

@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

One.Sometimes I will even go as far as adding the css I need from s library like jquery to avoid having the extra css. As someone here said there are case where its better to use multiple css files I find that one is sufficient for most projects

1 global style
1 page 1 style (like vue

In my experience, a single stylesheet is sufficient for an entire basic website. This facilitates graphical consistency and maintenance.

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.

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 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.

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.