css

Increase specificity safely by self-chaining classes like .btn.btn, replacing ID selectors with attribute selectors like [id="x"], or reordering source and cascade layers. Reserve !important for immutable utility classes or documented external boundaries.

Use rem for anything that should scale with user font preferences: font-size, text spacing, padding around text, and media queries. Use px for fixed visual details like borders, border-radius, and box-shadows.

Use @extend only for thematically related selectors within the same component, since it disrupts source order and creates unexpected groupings. Use mixins for coincidentally similar styles, as compiled repetition is handled by gzip.

Add a beacon background-image with a unique URL to suspect selectors, verify requests reach server logs, and monitor for 2-3 months. Treat zero-request selectors as deletion candidates and remove them in small, reversible increments.

Margin on components breaks encapsulation by adding invisible space outside their visual boundaries and reduces reusability across contexts. Move spacing to the parent layout using gap, single-direction margin flows, or utility classes instead.

No, this Skill explicitly excludes Tailwind projects using tailwind.config.js, utility classes, CVA variants, or Tailwind theme tokens. It targets plain CSS and preprocessor-based stylesheets with custom-property design scales.