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 ruleP1stack specificStack: css
csscomponentsreusability
Style component variants via props, not by overriding default styles
Keep shared/dumb components style-agnostic; pass a customClass prop for variant styling instead of mutating the component's default styles based on a tag/flag, which creates a styling mess across all usages.
PR: frontpage-web · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codecss
| 1 | .titleContainer:global(.h1) { font-size: 2rem; } // affects every Title used as h1 |
Explanation (EN)
A global default override can change unrelated consumers of the same shared component.
Objašnjenje (HR)
Good example
New codejsx
| 1 | // Title.tsx accepts customTitleClass prop |
| 2 | <Title customTitleClass={styles.landingTitle} /> |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
For a one-off host variant, use the shared component's supported class/slot/variant API rather than changing defaults that affect every consumer.
Exceptions / Tradeoffs (EN)
A shared semantic variant may properly belong inside the component. Keep native element semantics independent from accidental visual choices.