Budowanie systemu projektowego bez odtwarzania CSS

Systemy projektowe często wpadają w pułapkę.

Zaczynasz od dodawania klas pomocniczych (utility classes). Dodajesz opcje responsywne. Dodajesz pomocniki układu. Wkrótce tworzysz nową składnię. Kończysz, robiąc dokładnie to, co CSS już robi.

Przestań próbować zastępować CSS.

Zamiast tego zbuduj warstwę nad CSS. Skup się na intencji.

Programiści chcą elastyczności. Ale elastyczność przynosi złożoność. Wiele systemów udostępnia każdy breakpoint i każdą opcję układu. To sprawia, że markup staje się trudny do odczytania. Twój kod spędza więcej czasu na opisywaniu tego, jak zbudować układ, niż na tym, co ten układ robi.

System staje się trudny do zrozumienia, ponieważ próbuje opisać wszystko.

Zmień podejście. Myśl mniej o tym, jak układ jest budowany. Myśl więcej o tym, co ten układ osiąga.

Spójrz na ten przykład:

To nie zastępuje CSS. To wyraża intencję.

  • Treść adaptuje się do siatki (grid).
  • Na urządzeniach mobilnych elementy układają się jeden pod drugim (stack).

Implementacja pozostaje wewnątrz systemu. Nie chodzi o większą abstrakcję. Chodzi o lepszą komunikację.

Dobre wartości domyślne są lepsze niż nieskończona konfiguracja. Większość układów opiera się na powszechnych wzorcach. Większość programistów chce organizować treść, a nie wymyślać nowe systemy układów.

System projektowy powinien zapewniać przemyślane wartości domyślne. Jeśli spróbujesz udostępnić każdą funkcjonalność CSS, przegrasz. CSS jest już potężny i ustandaryzowany.

Zadaniem systemu projektowego jest:

  • Zmniejszenie obciążenia poznawczego.
  • Tworzenie spójności.
  • Komunikowanie intencji.
  • Ułatwianie stosowania powszechnych wzorców.

Zadaj sobie to pytanie podczas projektowania API: „Czy będę w stanie to zrozumieć za pół roku?”

Nie pytaj:

  • „Czy mogę skonfigurować wszystko?”
  • „Czy mogę obsłużyć każdy przypadek brzegowy?”

Czytelność się skaluje. Złożoność nie.

Prostota nie jest ograniczeniem. Celem jest umieszczenie mocy tam, gdzie jej miejsce. Typowe procesy powinny pozostać proste. Zaawansowane procesy muszą pozostać możliwe do zrealizowania.

Najlepsze systemy projektowe tworzą wspólny język. Skupiają się na intencji, a nie na implementacji. Pomagają programistom komunikować cel.

Programiści nie chcą budować układów. Chcą budować produkty. Układ to tylko jedna część pracy.

Źródło: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41