Kujenga Design System Bila Kurudia CSS

Design systems mara nyingi huangukia mtego.

Unaanza kwa kuongeza utility classes. Unaongeza chaguzi za responsive. Unaongeza layout helpers. Punde si punde, unajenga syntax mpya. Unajikuta ukifanya kile kile ambacho CSS tayari inafanya.

Acha kujaribu kuchukua nafasi ya CSS.

Badala yake, jenga tabaka (layer) juu ya CSS. Lenga kwenye nia (intent).

Watengenezaji wanataka unyumbufu (flexibility). Lakini unyumbufu huleta utata (complexity). Mifumo mingi huonyesha kila breakpoint na chaguo la layout. Hii hufanya markup iwe ngumu kusoma. Code yako hutumia muda mwingi kuelezea jinsi ya kujenga layout badala ya kuelezea layout hiyo inafanya nini.

Mfumo unakuwa mgumu kueleweka kwa sababu unajaribu kuelezea kila kitu.

Badili mtazamo wako. Fikiria kidogo kuhusu jinsi layout inavyojengwa. Fikiria zaidi kuhusu kile layout inachofanikisha.

Angalia mfano huu:

Hii haichukui nafasi ya CSS. Inatafsiri nia (intent).

  • Maudhui yanabadilika kulingana na grid.
  • Kwenye simu (mobile), yanajipanga kwa mfululizo (stacks).

Utekelezaji (implementation) unabaki ndani ya mfumo. Hii si kuhusu kuongeza abstraction. Ni kuhusu mawasiliano bora.

Chaguzi bora za awali (good defaults) ni bora kuliko usanidi usio na mwisho. Layout nyingi hufuata mifumo ya kawaida. Watengenezaji wengi wanataka kupanga maudhui, si kuvumbua mifumo mipya ya layout.

Design system inapaswa kutoa chaguzi bora za awali (thoughtful defaults). Ukijaribu kuonyesha kila uwezo wa CSS, utashindwa. CSS tayari ina nguvu na imewekwa katika viwango.

Kazi ya design system ni:

  • Kupunguza mzigo wa kiakili (cognitive load).
  • Kuleta uthabiti (consistency).
  • Kuwasilisha nia (intent).
  • Kurahisisha mifumo ya kawaida.

Jiulize swali hili unapotengeneza API: "Je, nitaweza kuelewa hili baada ya miezi sita kuanzia sasa?"

Usiulize:

  • "Je, naweza kusanidi kila kitu?"
  • "Je, naweza kuunga mkono kila hali ya kipekee (edge case)?"

Uwezo wa kusoma (readability) unapanuka. Utata (complexity) haupanuki.

Urahisi si kikwazo. Lengo ni kuweka nguvu pale inapostahili. Mitindo ya kawaida ya kazi (common workflows) inapaswa kubaki rahisi. Mitindo ya hali ya juu (advanced workflows) lazima ibaki inawezekana.

Design systems bora hutengeneza lugha ya pamoja. Hulenga nia badala ya utekelezaji. Huwasaidia watengenezaji kuwasilisha lengo.

Watengenezaji hawapendi kujenga layout. Wanataka kujenga bidhaa. Layout ni sehemu tu ya kazi.

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