Архитектура фронтенда
Design-токены: обзор с выбором ответа
Суть Синтез по всему юниту в формате выбора: границы тиров, тематизация через semantic-токены, кросс-платформенный пайплайн, каскад CSS-переменных и как drift возвращается.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на senior-высоте — в орбитеШесть вопросов через весь юнит. Каждый отражает реальное решение — где живёт токен, на что компоненту разрешено ссылаться, когда пайплайн окупается — а не определение для пересказа.
Цель
Убедитесь, что можете связать три тира, тематизацию через semantic-токены, кросс-платформенную сборку и дисциплину, которая не даёт drift вернуться — синтез, к которому вёл урок.
Викторина
Completed
Ревью показывает кнопку со стилем background: var(--color-blue-600). В системе есть primitive-, semantic- и component-тиры. Почему это дефект, хотя цвет формально и есть токен?
Heads-up Именование значения не цель; цель — провести intent через semantic-слой. Компонент, привязанный к primitive, не может следовать за theme-override, то есть на практике выпал из системы токенов.
Heads-up Вписать hex строго хуже — это literal, исходный источник drift. Разрешение var() практически бесплатно; дефект в тире, а не в синтаксисе.
Heads-up Component-токены опциональны. Кнопка могла бы корректно ссылаться прямо на color.interactive.default; баг — в ссылке на primitive, а не в отсутствии component-токена.
Викторина
Completed
Dark mode должен перекрасить все компоненты без JavaScript и за одну перерисовку. Какой подход даёт это в вебе?
Heads-up Это переизобретает то, что каскад делает бесплатно, добавляет стоимость ре-рендера и риск мигания до гидрации. CSS-переменные перекрашиваются за одну перерисовку без JS.
Heads-up Это форк-копия каждого правила — режим отказа с двухцветной кнопкой. Вы поддерживаете два набора стилей компонентов, которые расходятся независимо.
Heads-up Компоненты должны ссылаться на semantic, не на primitive. Переопределение primitive сработать может, но дисциплина — переопределять semantic-слой, чтобы сохранить intent и оставить компоненты независимыми от темы.
Викторина
Completed
Команда авторит токены один раз в DTCG JSON и гоняет Style Dictionary. Какой шаг несёт нагрузку, делая один источник корректным на web, iOS и Android?
Heads-up Платформы не потребляют DTCG JSON в рантайме. Сборка разрешает алиасы и выдаёт нативные артефакты (CSS, colors.xml, Swift-файл); корректность даёт шаг transform.
Heads-up Алиасы решают разрешение ссылок внутри источника, но CSS px неверен для Android XML, а hex неверен для UIColor. Значения под платформу адаптируют transforms, не алиасы.
Heads-up Импорт сырого JSON всё равно оставляет каждой платформе самой трактовать значения — это и есть ручной форк. Задача пайплайна — выдать платформенные файлы через transforms и formatters.
Викторина
Completed
Команда из пяти человек поставляет одно веб-приложение, одну тему, без нативных таргетов. Они предлагают полную трёхтировую систему со сборкой Style Dictionary. Как читает это senior?
Heads-up Каждый тир — это indirection, которую новый инженер должен трассировать, и место, где прячется баг. С одним таргетом и одной темой стоимость пайплайна перевешивает предотвращённый drift.
Heads-up Даже одно веб-приложение выигрывает от primitive- плюс semantic-тиров, чтобы ребрендинг или будущий dark mode стали одной правкой. Вопрос в количестве тиров, а не в том, токенизировать ли вообще.
Heads-up Component-токены — самый опциональный тир и добавляют больше всего хопов. Их вводят только когда конкретному компоненту нужно отклониться, а не по умолчанию.
Викторина
Completed
Через три недели после выката токенов grep находит свежие захардкоженные hex по новым компонентам. Модель тиров корректна. В чём устойчивое решение?
Heads-up Обучение выветривается; следующий дедлайн снова вернёт literals. Drift — проблема процесса, и надёжно держит линию только автоматический гейт в CI.
Heads-up Покрытие помогает, но не мешает кому-то всё равно вставить hex. Без ошибки на этапе сборки система эродирует независимо от полноты палитры.
Heads-up Inline-hex — это исходный drift, лишь перенесённый. Решение — запретить сырые значения, а не делать их более локальными.
Викторина
Completed
Дизайнер спрашивает, почему кнопка не может просто ссылаться на color.blue.600, раз она всё равно к этому и разрешается. В чём точная причина лишнего semantic-хопа?
Heads-up Стоимость разрешения var() ничтожна, и лишний хоп ничего не ускоряет. Выгода — в intent и возможности theme-override, не в производительности.
Heads-up Semantic-тир — это то, что позволяет dark mode и ребрендингу быть одной правкой. Убрав его, вы заново сцепляете каждый компонент с сырой палитрой — ключевой режим отказа юнита.
Heads-up DTCG определяет формат, а не то, на какой тир может ссылаться потребитель. Хоп — это архитектурная дисциплина, дающая тематизацию и ребрендинг-в-одну-правку, а не правило спеки.
Итог
Сквозная линия — одно правило с последствиями: компонент ссылается на semantic-токен, никогда на primitive и никогда на literal. Именно эта дисциплина позволяет каскаду бесплатно тематизировать dark mode, позволяет одному DTCG-источнику генерировать корректные CSS, Swift и Android через transforms и делает ребрендинг одной правкой primitive-слоя. Размеряйте тиры под таргеты, которые поставляете, и закрывайте правило линтером — потому что конвенция без принудительного гейта за недели сползает обратно к захардкоженным hex.