Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: css
responsivedead-codescsscleanup
Drop mobile/desktop styles from a component that only renders at one breakpoint
When a separate component already handles the other breakpoint, remove the unused isMobile branches and breakpoint media queries from this one instead of leaving dead responsive code.
PR: hegnar-forum-web · org-mining-hist-2026-06Created: Jun 20, 2026
Bad example
Old codescss
| 1 | // DesktopRow is only ever rendered on desktop (MobileRow handles mobile), |
| 2 | // yet it still carries mobile-only styles that never apply. |
| 3 | .container .time { |
| 4 | margin-left: rem-calc(4); |
| 5 |
|
| 6 | @include media(0, 'md') { |
| 7 | flex-basis: 100%; |
| 8 | margin-left: 0; |
| 9 | } |
| 10 | } |
Explanation (EN)
An unreachable responsive branch adds misleading maintenance work.
Objašnjenje (HR)
Good example
New codescss
| 1 | // A dedicated mobile component renders the small-screen variant, so this |
| 2 | // desktop-only component keeps only the styles it actually uses. |
| 3 | .container .time { |
| 4 | margin-left: rem-calc(4); |
| 5 | } |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
Remove breakpoint branches only after proving the component never renders in that range across SSR, hydration, resizing, print and alternate consumers.
Exceptions / Tradeoffs (EN)
A desktop-named component is not proof of an exclusive runtime range. Shared or transitioning layouts may still need responsive rules.