приложения
Вопрос — как переменные цветов лучше именовать?
Возьмём простой пример. Цвет основного текста. Первый подход — называть переменные по их цвету, типа так:
--gray-light: #f0f0f0;
--gray-dark: #333;
затем придётся описывать стили как-то так:
.theme-dark { color: var(--gray-dark); }
.theme-light { color: var(--gray-light); }
Тут минус в том, что для всех компонентов придётся отдельно описывать стили для тёмной и светлой темы
Есть другой подход. Что-то вроде такого:
--base-color: #333;
body { color: var(--base-color); }
.theme-dark { --base-color: #f0f0f0; }
При таком подходе во всех компонентах мы описываем цвета только один раз и глобально их переопределяем для каждой темы.
Минус этого подхода мне кажется в том, что по названию переменных (base-color) трудно понять, че это за цвет и какое у него предназначение и потому трудновато использовать
основной цвет темы. Для темы нужна еще своя дока
Обсуждают сегодня