Является ли переоборудование пользовательских свойств CSS для типографии и расстояния между точками останова плохая прак ⇐ CSS

[Anonymous]

Я создаю систему дизайна, в которой все значения типографики и интервалов определяются как пользовательские свойства CSS (

Код: Выделить всё

--font-size-md

, --space-5 и т. д.).
На меньших точках останова (800 пикселей и 400 пикселей) я переопределяю эти переменные, чтобы каждый токен “смещался вниз” на один уровень. Например, --font-size-lg становится тем, чем был --font-size-md, --space-7 становится тем, чем был --space-6, и так далее. Таким образом, мне не нужно переписывать стили компонентов — они просто наследуют новые значения токенов.
Вот упрощенная версия того, что я делаю (для ясности включены полные списки переменных):
:root {
/* Font sizes */
--font-size-xxs: 0.5rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--font-size-3xl: 2.5rem;

/* Line heights */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-loose: 1.75;

/* Font weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;

--font-primary: "Inter", sans-serif;
--font-logo: "Poppins", sans-serif;
}

@media screen and (max-width: 800px) {
body {
--font-size-xxs: 0.4375rem;
--font-size-xs: 0.5rem;
--font-size-sm: 0.75rem;
--font-size-md: 0.875rem;
--font-size-lg: 1rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
}
}

@media screen and (max-width: 400px) {
body {
--font-size-xxs: 0.375rem;
--font-size-xs: 0.4375rem;
--font-size-sm: 0.5rem;
--font-size-md: 0.75rem;
--font-size-lg: 0.875rem;
--font-size-xl: 1rem;
--font-size-2xl: 1.25rem;
--font-size-3xl: 1.5rem;
}
}

/* Spacing scale */
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 2rem;
--space-8: 2.5rem;
--space-9: 3rem;
--space-10: 3.5rem;
--space-11: 4rem;
--space-12: 6rem;
--space-13: 8rem;
--space-14: 10rem;
--space-15: 12rem;
--space-16: 14rem;
}

@media screen and (max-width: 800px) {
body {
--space-1: 0.25rem;
--space-2: 0.375rem;
--space-3: 0.5rem;
--space-4: 0.75rem;
--space-5: 1rem;
--space-6: 1.25rem;
--space-7: 1.5rem;
--space-8: 2rem;
--space-9: 2.5rem;
--space-10: 3rem;
--space-11: 3.5rem;
--space-12: 4rem;
--space-13: 6rem;
--space-14: 8rem;
--space-15: 10rem;
--space-16: 12rem;
}
}

@media screen and (max-width: 400px) {
body {
--space-1: 0.2rem;
--space-2: 0.25rem;
--space-3: 0.375rem;
--space-4: 0.5rem;
--space-5: 0.75rem;
--space-6: 1rem;
--space-7: 1.25rem;
--space-8: 1.5rem;
--space-9: 2rem;
--space-10: 2.5rem;
--space-11: 3rem;
--space-12: 3.5rem;
--space-13: 4rem;
--space-14: 6rem;
--space-15: 8rem;
--space-16: 10rem;
}
}
< /code>
Мои вопросы: < /p>

Этот подход (переоценка токенов в точках останова) считается плохой практикой
в архитектуре CSS? (Например, если у вас есть строгая система проекта
с определенными отзывчивыми шкалами)?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... kpoints-ba