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).
Prefer CSS media query range syntax over min-/max-width pairs
Use Media Queries Level 4 range syntax (@media (a <= width <= b), @media (width > $bp)) instead of (min-width: a) and (max-width: b) or min-width: #{$bp + 1px}; it's baseline-widely-available and reads clearer. In Sass, check the compiled output substitutes the breakpoint variables, and interpolate with #{} only if an older compiler mishandles them.
Bad example
| 1 | @media (min-width: $md) and (max-width: $xl) { ... } |
| 2 | @media (min-width: #{$bp + 1px}) { ... } |
Explanation (EN)
The min-/max-width pair and the +1px interpolation are verbose and easy to get off-by-one.
Objašnjenje (HR)
Par min-/max-width i +1px interpolacija su rječiti i lako se pogriješi za jedan piksel.
Good example
| 1 | @media ($md <= width <= $xl) { ... } |
| 2 | @media (width > $bp) { ... } |
Explanation (EN)
The range syntax states the interval directly and avoids off-by-one +1px math; verify Sass compiles the variables (e.g. to `768px <= width <= 1440px`).
Objašnjenje (HR)
Range syntax izravno navodi interval i izbjegava +1px off-by-one; provjeri da Sass kompajlira varijable (npr. u `768px <= width <= 1440px`).