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).
Match CSS shorthand scope to the property being overridden
Reset a property with the same axis-specific shorthand it was set with, not a broader one that silently resets unrelated properties too.
Bad example
| 1 | .track { |
| 2 | position: absolute; |
| 3 | inset-block: -100%; |
| 4 | } |
| 5 |
|
| 6 | // intent: only undo the inset-block override above |
| 7 | .track:has(.pinned-by-third-party) { |
| 8 | inset: auto; // also resets inset-inline (left/right), which was never set here |
| 9 | } |
Explanation (EN)
`inset: auto` doesn't just undo the `inset-block: -100%` set above — it also resets `inset-inline` (left/right), a pair of properties this rule never touched. If anything upstream relies on left/right being unset here, this silently breaks it.
Objašnjenje (HR)
`inset: auto` ne poništava samo `inset-block: -100%` postavljen iznad — resetira i `inset-inline` (left/right), par svojstava koje ovo pravilo uopće nije diralo. Ako se nešto ranije oslanja na to da left/right ovdje ostanu nepostavljeni, ovo to tiho pokvari.
Good example
| 1 | .track { |
| 2 | position: absolute; |
| 3 | inset-block: -100%; |
| 4 | } |
| 5 |
|
| 6 | // intent: only undo the inset-block override above |
| 7 | .track:has(.pinned-by-third-party) { |
| 8 | inset-block: auto; // resets exactly the property that was overridden |
| 9 | } |
Explanation (EN)
Using `inset-block: auto` mirrors the scope of the original `inset-block: -100%`, so the override only touches the axis it means to touch and leaves `inset-inline` untouched.
Objašnjenje (HR)
Korištenjem `inset-block: auto` opseg override-a odgovara opsegu originalnog `inset-block: -100%`, pa se dira samo os koju je namjera dirati, a `inset-inline` ostaje netaknut.
Notes (EN)
CSS shorthand properties like `inset`, `margin`, `padding`, `border`, `background`, `font`, `flex`, `grid`, and `transition` each expand into several longhands. When a later rule needs to undo or override only part of what an earlier rule set, reach for the shorthand that matches that same scope — otherwise the override quietly resets sibling properties that were never touched by the original rule, which is easy to miss in review and can break unrelated layout behavior.
Bilješke (HR)
CSS skraćeni zapisi (shorthand) poput `inset`, `margin`, `padding`, `border`, `background`, `font`, `flex`, `grid` i `transition` interno se šire na više pojedinačnih (longhand) svojstava. Kad kasnije pravilo treba poništiti ili prepisati samo dio onoga što je postavilo ranije pravilo, treba posegnuti za shorthandom istog opsega — u suprotnom se override tiho resetira i susjedna svojstva koja originalno pravilo uopće nije diralo, što je lako previdjeti u reviewu i može pokvariti nepovezano ponašanje layouta.
Exceptions / Tradeoffs (EN)
If resetting all the sibling longhands really is the intent (e.g. defensively clearing positioning entirely because a third-party stylesheet may set any of them), the broader shorthand is fine — but leave a comment explaining that it's intentional, since it looks like a mistake otherwise.
Iznimke / Tradeoffi (HR)
Ako je namjera stvarno resetirati sve susjedne longhand vrijednosti (npr. obrambeno očistiti pozicioniranje u potpunosti jer third-party stylesheet može postaviti bilo koju od njih), širi shorthand je u redu — ali treba ostaviti komentar da je to namjerno, jer inače izgleda kao greška.