loader

SCSS Architecture Patterns

Learn how to structure and organize your SCSS codebase for maintainability and scalability.

7-1 Pattern

A popular architecture pattern that organizes code into 7 folders and 1 main file.

scss/
├── abstracts/
│   ├── _variables.scss    # Variables
│   ├── _functions.scss    # Functions
│   ├── _mixins.scss      # Mixins
│   └── _placeholders.scss # Placeholders
│
├── base/
│   ├── _reset.scss       # Reset/normalize
│   ├── _typography.scss  # Typography rules
│   └── _animations.scss  # Animations
│
├── components/
│   ├── _buttons.scss     # Buttons
│   ├── _carousel.scss    # Carousel
│   ├── _cards.scss       # Cards
│   └── _dropdown.scss    # Dropdown
│
├── layout/
│   ├── _navigation.scss  # Navigation
│   ├── _grid.scss       # Grid system
│   ├── _header.scss     # Header
│   ├── _footer.scss     # Footer
│   └── _sidebar.scss    # Sidebar
│
├── pages/
│   ├── _home.scss       # Home specific styles
│   ├── _about.scss      # About specific styles
│   └── _contact.scss    # Contact specific styles
│
├── themes/
│   ├── _theme.scss      # Default theme
│   ├── _dark.scss       # Dark theme
│   └── _admin.scss      # Admin theme
│
├── vendors/
│   ├── _bootstrap.scss  # Bootstrap
│   └── _jquery-ui.scss # jQuery UI
│
└── main.scss            # Main file
Main SCSS File (main.scss): 
// Abstracts
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders';

// Vendors
@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';

// Base
@import 'base/reset';
@import 'base/typography';
@import 'base/animations';

// Layout
@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';

// Components
@import 'components/buttons';
@import 'components/carousel';
@import 'components/cards';
@import 'components/dropdown';

// Pages
@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';

// Themes
@import 'themes/theme';
@import 'themes/dark';
@import 'themes/admin';

ITCSS (Inverted Triangle CSS)

An architecture methodology that helps organize CSS properties in order of specificity.

scss/
├── settings/
│   ├── _global.scss     # Global variables
│   └── _colors.scss     # Color definitions
│
├── tools/
│   ├── _functions.scss  # Global functions
│   └── _mixins.scss     # Global mixins
│
├── generic/
│   ├── _normalize.scss  # Normalize/reset
│   └── _box-sizing.scss # Global box-sizing
│
├── elements/
│   ├── _headings.scss  # H1-H6 styles
│   ├── _links.scss     # Anchor styles
│   └── _lists.scss     # List styles
│
├── objects/
│   ├── _container.scss # Container objects
│   ├── _grid.scss      # Grid system
│   └── _media.scss     # Media objects
│
├── components/
│   ├── _buttons.scss   # Button styles
│   └── _cards.scss     # Card styles
│
└── utilities/
    ├── _spacing.scss   # Spacing helpers
    └── _text.scss      # Text utilities
Example Implementation: 
// settings/_colors.scss
$color-primary: #007bff;
$color-secondary: #6c757d;

// tools/_mixins.scss
@mixin button-variant($background) {
    background-color: $background;
    &:hover {
        background-color: darken($background, 10%);
    }
}

// components/_buttons.scss
.button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    
    &--primary {
        @include button-variant($color-primary);
    }
    
    &--secondary {
        @include button-variant($color-secondary);
    }
}

SMACSS (Scalable and Modular Architecture for CSS)

A style guide for structuring CSS and organizing rules.

scss/
├── base/
│   ├── _reset.scss
│   └── _base.scss
│
├── layout/
│   ├── _header.scss
│   └── _grid.scss
│
├── modules/
│   ├── _buttons.scss
│   └── _cards.scss
│
├── state/
│   └── _states.scss
│
└── theme/
    └── _theme.scss
Naming Conventions: 
/* Layout Rules */
.l-header {}
.l-grid {}

/* Module Rules */
.btn {}
.btn-primary {}
.card {}

/* State Rules */
.is-active {}
.is-hidden {}

/* Theme Rules */
.theme-dark {}

BEM with SCSS

Implementing BEM (Block Element Modifier) methodology with SCSS features.

// _card.scss
.card {
    background: white;
    border-radius: 4px;
    
    &__header {
        padding: 1rem;
        
        &--highlighted {
            background: #f8f9fa;
        }
    }
    
    &__content {
        padding: 1rem;
    }
    
    &__footer {
        padding: 1rem;
        border-top: 1px solid #eee;
    }
    
    &--featured {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}

// Usage in HTML:
// <div class="card card--featured">
//     <div class="card__header card__header--highlighted">
//     <div class="card__content">
//     <div class="card__footer">
// </div>

Component-Based Architecture

Organizing SCSS for component-based frameworks like React or Vue.

src/
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── _button.scss
│   └── Card/
│       ├── Card.jsx
│       └── _card.scss
│
├── styles/
│   ├── abstracts/
│   │   ├── _variables.scss
│   │   └── _mixins.scss
│   │
│   ├── base/
│   │   └── _global.scss
│   │
│   └── main.scss
Component SCSS Example: 
// Button/_button.scss
@import '../../styles/abstracts/variables';
@import '../../styles/abstracts/mixins';

.button {
    // Component styles
    &--primary {
        // Variant styles
    }
}

// Usage in Component:
// import './_button.scss';

Best Practices

  • Follow a consistent naming convention
  • Keep files small and focused
  • Use partial files with meaningful names
  • Maintain a logical file structure
  • Document your architecture decisions
  • Use source maps for development
  • Implement consistent code formatting
  • Follow the Single Responsibility Principle
  • Keep nesting to a minimum (max 3 levels)
  • Use variables for repeated values