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.

Common output problems
Repeated mixins: Duplicated declarations
Large mixins included many times can increase generated CSS.
Large loops: Excess utility classes
Generating every conceivable utility may increase unused CSS.
Deep nesting: Complex selectors
Long selector chains can make overrides difficult and tightly couple CSS to markup.
Optimize based on evidence

Measure CSS output and inspect real browser behavior before changing an architecture. Smaller source files do not always produce smaller or faster CSS.

Knowledge Check

What is a potential drawback of including a large Sass mixin in many components?