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).
Update dependent selectors when renaming or prefixing a class
Renaming or prefixing a CSS class requires updating every selector that references it (descendant, attribute, :has(), state hooks); otherwise those rules silently stop matching.
Bad example
| 1 | .panel { /* ... */ } |
| 2 | .layout:has(.search[data-open]) { z-index: 10; } |
| 3 |
|
| 4 | /* Class renamed to .zp-search, but the :has selector still targets .search */ |
| 5 | .zp-search { /* ... */ } |
Explanation (EN)
The :has(.search[data-open]) hook no longer matches because the element now uses .zp-search, so the conditional z-index never applies — a silent regression.
Objašnjenje (HR)
Selektor :has(.search[data-open]) vise ne odgovara jer element sad koristi .zp-search, pa se uvjetni z-index nikad ne primijeni — tiha regresija.
Good example
| 1 | .zp-search { /* ... */ } |
| 2 | .layout:has(.zp-search[data-open]) { z-index: 10; } |
Explanation (EN)
The selector is updated to the new class name, so the state-based rule keeps working after the rename.
Objašnjenje (HR)
Selektor je azuriran na novo ime klase, pa pravilo temeljeno na stanju i dalje radi nakon preimenovanja.
Notes (EN)
Grep for the old class name across the codebase (including string-built selectors and attribute selectors) before considering a rename complete.
Bilješke (HR)
Pretrazi staro ime klase kroz cijeli kod (ukljucujuci selektore graden iz stringova i atributne selektore) prije nego sto preimenovanje smatras gotovim.