Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: css
cssscssnaming
Nest SCSS and shorten child class names under their parent
Use concise scoped child class names where ownership stays clear; add SCSS nesting only when the ancestor relationship is part of the style contract.
PR: hegnar-forum-web · org-mining-deep-2026-06Created: Jun 17, 2026
Bad example
Old codescss
| 1 | .instrument {} |
| 2 | .instrumentInfo {} |
Explanation (EN)
A repeated parent prefix can be noise inside an already clear local styling scope.
Objašnjenje (HR)
Good example
New codescss
| 1 | .instrument { .info {} } |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
Within the project's scoping convention, shorten a child class only when ownership remains clear and the added ancestor selector is intentionally required.
Exceptions / Tradeoffs (EN)
CSS Modules already scope classes; adding a parent dependency can increase specificity and couple styles to DOM shape. Do not apply this as a blanket requirement to nest.