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).
Write responsive CSS mobile-first using min-width over max-width queries
Base styles target the smallest viewport; layer larger-screen overrides with min-width queries instead of overriding desktop defaults with max-width.
Bad example
| 1 | .panel { |
| 2 | display: grid; |
| 3 | grid-template-columns: 1fr 1fr 1fr; |
| 4 |
|
| 5 | @media (max-width: 768px) { |
| 6 | grid-template-columns: 1fr; |
| 7 | } |
| 8 | } |
Explanation (EN)
Desktop-first: the base rule assumes a wide screen and a max-width query strips it back down for small screens. Overrides accumulate as the layout grows and the smallest, most constrained device pays the cost of undoing desktop assumptions.
Objašnjenje (HR)
Pristup 'prvo desktop': osnovno pravilo pretpostavlja siroki ekran, a max-width upit ga vraca na manje ekrane. Nadjacavanja se gomilaju kako se layout razvija, a najmanji, najogranceniji uredaj snosi trosak ponistavanja desktop pretpostavki.
Good example
| 1 | .panel { |
| 2 | display: grid; |
| 3 | grid-template-columns: 1fr; |
| 4 |
|
| 5 | @media (min-width: 768px) { |
| 6 | grid-template-columns: 1fr 1fr 1fr; |
| 7 | } |
| 8 | } |
Explanation (EN)
Mobile-first: the base rule is the simplest single-column layout and min-width queries progressively enhance it for larger screens. Each breakpoint adds rather than undoes, which scales better and keeps the small-screen path minimal.
Objašnjenje (HR)
Pristup 'prvo mobilni': osnovno pravilo je najjednostavniji layout s jednim stupcem, a min-width upiti ga postupno nadograduju za vece ekrane. Svaka prijelomna tocka dodaje umjesto da ponistava, sto se bolje skalira i drzi put za male ekrane minimalnim.
Notes (EN)
Applies equally to @media and @container queries.
Bilješke (HR)
Jednako vrijedi za @media i @container upite.
Exceptions / Tradeoffs (EN)
Acceptable to use max-width for a narrowly-scoped one-off tweak that only affects a single small breakpoint, when refactoring to mobile-first would touch unrelated rules.
Iznimke / Tradeoffi (HR)
Prihvatljivo je koristiti max-width za usko ogranicenu jednokratnu prilagodbu koja utjece samo na jednu malu prijelomnu tocku, kada bi refaktoriranje na mobile-first diralo nepovezana pravila.