Создание дизайн-системы без повторного изобретения CSS

Дизайн-системы часто попадают в ловушку.

Вы начинаете с добавления утилитарных классов. Добавляете варианты адаптивности. Добавляете помощники для верстки. Вскоре вы создаете новый синтаксис. В итоге вы делаете ровно то же самое, что уже умеет CSS.

Перестаньте пытаться заменить CSS.

Вместо этого создайте слой поверх CSS. Сосредоточьтесь на намерениях.

Разработчикам нужна гибкость. Но гибкость порождает сложность. Многие системы открывают доступ к каждому брейкпоинту и параметру верстки. Из-за этого разметку становится трудно читать. Ваш код тратит больше времени на описание того, как построить макет, чем на то, что этот макет делает.

Систему становится трудно понять, потому что она пытается описать всё подряд.

Смените фокус. Думайте меньше о том, как строится макет. Думайте больше о том, какую задачу этот макет решает.

Посмотрите на этот пример:

Это не заменяет CSS. Это выражает намерение.

  • Контент адаптируется под сетку.
  • На мобильных устройствах элементы выстраиваются в стек.

Реализация остается внутри системы. Речь не о дополнительной абстракции, а о более эффективной коммуникации.

Хорошие значения по умолчанию лучше бесконечной конфигурации. Большинство макетов следуют общим паттернам. Большинство разработчиков хотят организовывать контент, а не изобретать новые системы верстки.

Дизайн-система должна предоставлять продуманные значения по умолчанию. Если вы попытаетесь открыть все возможности CSS, вы проиграете. CSS уже достаточно мощный и стандартизированный.

Задача дизайн-системы:

  • Снизить когнитивную нагрузку.
  • Обеспечить единообразие.
  • Выражать намерения.
  • Упростить работу с распространенными паттернами.

Задайте себе этот вопрос при проектировании API: «Смогу ли я понять это через полгода?»

Не спрашивайте:

  • «Могу ли я настроить всё?»
  • «Могу ли я учесть все краевые случаи?»

Читаемость масштабируется. Сложность — нет.

Простота — это не ограничение. Цель состоит в том, чтобы направить мощь туда, где она уместна. Обычные рабочие процессы должны оставаться простыми. Продвинутые процессы должны оставаться возможными.

Лучшие дизайн-системы создают общий язык. Они фокусируются на намерениях, а не на реализации. Они помогают разработчикам передавать смысл того, что они делают.

Разработчики не хотят строить макеты. Они хотят создавать продукты. Макет — это лишь часть работы.

Источник: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41