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).
Group CSS selector logic with :is()/:not() instead of repeating conditions per element
Use :is() to factor a shared list and a single trailing :not() for exclusions, rather than nesting &:not(...) under every element selector.
Bad example
| 1 | a:not(.preflight *), |
| 2 | p:not(.preflight *), |
| 3 | span:not(.preflight *), |
| 4 | h1:not(.preflight *), |
| 5 | h2:not(.preflight *) { |
| 6 | -webkit-font-smoothing: antialiased; |
| 7 | } |
Explanation (EN)
The :not(.preflight *) condition is duplicated on every element. Adding a new exclusion or another element means editing every line, and the intent (one rule for a group, minus a region) is buried in repetition.
Objašnjenje (HR)
Uvjet :not(.preflight *) ponavlja se na svakom elementu. Dodavanje nove iznimke ili jos jednog elementa znaci uredivanje svake linije, a namjera (jedno pravilo za grupu, minus jedna regija) izgubljena je u ponavljanju.
Good example
| 1 | :is(a, p, span, h1, h2):not(.preflight, .preflight *) { |
| 2 | -webkit-font-smoothing: antialiased; |
| 3 | } |
Explanation (EN)
:is() collects the element list once and a single :not() expresses the exclusion once. The selector reads as 'these elements, except inside .preflight', and adding an element or an exclusion is a one-token change.
Objašnjenje (HR)
:is() jednom skuplja popis elemenata, a jedan :not() jednom izrazava iznimku. Selektor se cita kao 'ovi elementi, osim unutar .preflight', a dodavanje elementa ili iznimke je promjena od jednog tokena.
Notes (EN)
Be aware that :is() takes the highest specificity of its arguments, whereas a plain comma-separated list does not — usually fine, but check when specificity matters.
Bilješke (HR)
Imaj na umu da :is() preuzima najvecu specificnost svojih argumenata, za razliku od obicnog popisa odvojenog zarezima — obicno nije problem, ali provjeri kad je specificnost vazna.