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).
Parse CSS strings via the CSSOM instead of manual string handling
Let the browser parse inline-style strings by assigning to style.cssText and reading with getPropertyValue, rather than splitting/regex-ing the string yourself.
Bad example
| 1 | function getHeightFromStyle(style: string | null) { |
| 2 | // brittle manual parsing |
| 3 | const match = (style || '').match(/height:\s*([^;]+)/); |
| 4 | return match ? match[1].trim() : ''; |
| 5 | } |
Explanation (EN)
Manual regex/split parsing of CSS is fragile: it breaks on casing, whitespace, shorthand, comments, and duplicate declarations, and reimplements logic the browser already has.
Objašnjenje (HR)
Ručno parsiranje CSS-a regexom ili splitom je krhko: puca na velikim/malim slovima, razmacima, skraćenicama, komentarima i ponovljenim deklaracijama te ponovno implementira logiku koju preglednik već ima.
Good example
| 1 | const styleParser = document.createElement('div'); |
| 2 | function getHeightFromStyle(style: string | null) { |
| 3 | styleParser.style.cssText = style || ''; |
| 4 | return styleParser.style.getPropertyValue('height').trim(); |
| 5 | } |
Explanation (EN)
Assigning the string to cssText makes the browser parse it correctly, and getPropertyValue returns the normalized value, eliminating an entire class of parsing bugs.
Objašnjenje (HR)
Dodjeljivanjem stringa u cssText preglednik ga ispravno parsira, a getPropertyValue vraća normaliziranu vrijednost, čime se uklanja čitava klasa grešaka u parsiranju.
Notes (EN)
Reuse a single throwaway element as the parser instead of creating one per call.
Bilješke (HR)
Ponovno koristi jedan pomoćni element kao parser umjesto da ga stvaraš pri svakom pozivu.