Best Practices for CSS Organization?

Help
1

The CSS file for my website has started to get really long and difficult to navigate, despite my best efforts to organize the code within.

Are there any general tips/practices I can follow to help combat this issue? Like, would it be better to start using multiple CSS files (something I have seen) and how could I split the code up? Are there other ways to help trim the CSS up? Or anything else I’m not thinking of?

(I’m not sure how needed it is, as I’m looking for general advice rather than spesific advice, but if it would help to see my CSS then you can find it here )

2

In my fancier stylesheets, I’ve grouped color definitions in their own section, so I can quickly and easily palette-shift a stylesheet without messing with the structural definitions. This also helps when adding a dark mode, if they didn’t have one already. Otherwise I just sort of go top-down, from the broad strokes to the finer details: first the layout of major elements like body, header and footer, then margins and spacing, then purely aesthetic stuff. Each of these sections could go in their own file if they grow big, but mine don’t usually need it.

1 Like
3

i usually have it set up like this

  1. root (if applicable, i only use it for premade templates)
  2. font imports
  3. * stuff
  4. body
  5. general formatting (p, h1, a, hr, etc)
  6. container div if there is one
  7. rest of the page in order of appearance
  8. mobile styling last

that usually does just fine for me!
it looks like you’ve got some bits that could be tidied up here and there (border-style border-color etc could be collapsed into one “border” rule, that sort of thing) which might help!

apart from that though it doesn’t seem long or disorganized to me! seems a pretty reasonable size.

you could add more line breaks and comments and fiddle with indents so it feels more spaced out and easy to navigate? that might make it less visually overwhelming for you. maybe moving your mobile styling to be all in one place at the bottom would help? that’s just my personal preference though, if having it near the desktop styling is what works for you then that won’t help haha

1 Like
4

I had it to where mobile styling was next to the thing that it changed. That being said, given that the screen size is always the same, I probably could group them all together for some slight ease.

Glad to know it looks fine to others though! I’ll probably tidy it up anyways, simply because there’s some visual glitches I need to fix so I may as well do this too, you know?

5

I usually organize it based on which general properties are being changed, so I have a section for positioning, a section for colors, a section for mobile-friendly styles, a section for styles that are basically for one specific page and could be internal CSS if I didn’t use the same header file for every page lol.

I don’t think this is a common way to do things but it works for me because my brain understands it.

1 Like
6

I usually put rules only used on that page as a inline style block, so its all in one place. Shared elements obv get their own stylesheets.