Сбор CSS-токенов — это не дизайнерская прихоть и не «красота ради красоты». Это инженерная задача по нормализации визуальных решений и снижению операционных издержек фронтенда.
В этой статье разберём:
- что именно мы считаем CSS-токенами;
- как они реально выглядят в живых проектах;
- какие проблемы выявляет их сбор;
- и зачем автоматизировать этот процесс на уровне аудита.
Что такое CSS-токены в практическом смысле
Дизайн-токен — именованное решение, например значение цвета или отступа. Сбор повторяющихся значений CSS помогает найти кандидатов в токены, но само повторение ещё не делает значение токеном. В инвентаризацию входят:
- цвета (
#0d6efd,rgb(13,110,253)) - размеры шрифтов (
14px,1rem) - межстрочные интервалы
- отступы (
8px,16px,24px) - радиусы скруглений
- тени, z-index и т.д.
Учебный пример для интернет-магазина:
.button-primary {
background: #005bff;
border-radius: 6px;
}
.checkout-button {
background-color: #005bff;
border-radius: 8px;
}
У кнопок одинаковый цвет фона, но разные радиусы скругления. Перед объединением значений проверьте, предусмотрено ли это различие дизайном.
Типовые проблемы, которые вскрывает сбор токенов
1. Ложное разнообразие
Представим учебный пример аудита SaaS-проекта:
- 27 уникальных оттенков синего
- из них 19 отличались на 1–3 единицы RGB
Это классический симптом:
- ручной копипасты из Figma;
- отсутствия дизайн-контракта между командами;
- накопленного техдолга.
2. Отступы без системы
Пример из админки:
margin-bottom: 12px;
margin-bottom: 14px;
margin-bottom: 16px;
margin-bottom: 18px;
Выясните, почему используются четыре значения и оправданы ли различия их назначением. Шкала с шагом 4 или 8 — выбор дизайна, а не обязательное правило для каждого интерфейса.
Сбор токенов позволяет:
- увидеть распределение значений;
- выявить кластеры;
- принять управленческое решение: 8-pt grid, 4-pt grid или другая модель.
3. Типографический дрейф
Другой учебный пример — корпоративный портал со следующими значениями:
- 11 размеров шрифта
- 7 line-height
- 5 font-weight для body-текста
Группировка по назначению может выявить всего три типографические роли. Перед объединением остальных значений подтвердите, где и зачем они используются.
Как выглядит сбор CSS-токенов технически
На уровне механики всё достаточно прямолинейно:
- Загружаем страницу.
- Собираем доступные встроенные и внешние стили.
- Разбираем объявления.
- Группируем значения по типам:
- colors
- font-size
- spacing
- border-radius
- Считаем частотность.
Пример результата в JSON:
{
"colors": {
"#005bff": 143,
"#ffffff": 98,
"#f5f7fa": 34
},
"spacing": {
"8px": 76,
"16px": 112,
"24px": 41
}
}
Такие подсчёты дают материал для исследования. Одна частотность ещё не определяет назначение значения или приоритет изменения.
Почему ручной подход не масштабируется
На ранней стадии проекта можно «договориться словами». На стадии:
- 5+ разработчиков;
- параллельных фич-веток;
- нескольких дизайн-источников
устные договорённости становится труднее поддерживать.
Без автоматического сбора токенов вы:
- сложнее поддерживать актуальную инвентаризацию;
- труднее сравнивать эффект рефакторинга;
- проще пропустить визуальные регрессии.
Учебный сценарий: редизайн без остановки разработки
Представим маркетинговый сайт примерно на 120 страниц. Числа ниже иллюстрируют возможную миграцию, а не подтверждённый результат клиента или прогноз:
До:
- 4000+ CSS-правил
- 32 цвета
- 19 размеров шрифта
Шаги:
- Собрать значения с ключевых страниц.
- Отсортировать их по частоте использования.
- Определить основной набор токенов.
- Переносить стили постепенно, без полного переписывания.
После:
- 9 базовых цветов
- 6 типографических токенов
- −18% CSS-объёма
- меньше визуальных регрессов при A/B тестах
Где здесь ценность для performance
CSS-токены — это не только про дизайн:
- объединение повторяющихся объявлений может уменьшить CSS;
- общие значения упрощают поддержку стилей;
- упрощение правил может сократить конфликты каскада;
- влияние на gzip/Brotli, покрытие и критический CSS нужно измерять.
Сам сбор токенов страницу не ускоряет. Сравнивайте объём передачи и время загрузки после реального изменения кода.
Почему мы смотрим на это как на аудит
В milten.io сбор CSS-токенов — это:
- диагностика, а не генерация «красивого отчёта»;
- способ увидеть систему там, где кажется, что её нет;
- входная точка для стандартизации, design system и масштабирования фронтенда.
Если кандидаты в токены трудно формализовать, разберите правила дизайна и исключения. Эта трудность сама по себе не доказывает отсутствия дизайн-системы.
Если упростить до управленческой логики:
- CSS без токенов = неконтролируемый актив
- сбор токенов = инвентаризация
- частотность = приоритеты
- автоматизация = масштаб
Игнорировать это можно. Но тогда каждый редизайн будет начинаться с фразы: «Давайте просто аккуратно подправим стили» — и заканчиваться очередным слоем хаоса.
Сбор значений покажет, какие стили используются в проекте. По этой инвентаризации выберите обоснованные изменения и измерьте их эффект.