css/nesting-no-concat

Why

Sass taught a habit: &__title inside .card becomes .card__title. Native CSS nesting does not join text; & stands for the parent selector as a whole, so &__title is not a valid selector and the browser drops the whole rule. The styles silently disappear when a stylesheet moves from .scss to .css.

Fix

Write the full class name as its own rule or nested with a space (& .card__title for a descendant), and use &.modifier for a compound selector. Keep suffix joining in .scss files only, or in a build that runs postcss-nested.

Examples

/* bad */
.card { &__title { font-size: 1.25rem; } }
/* good */
.card__title { font-size: 1.25rem; }
.card { &.card--featured { border-color: gold; } }

Sources

• MDN, Using CSS nesting
• MDN, Nesting selector (&)

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/nesting-no-concat