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

Дизайн-системи часто потрапляють у пастку.

Ви починаєте з додавання утилітарних класів. Додаєте варіанти адаптивності. Додаєте допоміжні класи для макетів. Незабаром ви створюєте новий синтаксис. У підсумку ви робите саме те, що вже робить CSS.

Припиніть намагатися замінити CSS.

Замість цього побудуйте шар поверх CSS. Зосередьтеся на намірах.

Розробники хочуть гнучкості. Але гнучкість несе за собою складність. Багато систем відкривають кожен брейкпоінт та кожен варіант макета. Це робить розмітку важкою для читання. Ваш код витрачає більше часу на опис того, як побудувати макет, ніж на тому, що цей макет робить.

Систему стає важко зрозуміти, тому що вона намагається описати все.

Змініть фокус. Думайте менше про те, як будується макет. Думайте більше про те, чого цей макет досягає.

Погляньте на цей приклад:

Це не замінює CSS. Це виражає намір.

  • Контент адаптується до сітки.
  • На мобільних пристроях він стає у стовпчик.

Реалізація залишається всередині системи. Йдеться не про ще більшу абстракцію, а про кращу комунікацію.

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

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

Завдання дизайн-системи:

  • Зменшити когнітивне навантаження.
  • Створити послідовність.
  • Передавати намір.
  • Спростити поширені патерни.

Ставте собі це запитання під час проектування API: "Чи зможу я зрозуміти це через шість місяців?"

Не запитуйте:

  • "Чи можу я налаштувати все?"
  • "Чи можу я підтримати кожен граничний випадок?"

Читабельність масштабується. Складність — ні.

Простота — це не обмеження. Мета полягає в тому, щоб надати потужність там, де вона має бути. Звичні робочі процеси мають залишатися простими. Просунуті робочі процеси мають залишатися можливими.

Найкращі дизайн-системи створюють спільну мову. Вони зосереджуються на намірах, а не на реалізації. Вони допомагають розробникам комунікувати мету.

Розробники не хочуть будувати макети. Вони хочуть створювати продукти. Макет — це лише частина роботи.

Source: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41