How do you organize CSS files?

This is an anonymous question sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough to write. Email [e-mail] if you'd like to leave an anonymous comment or if you want to ask your own anonymous question.

---

Comments

[Daniel Schulz]

As usual: Depends on the project.

Smaller projects get global styles only. The whole page then gets constructed from more abstract components, like boxes, bars, layout modules, etc.

 styles/
├─ utility/
│  ├─ font-bold.css
│  ├─ underline.css
├─ typography.css
├─ colors.css

I use sass as a preprocessor most of the time. That will handle the bundling and pack everything into a single CSS file.

In a larger, component-based codebases, I like to keep my styles as close to the associated HTML and JS, while still building upon global styles:

modal-component/
├─ html/
├─ js/
├─ css/
│  ├─ background.css
│  ├─ modal-container.css
global/
├─ styles/
│  ├─ utility/
│  │  ├─ font-bold.css
│  │  ├─ underline.css
│  ├─ typography.css
│  ├─ colors.css

This will keep my track of CSS that is only used in their respective components (which is usually scoped to them) and global styling which affetcs the page as a whole, such as layouts, color management, base typography, and so on.
It also helps with code splitting. Global styles are loaded eagerly, components styles are loaded when needed.
It also also happens to work very well with single file components in Vue.

Very large projects may outgrow my workflow for global styles, but I usually know it when that's the case and it's usually not only my call to make at that point.

[Ian B]

When not using react styled components I tend to try and use the 7-1 structure, or a generic atomic design structure (atoms, molecules, organisms, template, etc)

In the case of one of my current projects I'm following the existing structure, which is just whack everything in partials, regardless of what functionality they serve.

[Thomas Bnt]

For a standard project :

├─ assets/
     ├─ js/
     ├─ css/
     │  ├─ main.css
     │  ├─ header.css

[Alexander Walczuk]

I use tailwind and Vue SFC. Moral - don't create CSS files, so you won't have to organise them :)

[Rémy 🤖]

Vue SFC are the biggest game changer in that field for sure :)

[Corentin Bettiol]

One ~small file per project. Few kB only during transfer, maybe a dozen kB uncompressed. See this file for an example.

[Nguyen Van Viet]

I use styled component, don't need to create css files. haha