Maintainable Sass Architecture and Anti-Patterns

Maintainable Sass is built around clear responsibilities, explicit dependencies, predictable output, and a small number of useful abstractions.

Common anti-patterns include excessively deep nesting, overuse of !important, unnecessary global variable mutation, giant mixins with unrelated options, indiscriminate @extend, repeated magic numbers, and generating large utility systems without a clear need.

Prefer semantic tokens for shared design decisions, CSS custom properties for runtime theme behavior, and small mixins for repeated patterns. Keep component styles close to the components they describe when the application architecture supports that approach.

Review both source code and compiled output. The goal is not to maximize the number of Sass features used, but to create CSS that remains understandable and predictable as the product grows.

Prefer
Architecture: Clear module boundaries
Each file should have a coherent responsibility.
Reuse: Focused mixins and functions
Abstractions should reduce repetition without hiding important behavior.
Output: Predictable CSS
Generated selectors should be easy to inspect and override.
Avoid
Nesting: Deep selector chains
They can increase coupling and specificity.
Globals: Implicit mutable dependencies
They make code harder to understand and test.
Generation: Unnecessary utilities
They can inflate CSS without adding practical value.
Knowledge Check

Which principle best describes a maintainable Sass architecture?