DEV Community

Cess
Cess

Posted on

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

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 style sheet for each page?

What do you guys think?

One style sheet for each page or different style sheets for different pages?

Discussion (18)

Collapse
valeriavg profile image
Valeria

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

Collapse
ryanguitar profile image
Ryan Els • Edited on

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.

Collapse
jorensm profile image
JorensM

What if the user is on mobile and rotates their phone?

Collapse
rustinedave profile image
Rustine Dave Lontayao

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.
Collapse
thoughtmight profile image
Thought Might • Edited on

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.

Collapse
xwero profile image
david duymelinck

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.

Collapse
ryanguitar profile image
Ryan Els

@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

Collapse
josher565 profile image
Josh Robinson

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

Collapse
bilalkhanamin profile image
Bilal Amin

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.

Collapse
itzarty profile image
Arty

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.

Collapse
cicirello profile image
Vincent A. Cicirello

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

Collapse
ben profile image
Ben Halpern

I’d probably use just one style sheet for a basic website. Incentivizes consistently and re-use.

Collapse
dagr8 profile image
DAGr8

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

Collapse
xiaoeyun profile image
Xiao_e_yun • Edited on

1 global style
1 page 1 style (like vue

Collapse
andreseduardop profile image
andreseduardop

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

Collapse
jankapunkt profile image
Jan Küster

One sheet for layout and page specific sheets for page specific styles

Collapse
ezeugoobieze profile image
mr.Felistus

I would prefer to have different stylesheet for each page. That way, maintaining would be easy and direct and will help keep the syntax clean and less bulky