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: React
consistencyreactstylingclean-code
Agree on one conditional className convention and keep it consistent
Standardize how conditional classes are applied (e.g. `&&` for a single class, object notation via clsx for multiple) and apply it consistently across components.
PR: hegnar-components · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codetsx
| 1 | // mixed across files |
| 2 | <div className={cx(styles.box, { [styles.active]: isActive })} /> |
| 3 | <div className={`${styles.box} ${isActive ? styles.active : ''}`} /> |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | // single conditional class -> && |
| 2 | <div className={cx(styles.box, isActive && styles.active)} /> |
| 3 | // multiple conditional classes -> object notation |
| 4 | <div className={cx(styles.box, { [styles.active]: isActive, [styles.large]: isLarge })} /> |
Explanation (EN)
Objašnjenje (HR)