Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Keep SCSS class names short and nesting shallow
Avoid deeply nested SCSS selectors with long descriptive class names; flatten the structure and use concise, scoped class names.
Bad example
| 1 | .container { |
| 2 | .heroSection { |
| 3 | .wineDetails { |
| 4 | .detailsHeader { |
| 5 | .wineNameProducerOrigin { |
| 6 | .wineNameText { color: red; } |
| 7 | } |
| 8 | } |
| 9 | } |
| 10 | } |
| 11 | } |
Explanation (EN)
Deep descendant chains couple a simple style to several unrelated wrapper elements.
Objašnjenje (HR)
Good example
| 1 | .wineNameText { color: red; } |
Explanation (EN)
The existing target class is retained; removing ancestry requires verifying that scoped ownership and cascade still preserve the intended targets.
Objašnjenje (HR)
Notes (EN)
Flatten selector nesting that encodes incidental DOM ancestry, while updating class references and checking specificity against all competing rules.
Exceptions / Tradeoffs (EN)
A short parent qualifier can express an intentional component variant. CSS Modules can already provide isolation, so mirroring the full DOM tree is unnecessary.