DEV Community

Sloan the DEV Moderator
Sloan the DEV Moderator

Posted on

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 if you'd like to leave an anonymous comment or if you want to ask your own anonymous question.

Top comments (7)

iamschulz profile image
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.

├─ utility/
│  ├─ font-bold.css
│  ├─ underline.css
├─ typography.css
├─ colors.css
Enter fullscreen mode Exit fullscreen mode

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:

├─ html/
├─ js/
├─ css/
│  ├─ background.css
│  ├─ modal-container.css
├─ styles/
│  ├─ utility/
│  │  ├─ font-bold.css
│  │  ├─ underline.css
│  ├─ typography.css
│  ├─ colors.css
Enter fullscreen mode Exit fullscreen mode

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.

ianbromwich profile image
Ian B • Edited

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.

thomasbnt profile image
Thomas Bonnet • Edited

For a standard project :

├─ assets/
     ├─ js/
     ├─ css/
     │  ├─ main.css
     │  ├─ header.css
Enter fullscreen mode Exit fullscreen mode
aleksanderwalczuk profile image
Alexander Walczuk

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

xowap profile image
Rémy 🤖

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

corentinbettiol profile image
Corentin Bettiol • Edited

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

viet_nv profile image
Nguyen Van Viet

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