Reduce CSS Duplication and Overly Broad Selectors
Sass can generate large stylesheets if abstractions are used without considering their output. A mixin included in many components can duplicate declarations, and a loop can create more utility classes than the application needs.
Selector extension can reduce repeated declarations in some cases, but it can also create complicated combined selectors. The best strategy depends on the generated CSS, component architecture, caching needs, and maintainability requirements.
Avoid unnecessary deep nesting and repeated broad selectors. Prefer focused component classes and small reusable abstractions.
Performance work should be measured. Inspect the output size, network transfer, stylesheet parsing cost, and actual rendering behavior before introducing complex optimizations.
Duplicated declarationsExcess utility classesComplex selectorsMeasure CSS output and inspect real browser behavior before changing an architecture. Smaller source files do not always produce smaller or faster CSS.
What is a potential drawback of including a large Sass mixin in many components?