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


Top comments (7)

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

 styles/
β”œβ”€ 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:

modal-component/
β”œβ”€ html/
β”œβ”€ js/
β”œβ”€ css/
β”‚  β”œβ”€ background.css
β”‚  β”œβ”€ modal-container.css
global/
β”œβ”€ 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.

Collapse
 
ianbromwich profile image
Mr Rager • Edited on

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.

Collapse
 
thomasbnt profile image
Thomas Bnt • Edited on

For a standard project :

β”œβ”€ assets/
     β”œβ”€ js/
     β”œβ”€ css/
     β”‚  β”œβ”€ main.css
     β”‚  β”œβ”€ header.css
Enter fullscreen mode Exit fullscreen mode
Collapse
 
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 :)

Collapse
 
xowap profile image
RΓ©my πŸ€–

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

Collapse
 
corentinbettiol profile image
Corentin Bettiol • Edited on

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

Collapse
 
viet_nv profile image
Nguyen Van Viet

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

50 CLI Tools You Can't Live Without

The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.