Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Omit a media type unless the output medium matters
When a responsive rule is intended for every medium matching its feature condition, omit screen and write the condition alone. Keep an explicit media type when excluding print or targeting another medium is intentional.
Bad example
| 1 | export const panelStyles = ` |
| 2 | @media screen and (width <= 48rem) { |
| 3 | .panel { padding: 12px; } |
| 4 | } |
| 5 | `; |
Explanation (EN)
This CSS-in-JS stylesheet restricts a shared compact layout to screens even though the layout is intended to apply to print as well.
Objašnjenje (HR)
Ovaj CSS-in-JS stil ograničava zajednički kompaktni raspored na zaslone iako se raspored treba primjenjivati i pri ispisu.
Good example
| 1 | export const panelStyles = ` |
| 2 | @media (width <= 48rem) { |
| 3 | .panel { padding: 12px; } |
| 4 | } |
| 5 | `; |
Explanation (EN)
The feature condition expresses the shared layout requirement without an unnecessary restriction to one output medium.
Objašnjenje (HR)
Uvjet značajke izražava zajednički zahtjev rasporeda bez nepotrebnog ograničenja na jedan izlazni medij.
Notes (EN)
Applies to CSS @media rules and equivalent CSS-in-JS queries when reviewing a screen qualifier that was added by habit. Verify the intended print and other media behavior first. The examples assume the same compact layout is wanted for every matching medium. Removing screen broadens applicability; it is not a universally behavior-preserving text cleanup.
Bilješke (HR)
Primjenjuje se na CSS @media pravila i odgovarajuće CSS-in-JS upite kada je oznaka screen dodana po navici. Prvo provjeri namjeravano ponašanje pri ispisu i na drugim medijima. Primjeri pretpostavljaju isti kompaktni raspored na svim medijima koji zadovoljavaju uvjet. Uklanjanje oznake screen širi primjenjivost i nije uvijek tekstualna promjena koja čuva ponašanje.
Exceptions / Tradeoffs (EN)
Keep screen when the declarations must not affect print, and keep print for print-only styles. Preserve media types required by query modifiers such as not or only; review the whole expression before simplifying it. An explicit print stylesheet is not required for a screen-only restriction to be meaningful.
Iznimke / Tradeoffi (HR)
Zadrži screen kada deklaracije ne smiju utjecati na ispis, a print za stilove namijenjene samo ispisu. Zadrži vrste medija potrebne uz modifikatore upita poput not ili only; prije pojednostavljenja provjeri cijeli izraz. Zasebna datoteka sa stilovima za ispis nije preduvjet da ograničenje samo na zaslone ima smisla.