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).
Verify a CSS rule's reachability before removing or trusting it as dead code
Don't assume an entire rule block is dead because one property in it looks unreachable — trace scoping/ancestry or check computed styles first.
Bad example
| 1 | // Removed during cleanup, assumed fully dead: |
| 2 | .wrapper { |
| 3 | @container (max-width: 1180px) { |
| 4 | justify-content: center; // no display:flex nearby -> looks dead |
| 5 | margin-top: 40px; // actually live and load-bearing, removed by accident |
| 6 | margin-bottom: 32px; |
| 7 | } |
| 8 | } |
Explanation (EN)
One property (`justify-content`) is correctly identified as dead, but the whole block gets deleted without checking whether the other properties (the margins) were actually being applied, causing a visible spacing regression.
Objašnjenje (HR)
Jedno svojstvo (`justify-content`) ispravno je prepoznato kao mrtvo, ali se cijeli blok briše bez provjere jesu li ostala svojstva (margine) doista bila primijenjena, što uzrokuje vidljivu regresiju u razmacima.
Good example
| 1 | // Before removing: check computed styles at a representative width, |
| 2 | // or confirm .wrapper actually sits inside an element with `container-type` |
| 3 | // matching this unnamed @container query. |
| 4 | .wrapper { |
| 5 | @container (max-width: 1180px) { |
| 6 | margin-top: 40px; // confirmed live via devtools computed styles |
| 7 | margin-bottom: 32px; |
| 8 | } |
| 9 | // justify-content removed after confirming .wrapper has no display:flex |
| 10 | } |
Explanation (EN)
Each property is verified independently (via computed styles or by tracing the container ancestry) before deciding whether it's safe to remove, rather than treating the whole block as one unit.
Objašnjenje (HR)
Svako se svojstvo neovisno provjerava (preko computed stilova ili praćenjem hijerarhije kontejnera) prije nego se odluči je li sigurno ukloniti ga, umjesto da se cijeli blok tretira kao jedna cjelina.
Notes (EN)
This cuts both ways: don't remove a block just because part of it looks suspicious without checking the rest, and don't assume a block is live just because it compiles and looks reasonable — for scoped mechanisms like container queries, confirm the ancestor actually has the matching container-type before trusting the rule fires at all.
Bilješke (HR)
Ovo vrijedi u oba smjera: ne brišite blok samo zato što dio njega izgleda sumnjivo bez provjere ostatka, i ne pretpostavljajte da je blok živ samo zato što se kompajlira i izgleda razumno — kod scoped mehanizama poput container queryja, provjerite da predak stvarno ima odgovarajući container-type prije nego povjerujete da se pravilo uopće ikad aktivira.
Exceptions / Tradeoffs (EN)
For small, low-risk components you can skip a full trace and rely on a quick visual diff/manual check instead — the point is doing some verification, not always a full ancestry audit.
Iznimke / Tradeoffi (HR)
Kod malih, niskorizičnih komponenti možete preskočiti puni trag i osloniti se na brzu vizualnu usporedbu/ručnu provjeru — poanta je napraviti neku verifikaciju, ne uvijek punu reviziju predaka.