Rules Hub

Coding Rules Library

← Back to all rules

Rule priority, scope & exceptions

Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).

PriorityP1 — maintainability, architecture, long-term qualityScopeUniversal — language-agnostic, broadly applicable

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

frontend ruleP1universalStack: css

responsivecssdevice-detectionssr

Use CSS responsive utilities, not JS device detection

Handle show/hide-by-breakpoint with CSS classes rather than react-device-detect, so orientation changes and resizes are handled and SSR stays correct.

PR: frontpage-web · org-mining-hist-2026-06Created: Jun 18, 2026

Bad example

Old codetsx

1	`import { isTablet } from 'react-device-detect';`
2	`const maxLinks = isTablet ? 3 : 4;`

Explanation (EN)

Objašnjenje (HR)

Good example

New codetsx

1	`{links.map((link, i) => (`
2	`<Item key={i} className={i >= 3 ? 'hide-for-large' : ''} />`
3	`))}`

Explanation (EN)

Objašnjenje (HR)

Login required