Sass Best Practices

The Core Principles Behind Every Best Practice

Nearly every Sass best practice traces back to a few core principles: prefer the modern module system over legacy globals, keep files small and organized by responsibility, name things predictably, and always check the compiled CSS output, not just whether the SCSS compiles.

@use 'sass:map';
@use 'abstracts/tokens' as tokens;

.card {
  padding: map.get(tokens.$spacing, md);
}

This single line reflects several best practices at once: module system usage, namespacing, and referencing centralized tokens instead of a hardcoded value.

The Best Practices Checklist

1. Use @use/@forward, never @import, in new code
2. Organize files by responsibility (7-1 pattern or similar)
3. Centralize design tokens as maps
4. Keep nesting shallow (≈3 levels)
5. Validate mixin/function input with @error
6. Compile with --style=compressed for production

• Modernize module loading before anything else, it unlocks namespacing and privacy for the rest of your architecture.
• A consistent file structure makes onboarding new developers dramatically faster.
• Centralized tokens prevent silent drift between components over time.
• Shallow nesting and validated functions catch problems earlier, closer to their source.

Sass Best Practices Cheatsheet

A condensed checklist covering the whole course.

Architecture Best Practices

Structure matters more as a project grows. Favor a 7-1-inspired folder layout (or a simplified version for smaller projects), with barrel _index.scss files forwarding each folder's contents to a thin main.scss entry point.

Naming and Token Best Practices

Use BEM for component class names, semantic size-based names for breakpoints, and centralized token maps for colors, spacing, and typography, so a single change in one place propagates consistently across the entire project.

Code Quality Best Practices

Validate mixin and function arguments with @error, keep nesting shallow, prefer placeholders for pure style sharing, and always review the actual compiled CSS output, not just whether your SCSS compiles without errors.

Common Mistakes

• Treating best practices as optional polish rather than habits that prevent real bugs and maintenance headaches later.
• Adopting only some best practices (like BEM naming) while ignoring others (like centralized tokens), leaving inconsistent results.
• Copying a large architecture template without adapting it to the actual size and needs of the project.
• Never revisiting older code against these practices as a project and team matures.

Key Takeaways

• Modern module usage (@use/@forward) is the foundation most other best practices build on.
• Organize files by responsibility, and centralize design tokens as maps.
• Keep nesting shallow, validate function/mixin input, and choose the right reuse tool (mixin, function, or placeholder) for each case.
• Always verify the compiled CSS output, not just successful compilation, as your final check.