Rules Hub
Coding Rules Library
← 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 ruleP2universalStack: CSS/React
cssreactperformancesimplicity
Prefer CSS pseudo-classes over JS state for visual UI states
Use :focus-within, :hover, :focus, etc. for purely visual states instead of tracking them in React state and re-rendering.
PR: hegnar-components · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codetsx
| 1 | const [searchFocused, setSearchFocused] = useState(false); |
| 2 | <div className={cx(styles.bar, searchFocused && styles.focused)}> |
| 3 | <input onFocus={() => setSearchFocused(true)} onBlur={() => setSearchFocused(false)} /> |
| 4 | </div> |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | <div className={styles.bar}> |
| 2 | <input /> |
| 3 | </div> |
| 4 | /* .bar:focus-within { ... } */ |
Explanation (EN)
Objašnjenje (HR)