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).
Prefer CSS over JS-injected styles to avoid bundle bloat
Don't ship JavaScript whose only purpose is to apply styles — it grows the bundle and adds runtime work. Use CSS/SCSS unless the target is genuinely unreachable, and first try to make it reachable.
Bad example
| 1 | // styles.ts — shipped just to apply styling at runtime |
| 2 | export function applyWidgetStyles() { |
| 3 | const style = document.createElement('style'); |
| 4 | style.textContent = ` |
| 5 | .widget { padding: 16px; border-radius: 8px; } |
| 6 | `; |
| 7 | document.head.appendChild(style); |
| 8 | } |
| 9 | applyWidgetStyles(); |
Explanation (EN)
A JS module exists solely to inject CSS at runtime. It inflates the bundle and does work on the client that a static stylesheet would do for free. This is a workaround that should be a last resort, not the default.
Objašnjenje (HR)
JS modul postoji isključivo da bi ubrizgao CSS pri izvođenju. To napuhuje bundle i radi posao na klijentu koji bi statički stylesheet odradio besplatno. To je zaobilazno rješenje koje bi trebalo biti zadnja opcija, a ne zadano.
Good example
| 1 | /* styles.scss — styling stays declarative in CSS */ |
| 2 | .widget { |
| 3 | padding: 16px; |
| 4 | border-radius: 8px; |
| 5 | } |
Explanation (EN)
Styling lives in a stylesheet: zero added JS, no runtime injection, smaller bundle. If the element seems unreachable from CSS (e.g. inside shadow DOM), first check for a supported way to make it reachable before resorting to JS.
Objašnjenje (HR)
Stiliziranje živi u stylesheetu: nula dodatnog JS-a, bez ubrizgavanja pri izvođenju, manji bundle. Ako se element čini nedostupnim iz CSS-a (npr. unutar shadow DOM-a), prvo provjeri postoji li podržan način da ga učiniš dostupnim prije nego posegneš za JS-om.
Notes (EN)
Before adding JS styling, verify whether the encapsulation boundary (e.g. shadow DOM) can be disabled or opted out of via a supported flag/option.
Bilješke (HR)
Prije dodavanja JS stiliziranja, provjeri može li se granica enkapsulacije (npr. shadow DOM) onemogućiti ili isključiti putem podržane zastavice/opcije.
Exceptions / Tradeoffs (EN)
Acceptable when the target is genuinely unreachable from CSS and cannot be made reachable (e.g. a closed third-party shadow DOM with no configuration option), or when styles must be computed dynamically at runtime from values unknown at build time.
Iznimke / Tradeoffi (HR)
Prihvatljivo kada je cilj uistinu nedostupan iz CSS-a i ne može se učiniti dostupnim (npr. zatvoreni third-party shadow DOM bez opcije konfiguracije), ili kada se stilovi moraju računati dinamički pri izvođenju iz vrijednosti nepoznatih u trenutku buildanja.