Recommended SCSS Folder Structure for Scalable Projects

CSSJuly 13, 2026

Introduction

As your project grows, keeping all styles inside one or two files quickly becomes difficult to maintain. A well-organized SCSS architecture helps you write reusable, modular, and maintainable code.

This guide presents a folder structure that works well for modern frameworks such as Next.js, React, Vue, Angular, or even traditional HTML projects.

Recommended Structure

styles/
│
├── abstracts/
│   ├── _variables.scss
│   ├── _colors.scss
│   ├── _spacing.scss
│   ├── _typography.scss
│   ├── _breakpoints.scss
│   ├── _mixins.scss
│   ├── _functions.scss
│   └── _animations.scss
│
├── base/
│   ├── _reset.scss
│   ├── _fonts.scss
│   ├── _typography.scss
│   ├── _helpers.scss
│   ├── _utilities.scss
│   └── _global.scss
│
├── layout/
│   ├── _container.scss
│   ├── _grid.scss
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _sidebar.scss
│   └── _navigation.scss
│
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   ├── _badge.scss
│   ├── _modal.scss
│   ├── _accordion.scss
│   ├── _alert.scss
│   ├── _breadcrumb.scss
│   ├── _pagination.scss
│   ├── _tabs.scss
│   ├── _form.scss
│   └── _table.scss
│
├── sections/
│   ├── _hero.scss
│   ├── _services.scss
│   ├── _about.scss
│   ├── _features.scss
│   ├── _pricing.scss
│   ├── _testimonials.scss
│   ├── _faq.scss
│   ├── _contact.scss
│   └── _blog.scss
│
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   ├── _services.scss
│   ├── _contact.scss
│   └── _blog.scss
│
├── themes/
│   ├── _light.scss
│   └── _dark.scss
│
├── vendors/
│   ├── _swiper.scss
│   └── _normalize.scss
│
└── main.scss

Folder Responsibilities

abstracts/

Contains reusable design tokens and logic.

Examples:

Variables
Colors
Font sizes
Breakpoints
Mixins
Functions

Example:

$primary: #2563eb;
$radius: 12px;
$spacing-md: 1rem;

No CSS should be generated from this folder.

base/

Defines the project's global styles.

Typical files:

CSS Reset
Global typography
Font declarations
Utility classes
Body styles

Example:

body {
  font-family: var(--font-inter);
  background: #fff;
  color: #222;
}

layout/

Contains structural elements shared across pages.

Examples:

Header
Footer
Navigation
Grid
Sidebar
Container

These define the site's layout—not reusable UI components.

components/

Contains reusable UI components.

Examples:

Button
Card
Modal
Input
Alert
Badge
Tabs
Pagination

Each component should follow a consistent naming convention such as BEM.

Example:

.button {
  display: inline-flex;

  &--primary {}

  &--secondary {}

  &__icon {}
}

sections/

For marketing websites and landing pages, entire page sections can be grouped here.

Examples:

Hero
Features
Pricing
FAQ
Testimonials
Newsletter

These are composed of multiple components working together.

pages/

Contains styles that are unique to a specific page.

Examples:

Home
Contact
Pricing
404

Avoid placing reusable styles here.

themes/

Useful when supporting multiple themes.

Examples:

Light
Dark
Corporate

Typically these files define CSS variables.

Example:

[data-theme="dark"] {
  --background: #111;
  --text: #fff;
}

vendors/

Third-party styles that you don't control.

Examples:

Swiper
Leaflet
Prism.js
Normalize.css

Keeping them isolated makes upgrades easier.

Using the Sass Module System

Prefer the modern Sass module system instead of the deprecated @import.

@use "abstracts/variables";
@use "abstracts/mixins";

@use "base/reset";
@use "base/global";

@use "layout/header";
@use "layout/footer";

@use "components/button";
@use "components/card";

@use "sections/hero";
@use "sections/services";

This avoids global namespace pollution and makes dependencies explicit.

Example Component

.card {
  border-radius: 12px;
  background: white;

  &__image {
    width: 100%;
  }

  &__content {
    padding: 1.5rem;
  }

  &__title {
    font-size: 1.5rem;
  }

  &--featured {
    border: 2px solid var(--primary);
  }
}

Each component should be self-contained and reusable.

Suggested Import Order

@use "abstracts/*";

@use "base/*";

@use "layout/*";

@use "components/*";

@use "sections/*";

@use "pages/*";

@use "themes/*";

@use "vendors/*";

This keeps dependencies organized from foundational styles to page-specific enhancements.

Best Practices

Keep components independent.
Use BEM or another consistent naming convention.
Avoid nesting deeper than three levels.
Prefer CSS variables for theming.
Use design tokens for colors, spacing, and typography.
Keep page-specific styles out of reusable components.
Remove unused styles regularly.
Prefer @use and @forward over @import.

Recommended for Next.js Projects

A common setup for Next.js is:

src/
├── app/
├── components/
├── styles/
│   ├── abstracts/
│   ├── base/
│   ├── layout/
│   ├── components/
│   ├── sections/
│   ├── pages/
│   ├── themes/
│   └── main.scss

Import main.scss once in your root layout, and let it compose the rest of your styles.

A clear SCSS architecture makes projects easier to maintain, especially as teams and codebases grow. By separating global styles, layouts, reusable components, page-specific styles, and design tokens, you create a scalable foundation that works well across small websites and large applications alike.

Combined with modern Sass features like @use and a consistent naming convention such as BEM, this structure helps keep your styles predictable, reusable, and easy to navigate for years to come.