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

csssvgsafaricross-browsertransform

Rotate icons with a CSS class on the parent, not an SVG transform prop

Safari mishandles transform applied directly to an <svg> (especially via a prop). Toggle a class and rotate the element in CSS for cross-browser correctness.

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

Bad example

Old codetsx

1	`<ChevronDown transform="rotate(180)" /> // Safari renders this wrong`

Explanation (EN)

Objašnjenje (HR)

Good example

New codetsx

1	`<ChevronDown className={clsx(styles.chevron, isOpen && styles.rotated)} />`
2	`// .rotated { transform: rotate(180deg); }`

Explanation (EN)

Objašnjenje (HR)

Login required