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).
Use string literals for static JSX attribute values, numbers only when computing
Write static markup attribute values (e.g. SVG width/height) as string literals; only use a numeric JS expression when the value is actually derived from a computation.
Bad example
| 1 | <svg width={58} height={58} viewBox="0 0 58 58"> |
| 2 | <use href={`${sprite}#avatar`} /> |
| 3 | </svg> |
Explanation (EN)
The numeric expressions {58} imply the value is computed or dynamic, but it is just a constant. The braces add noise and break visual consistency with the other plain string attributes like viewBox.
Objašnjenje (HR)
Numerički izrazi {58} sugeriraju da je vrijednost izračunata ili dinamična, a zapravo je samo konstanta. Vitičaste zagrade dodaju šum i narušavaju vizualnu dosljednost s ostalim atributima koji su obični stringovi, poput viewBox.
Good example
| 1 | <svg width="58" height="58" viewBox="0 0 58 58"> |
| 2 | <use href={`${sprite}#avatar`} /> |
| 3 | </svg> |
| 4 |
|
| 5 | // Use an expression only when the value is genuinely dynamic: |
| 6 | <svg width={size} height={size} /> |
Explanation (EN)
Static dimensions are plain strings, matching the rest of the markup and signalling that nothing is computed. A JS expression is reserved for the dynamic case where the size comes from a variable.
Objašnjenje (HR)
Statičke dimenzije su obični stringovi, usklađeni s ostatkom markupa i signaliziraju da se ništa ne računa. JS izraz je rezerviran za dinamički slučaj kad veličina dolazi iz varijable.