Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Compose CSS-module classes rather than joining them with cx() when always applied together
If two module classes always appear together on an element, merge them into one class instead of cx()-ing them in JSX.
Bad example
| 1 | // JSX |
| 2 | <Typography className={cx(styles.deleted, styles.offset)}>...</Typography> |
| 3 |
|
| 4 | // styles.module.scss |
| 5 | .deleted { |
| 6 | color: var(--text-muted); |
| 7 | } |
| 8 | .offset { |
| 9 | margin-left: rem-calc(32); |
| 10 | } |
Explanation (EN)
The two classes are unconditionally applied to the same element, so the cx() call adds noise without adding flexibility. The styling intent is split across the JSX and two unrelated SCSS rules.
Objašnjenje (HR)
Obje klase se bezuvjetno primjenjuju na isti element, pa cx() poziv dodaje sum bez ikakve dodatne fleksibilnosti. Namjera stiliziranja je razbijena izmedu JSX-a i dvaju nepovezanih SCSS pravila.
Good example
| 1 | // JSX |
| 2 | <Typography className={styles.deleted}>...</Typography> |
| 3 |
|
| 4 | // styles.module.scss |
| 5 | .deleted { |
| 6 | composes: offset; |
| 7 | color: var(--text-muted); |
| 8 | } |
| 9 | .offset { |
| 10 | margin-left: rem-calc(32); |
| 11 | } |
Explanation (EN)
A single class name at the call site, with composition handled in the stylesheet. The element's styling is expressed in one place and the JSX stays clean.
Objašnjenje (HR)
Jedno ime klase na mjestu poziva, dok je kompozicija rijesena u stylesheetu. Stiliziranje elementa je izrazeno na jednom mjestu, a JSX ostaje cist.
Notes (EN)
On this PR the reviewer asked 'Can this be single class?' and the author chose to keep them split, which is a valid call when the offset is conceptually a separate, potentially-reusable concern. The rule is about the default preference, not an absolute.
Bilješke (HR)
Na ovom PR-u recenzent je pitao 'Moze li ovo biti jedna klasa?', a autor je odlucio zadrzati ih odvojeno, sto je valjana odluka kad je offset zasebna, potencijalno ponovno iskoristiva briga. Pravilo govori o zadanoj preferenciji, ne o apsolutu.
Exceptions / Tradeoffs (EN)
Keep classes separate when one of them is applied conditionally (e.g. only when a flag is set) or is reused independently on other elements — that is exactly when cx() earns its place.
Iznimke / Tradeoffi (HR)
Drzite klase odvojeno kada se jedna primjenjuje uvjetno (npr. samo kad je zastavica postavljena) ili se neovisno koristi na drugim elementima — tada cx() ima smisla.