Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Avoid unconditional extra requests for small feature stylesheets
When adding a small feature stylesheet to a page that already has a CSS build entry, use that entry if it bundles the styles appropriately. If a separate resource is justified, load it only where the feature needs it.
Bad example
| 1 | import './site.css'; |
| 2 |
|
| 3 | const featureStyles = document.createElement('link'); |
| 4 | featureStyles.rel = 'stylesheet'; |
| 5 | featureStyles.href = '/styles/notice-panel.css'; |
| 6 | document.head.append(featureStyles); |
Explanation (EN)
This existing page entry adds a separate stylesheet request on every visit, even when the small panel styles can join the page CSS output or the panel is absent.
Objašnjenje (HR)
Postojeći ulaz stranice dodaje zaseban zahtjev za CSS pri svakom posjetu, iako se mali stilovi panela mogu uključiti u CSS stranice ili panel nije prikazan.
Good example
| 1 | import './site.css'; |
| 2 | import './notice-panel.css'; |
Explanation (EN)
With a build pipeline verified to combine these static CSS imports, both source files contribute to the existing page stylesheet without a manually appended request. Separate source files keep their ownership.
Objašnjenje (HR)
Uz potvrđenu podršku build procesa za spajanje ovih statičkih CSS importa, obje izvorne datoteke ulaze u postojeći CSS stranice bez ručno dodanog zahtjeva. Izvorni stilovi ostaju odvojeni prema svojoj namjeni.
Notes (EN)
Apply when reviewing a newly added unconditional stylesheet link or equivalent loader alongside an existing CSS entry. Inspect the build configuration and emitted assets before claiming that an import removes a request; an unprocessed browser CSS @import still fetches another resource. Preserve cascade order and have required styles ready before rendering the feature. For separately loaded optional styles, use a loading boundary that survives template replacement and covers every place the feature can appear.
Bilješke (HR)
Primijeni pri pregledu novog bezuvjetnog linka na CSS ili ekvivalentnog učitavanja uz postojeći CSS ulaz. Provjeri konfiguraciju i izlazne datoteke builda prije tvrdnje da import uklanja zahtjev; CSS @import koji obrađuje preglednik i dalje dohvaća drugi resurs. Sačuvaj redoslijed kaskade i osiguraj potrebne stilove prije prikaza funkcionalnosti. Zasebne opcionalne stilove učitavaj kroz granicu koja opstaje nakon zamjene predloška i pokriva sva mjesta na kojima se funkcionalnost pojavljuje.
Exceptions / Tradeoffs (EN)
Do not combine all application CSS just to minimize request count. Preserve intentional route or component CSS splitting, large optional styles, independently cached vendor resources, shadow-root styles and framework-managed loading when those boundaries have a concrete benefit. A separate request is acceptable when the required resource cannot be bundled or reliable conditional loading is unavailable; document the constraint and verify the tradeoff.
Iznimke / Tradeoffi (HR)
Nemoj spajati sav CSS aplikacije samo radi najmanjeg broja zahtjeva. Zadrži namjerno odvajanje CSS-a po rutama ili komponentama, velike opcionalne stilove, neovisno predmemorirane vanjske resurse, stilove unutar shadow rootova i učitavanje kojim upravlja framework kada te granice imaju konkretnu korist. Zaseban zahtjev prihvatljiv je kada se potreban resurs ne može uključiti u build ili nema pouzdanog uvjetnog učitavanja; zabilježi ograničenje i provjeri kompromis.