Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Nest related CSS selectors and extract shared rules into a base class
When classes share most of their declarations, nest variants and extend a common base instead of repeating the rules.
Bad example
| 1 | .highlight { background: yellow; padding: 0; } |
| 2 | .highlightActive { background: orange; padding: 0; outline: 2px solid; } |
Explanation (EN)
Repeated variant declarations can drift, but a nesting rewrite must not drop the shared properties.
Objašnjenje (HR)
Good example
| 1 | .highlight, .highlightActive { padding: 0; } |
| 2 | .highlight { background: yellow; } |
| 3 | .highlightActive { background: orange; outline: 2px solid; } |
Explanation (EN)
Both variants retain padding; selector grouping shares it explicitly without pretending nesting causes inheritance.
Objašnjenje (HR)
Notes (EN)
When variants genuinely share declarations, express a common class, selector group or established Sass reuse mechanism while preserving every variant's computed styles.
Exceptions / Tradeoffs (EN)
Sass &Active concatenates a selector name; it does not inherit the parent declarations. Nesting alone is not an extend, and extend can change selector output.