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).

PriorityP2 — style, consistency, readabilityScopeUniversal — language-agnostic, broadly applicable

Exceptions / tradeoffs (EN)Iznimke / tradeoffi (HR)

frontend ruleP2universalStack: general

responsivebreakpointsconstantsconsistencymagic-numbers

Reference a single shared breakpoint definition rather than inlining magic pixel values for responsive checks.

PR: startsiden/hegnar-zephr-components#876Created: Jun 17, 2026

Old codets

1	`const isMobile = () => typeof window !== 'undefined' && window.innerWidth < 768;`

Explanation (EN)

An inline 768 can disagree with the breakpoint used elsewhere (and with the CSS), causing the JS and CSS notions of 'mobile' to diverge.

Objašnjenje (HR)

Ubaceni 768 se moze razlikovati od breakpointa koristenog drugdje (i od CSS-a), pa se JS i CSS pojam 'mobilnog' razilaze.

New codets

1	`import { BREAKPOINTS } from 'styles/settings/breakpoints';`
2
3	`const isMobile = () => window.innerWidth < BREAKPOINTS.mobile;`

Explanation (EN)

A single source of truth for breakpoints keeps responsive logic consistent between JS and SCSS and makes changes one-line.

Objašnjenje (HR)

Jedan izvor istine za breakpointe cuva responzivnu logiku konzistentnom izmedu JS-a i SCSS-a i cini promjene jednom linijom.

Confirm the value matches the breakpoint already agreed on for the product (the review flagged 768 vs an existing 640).

Provjeri da vrijednost odgovara breakpointu vec dogovorenom za proizvod (review je upozorio na 768 nasuprot postojecih 640).