I’m one of those developers that loves CSS. I’m also one of those humans with a penchant for organization. Because of the latter, I’ve been refining and tinkering how I organize my CSS/SASS files in development projects.

CSS can get unwieldy really fast, especially with responsive web design. That alone is reason enough to keep those files organized. But another reason is to make it easier for other people coming in on a project to quickly get up to speed on where things are. And by other people, I don’t just mean teammates in say, an agency setting. I’m also referring to our future selves.

“Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.”

–“Code For The Maintainer”

Over the past few years I’ve created and refined and tweaked and changed how I organize my CSS files for website projects. Well, actually, they’re SCSS files as that’s my preferred way to write CSS. As I kept tweaking things I ran across “A Simple SCSS Architecture and Best Practice Playbook” by Matthew Welsom. It helped me come up with my own structure which is similar to his. It also inspired me to share said structure. So here goes!

High-level structure

This overall structure and organization of my SCSS files have gone through a number of iterations over the years. Projects that I started prior to 2021 use either a modified version of this or something else entirely. But I feel like this structure finally in a stable place and is what I’ve been using for much of this year on at least new projects.

↳ src
  ↳ scss
    ↳ 01-abstracts
    ↳ 02-base
    ↳ 03-components
    ↳ 04-layouts
    ↳ 05-utilities
    ↳ 06-vendors
    ↳ styles.scss

The folders are prefixed with a number just to keep them visually in order. This is borrowed from both the 7-1 and ITCSS patterns.

The main SCSS file, styles.scss, is where everything from the folders gets pulled in:

@charset 'utf-8';

/*****************************************************************
   01. ABSTRACTS
   Helper functions & non-output snippets
   (Variables, mixins, functions, etc.)
*****************************************************************/
@use "01-abstracts/variables";
@use "01-abstracts/mixins";


/*****************************************************************
   02. BASE
   Reset, typography, global styles
*****************************************************************/
@use "02-base/reset";
@use "02-base/body";
@use "02-base/main";
@use "02-base/typography";


/*****************************************************************
   03. COMPONENTS
   Micro-level, reusable components
   (Each does one thing only. Ex: buttons)
*****************************************************************/
@use "03-components/nav";
@use "03-components/footer";
@use "03-components/buttons";


/*****************************************************************
   04. LAYOUTS
   Unique combos of components & base styles
   (Grids, specific page styles, etc.)
*****************************************************************/
@use "04-layouts/container";


/*****************************************************************
   05. UTILITIES
   Overrides and custom utility classes
*****************************************************************/
@use "05-utilities/display";
@use "05-utilities/kellum";


/*****************************************************************
   06. VENDOR/THIRD-PARTY
*****************************************************************/
@use "06-vendor/fontawesome/fontawesome.scss";
@use "06-vendor/fontawesome/regular.scss";

Like this?

I love sharing and discussing these sort of things. If you have questions about any of it, feel free to reach out on Twitter.

Organizing CSS/SCSS files

High-level structure

Like this?