Основная идея
Главный принцип дизайн-системы: создаем и используем только токены которые будут переисползоваться или относятся к базовой настройке темы. В остальных случаях пишем CSS наживую.
Переменные разделяются на три слоя: primitive, semantic и component. Набот токенов должен стремится к минимуму (его расширение должно обсуждаться).
- Primitive – описывают физические значения (цвет, шрифт, размер шага сетки) и попадают в значения переменных
theme.json, чтобы WordPress создал свои CSS-переменные из этих значений. - Semantic – определяют где и как должны использоваться примитивы:
surface.primary,text.on-surface,state.error– они становятся “основой“ при редизайнах. - Component – создаются для конкретных элементов (компонентов): карточка, кнопка. Нужно создавать и использовать такие переменные, только если есть понимание, что такая переменная пригодится где-то еще – например общий цвет для всех кнопок.
Если не очевидно, что CSS свойства могут быть переисползованы, то переменную создавать не нужно, а нужно оформляется обычным CSS внутри темы/шаблона. Например: уникальные hero-баннеры, разовые анимации, частные grid-раскладки.
Такой подход исключает “рост“ ненужных переменных, облегчает понимание и использование кодовой базы.
Тема должна оставаться лёгкой, логичной и готовой к быстрому масштабированию без перегрузки лишними переменными.
Распределение уровней токенов в WordPress теме
Основная идея: примитивы остаются скрытым техническим слоем, семантика попадает в редактор и используется в разметке, а компонентные токены заводим только там, где элемент реально исползуется по всему сайту. Всё остальное пишем «живым» CSS – так редактор остаётся чистым, а система гибкой.