In the authoring style sheets, a key selector should only be written once.
This allows us to search for a key-selector in the code base and find a single source of truth for our selector. Thanks to the use of an extended CSS syntax, everything that happens to that key selector can be encapsulated in a single rule block.
Overrides to the key selector are handled by nesting and referencing the key selector with the parent selector. More of which shortly.
Consider this example:
.key-Selector { width: 100%; @media (min-width: $M) { width: 50%; } .an-Override_Selector & { color: $color-grey-33; } }
That would yield the following in the CSS:
.key-Selector { width: 100%; } @media (min-width: 768px) { .key-Selector { width: 50%; } } .an-Override_Selector .key-Selector { color: #333;&...