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).
Be deliberate about whitespace between inline JSX/HTML elements
Whitespace and text nodes between inline elements are rendered and can shift layout; preserve intentional spacing (e.g. {' '} in JSX) and avoid introducing stray spaces.
Bad example
| 1 | // reformatting collapsed the intentional space between the icon and the label |
| 2 | <button> |
| 3 | <svg width="16" height="16"><use href={`${sprite}#user`} /></svg> |
| 4 | <span>Profile</span> |
| 5 | </button> |
| 6 | // rendered: icon and text now touch, because the newline-only gap is not a space |
Explanation (EN)
JSX collapses a newline-only gap between elements to nothing, so the visible space that used to separate the icon and label disappears. A reformat silently changed the rendered layout.
Objašnjenje (HR)
JSX gap koji čine samo prelasci u novi red sažima u ništa, pa vidljivi razmak koji je prije razdvajao ikonu i oznaku nestaje. Preformatiranje je tiho promijenilo prikazani izgled.
Good example
| 1 | // make the intended space explicit so formatting can't drop it |
| 2 | <button> |
| 3 | <svg width="16" height="16"><use href={`${sprite}#user`} /></svg>{' '} |
| 4 | <span>Profile</span> |
| 5 | </button> |
Explanation (EN)
The explicit {' '} encodes the separating space as real content, so the gap survives reformatting and the layout stays stable. Conversely, when you don't want a space, ensure there's no stray text node.
Objašnjenje (HR)
Eksplicitni {' '} kodira razmak kao stvarni sadržaj, pa razmak preživi preformatiranje i izgled ostaje stabilan. Obrnuto, kad razmak ne želiš, pobrini se da nema zalutalog tekstualnog čvora.
Notes (EN)
Prefer controlling spacing with CSS (gap, margin) where possible; reserve {' '} for genuine inline text-flow spacing.
Bilješke (HR)
Gdje je moguće, razmak radije kontroliraj CSS-om (gap, margin); {' '} čuvaj za stvarni razmak u toku inline teksta.