CSS
css/no-magic-numbers
Offsets and spacing use the project's spacing scale or come from layout; hand-tuned one-off values such as top -7px are a finding.
drobnastatycznefe-css-architecture
Dlaczego
A value like top: -7px or padding: 3px 10px was tuned by eye for one font, one breakpoint and one piece of content. It breaks when any of them changes, nobody knows why it is that number, and the rhythm of the page drifts away from the design's scale. The check runs only in projects that have a spacing scale, and names the nearest step.
Poprawka
Use a step of the scale (var(--space-3)), or derive the value from what it depends on: calc(-1 * var(--space-1)), gap in a flex or grid parent instead of nudged margins, alignment (align-items, place-self) instead of offsets, em when it should follow the font. If a value truly is a one-off, say why in a comment with fs-ignore css/no-magic-numbers.
Przykłady
/* bad: the project defines --space-1 … --space-4 (4, 8, 12, 16 px) */
.badge { top: -7px; right: 13px; padding: 3px 10px; }
/* good */
.badge { top: calc(-1 * var(--space-1)); right: var(--space-3); padding: var(--space-1) var(--space-2); }Źródła
Fakty
- Identyfikator
css/no-magic-numbers- Waga
- drobna
- Sprawdzanie
- statyczne sprawdzane w kodzie źródłowym przez
audit - Dotyczy plików
project- Uczy jej skill
fe-css-architectureCSS architecture and tokens- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain css/no-magic-numbers