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).
Avoid including the same mixin body under multiple breakpoint conditions
Including one mixin inside several separate media/container queries duplicates its whole rule body in the compiled CSS for each one.
Bad example
| 1 | @mixin stacked-layout { flex-direction: column; gap: 16px; /* ...many more rules... */ } |
| 2 |
|
| 3 | @container c (max-width: 500px) { @include stacked-layout; } |
| 4 | &.withA { |
| 5 | @container c (max-width: 600px) { @include stacked-layout; } |
| 6 | } |
| 7 | &.withB { |
| 8 | @container c (max-width: 700px) { @include stacked-layout; } |
| 9 | } |
Explanation (EN)
The full `stacked-layout` body is emitted three times in the compiled CSS, once per breakpoint variant, even though the rules are identical each time.
Objašnjenje (HR)
Cijelo tijelo `stacked-layout` ispisuje se tri puta u kompajliranom CSS-u, jednom za svaku varijantu praga, iako su pravila svaki put identična.
Good example
| 1 | // Only worth it when the duplication is large/frequent; otherwise document the tradeoff and keep it simple. |
| 2 | .wrapper { container: c / inline-size; } |
| 3 | .inner { |
| 4 | @container c style(--stacked: 1) { |
| 5 | flex-direction: column; |
| 6 | gap: 16px; |
| 7 | } |
| 8 | } |
| 9 | .inner.withA { --stacked-breakpoint: 600px; } |
Explanation (EN)
Where it's worth the added structure, drive the single rule body from one dynamic signal (e.g. a CSS custom property flipped per breakpoint via a style query) instead of repeating the whole block per variant.
Objašnjenje (HR)
Kad se dodatna struktura isplati, jedno tijelo pravila pokreni jednim dinamičkim signalom (npr. CSS custom property koji se mijenja po pragu preko style querya), umjesto da ponavljaš cijeli blok za svaku varijantu.
Notes (EN)
This is a nitpick, not always worth fixing: if the byte savings are small and the alternative (e.g. CSS custom properties/style queries plus an extra wrapper element) adds real complexity, repeating the include can be the pragmatic choice. Flag it, weigh the tradeoff, don't reflexively 'fix' it.
Bilješke (HR)
Ovo je nitpick, ne isplati se uvijek popravljati: ako je ušteda u bajtovima mala, a alternativa (npr. CSS custom properties/style queries plus dodatni wrapper element) unosi stvarnu kompleksnost, ponavljanje include-a može biti pragmatičan izbor. Označi to, odvagni trade-off, ne 'popravljaj' refleksno.
Exceptions / Tradeoffs (EN)
Skip consolidating when the number of variants is small (2-3), gzip already collapses most of the duplication in transferred bytes, or the fix requires structural changes (extra DOM nodes, new CSS variables) disproportionate to the savings.
Iznimke / Tradeoffi (HR)
Preskoči konsolidaciju kad je broj varijanti mali (2-3), kad gzip već svede duplikaciju u prenesenim bajtovima na minimum, ili kad popravak zahtijeva strukturne promjene (dodatni DOM čvorovi, nove CSS varijable) nesrazmjerne uštedi.