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

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

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

frontend ruleP2universalStack: CSS

csscustom-propertiesscsstheming

Use CSS custom properties for values shared between CSS and JS

SCSS variables are build-time macros and cannot be read at runtime. For a value needed in CSS and also via the JS style prop, define a CSS custom property (var) so there is one source of truth.

PR: hegnar-components · org-mining-hist-2026-06Created: Jun 18, 2026

Bad example

Old codescss

1	`// SCSS only; the same color is then hard-coded again in JS`
2	`$accent: #3498db;`

Explanation (EN)

Objašnjenje (HR)

Good example

New codescss

1	`:root { --accent: #3498db; }`
2	`/* CSS: color: var(--accent); JS: style={{ color: 'var(--accent)' }} */`

Explanation (EN)

Objašnjenje (HR)

Login required