css/rem-helper

Dlaczego

Sizes in rem follow the font size a person sets in the browser; sizes in px ignore it. This project already has a helper that converts the designer's px values to rem, so a raw px value is both less accessible and inconsistent with the rest of the code. The rule runs only in projects where such a helper was detected.

Poprawka

Wrap the value in the project's helper: rem-calc(16px) instead of 16px (the helper is the px-to-rem function, defined in the project's Sass functions). Hairlines (1px borders) and 0 stay as they are.

Przykłady

// bad
.card { padding: 24px; font-size: 18px; }
// good
.card { padding: rem-calc(24); font-size: rem-calc(18); }

Źródła

• WCAG 2.2, Understanding SC 1.4.4 Resize Text
• MDN, CSS length units (rem)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain css/rem-helper