sass/no-extend-class

Dlaczego

@extend .btn adds the extending selector to every rule in the compiled CSS that mentions .btn, including nested, modified and third-party ones. The output grows in unexpected places, the order of rules changes which style wins, and extending across @media is an error. Renaming or restyling .btn then changes unrelated components.

Poprawka

Put the shared declarations in a placeholder (%button-base) and extend that, or write a mixin (@include button-base) when the relationship is only "these look alike". In a component framework, reuse the component instead of the selector.

Przykłady

// bad
.save-button { @extend .btn; }
// good
%button-base { padding: 0.5rem 1rem; border-radius: 0.25rem; }
.btn, .save-button { @extend %button-base; }

Źródła

• Sass docs, @extend (placeholder selectors, extends or mixins)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain sass/no-extend-class