Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Subtract 1px from the breakpoint when using max-width
Make breakpoint boundaries intentionally inclusive or exclusive, including fractional viewport widths; do not blindly subtract one pixel.
Bad example
| 1 | @media (max-width: 768px) { /* overlaps with the 768px min-width side */ } |
Explanation (EN)
Two inclusive queries at one boundary can apply conflicting styles at that exact width.
Objašnjenje (HR)
Good example
| 1 | @media (width < 768px) { /* smaller layout */ } |
| 2 | @media (width >= 768px) { /* larger layout */ } |
Explanation (EN)
Supported range syntax makes the two intervals disjoint and exhaustive, including fractional widths.
Objašnjenje (HR)
Notes (EN)
Define whether adjacent breakpoint ranges include or exclude their boundary, accounting for fractional CSS viewport widths and the project's helper semantics.
Exceptions / Tradeoffs (EN)
max-width:767px leaves a gap below min-width:768px for fractional widths. Use range syntax where supported or the configured framework's consistent boundary strategy; overlapping queries may be deliberate.