CSS

`css/rem-helper`

Font sizes and spacing use the project's px-to-rem helper (its rem function), not raw px.

Inside a project, the report and explain replace the example in braces with your project's own helper.

Why

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.

Fix

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.

Examples

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

Sources

Facts

Id: css/rem-helper
Severity: minor
Check: static checked in the source by audit
Applies to: scss less vue svelte astro
Needs the project helper: rem-function
Taught by the skill: fe-css-architecture CSS architecture and tokens
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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