So I saw this question on Twitter by @zocodes
When making a basic website with many pages, would you have one style.css sheet for all or make a s...
For further actions, you may consider blocking this person and/or reporting abuse
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 crowdedI 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.
What if the user is on mobile and rotates their phone?
Here's how I usually organize my stylesheets:
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
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
I’d probably use just one style sheet for a basic website. Incentivizes consistently and re-use.
One sheet for layout and page specific sheets for page specific styles
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.