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.
Clear module boundariesFocused mixins and functionsPredictable CSSDeep selector chainsImplicit mutable dependenciesUnnecessary utilitiesWhich principle best describes a maintainable Sass architecture?