CSS വീണ്ടും നിർമ്മിക്കാതെ ഒരു ഡിസൈൻ സിസ്റ്റം നിർമ്മിക്കാം

ഡിസൈൻ സിസ്റ്റങ്ങൾ പലപ്പോഴും ഒരു കെണിയിൽ അകപ്പെടാറുണ്ട്.

നിങ്ങൾ ആദ്യം യൂട്ടിലിറ്റി ക്ലാസുകൾ (utility classes) ചേർക്കുന്നു. റെസ്‌പോൺസീവ് ഓപ്ഷനുകൾ ചേർക്കുന്നു. ലേഔട്ട് ഹെൽപ്പറുകൾ ചേർക്കുന്നു. വൈകാതെ തന്നെ നിങ്ങൾ ഒരു പുതിയ സിന്റാക്സ് (syntax) നിർമ്മിക്കുന്നു. അവസാനം CSS ഇതിനകം തന്നെ ചെയ്യുന്ന കാര്യങ്ങൾ തന്നെ നിങ്ങൾ വീണ്ടും ചെയ്യുന്നു.

CSS-ന് പകരമാവാൻ ശ്രമിക്കുന്നത് നിർത്തുക.

പകരം, CSS-ന് മുകളിൽ ഒരു ലെയർ നിർമ്മിക്കുക. ഉദ്ദേശ്യത്തിൽ (intent) ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.

ഡെവലപ്പർമാർക്ക് ഫ്ലെക്സിബിലിറ്റി (flexibility) വേണം. എന്നാൽ ഫ്ലെക്സിബിലിറ്റി സങ്കീർണ്ണത കൊണ്ടുവരുന്നു. പല സിസ്റ്റങ്ങളും എല്ലാ ബ്രേക്ക്പോയിന്റുകളും (breakpoints) ലേഔട്ട് ഓപ്ഷനുകളും തുറന്നുകാട്ടുന്നു. ഇത് മാർക്കപ്പ് (markup) വായിക്കാൻ പ്രയാസകരമാക്കുന്നു. ഒരു ലേഔട്ട് എന്താണ് ചെയ്യുന്നത് എന്നതിനേക്കാൾ, അത് എങ്ങനെ നിർമ്മിക്കണം എന്ന് വിവരിക്കാനാണ് നിങ്ങളുടെ കോഡ് കൂടുതൽ സമയം ചെലവഴിക്കുന്നത്.

എല്ലാം വിവരിക്കാൻ ശ്രമിക്കുന്നത് കൊണ്ട് സിസ്റ്റം മനസ്സിലാക്കാൻ പ്രയാസകരമാകുന്നു.

നിങ്ങളുടെ ശ്രദ്ധ മാറ്റുക. ഒരു ലേഔട്ട് എങ്ങനെ നിർമ്മിക്കുന്നു എന്നതിനെക്കുറിച്ച് കുറച്ചു മാത്രം ചിന്തിക്കുക. ആ ലേഔട്ട് എന്താണ് കൈവരിക്കുന്നത് എന്നതിനെക്കുറിച്ച് കൂടുതൽ ചിന്തിക്കുക.

ഈ ഉദാഹരണം നോക്കൂ:

ഇത് CSS-ന് പകരമല്ല. ഇത് ഉദ്ദേശ്യം പ്രകടിപ്പിക്കുന്നു.

  • ഉള്ളടക്കം ഒരു ഗ്രിഡിന് അനുസൃതമായി മാറുന്നു.
  • മൊബൈലിൽ, അത് സ്റ്റാക്ക് (stack) ആകുന്നു.

ഇംപ്ലിമെന്റേഷൻ (implementation) സിസ്റ്റത്തിനുള്ളിൽ തന്നെ നിൽക്കുന്നു. ഇത് കൂടുതൽ അബ്‌സ്‌ട്രാക്ഷനെ (abstraction) കുറിച്ചല്ല. ഇത് മികച്ച ആശയവിനിമയത്തെ കുറിച്ചാണ്.

അവസാനമില്ലാത്ത കോൺഫിഗറേഷനുകളേക്കാൾ നല്ലത് മികച്ച ഡിഫോൾട്ടുകളാണ് (defaults). മിക്ക ലേഔട്ടുകളും പൊതുവായ പാറ്റേണുകൾ പിന്തുടരുന്നു. മിക്ക ഡെവലപ്പർമാരും ഉള്ളടക്കം ക്രമീകരിക്കാനാണ് ആഗ്രഹിക്കുന്നത്, പുതിയ ലേഔട്ട് സിസ്റ്റങ്ങൾ കണ്ടുപിടിക്കാനല്ല.

ഒരു ഡിസൈൻ സിസ്റ്റം ചിന്താപരമായ ഡിഫോൾട്ടുകൾ നൽകണം. എല്ലാ CSS കപ്പാബിലിറ്റികളും പുറത്തുകൊണ്ടുവരാൻ ശ്രമിച്ചാൽ നിങ്ങൾ പരാജയപ്പെടും. CSS ഇതിനകം തന്നെ ശക്തവും സ്റ്റാൻഡേർഡൈസ്ഡ് ആയതുമാണ്.

ഒരു ഡിസൈൻ സിസ്റ്റത്തിന്റെ ജോലി ഇതാണ്:

  • കോഗ്നിറ്റീവ് ലോഡ് (cognitive load) കുറയ്ക്കുക.
  • സ്ഥിരത (consistency) കൊണ്ടുവരിക.
  • ഉദ്ദേശ്യം വ്യക്തമാക്കുക.
  • പൊതുവായ പാറ്റേണുകൾ എളുപ്പമാക്കുക.

API രൂപകൽപ്പന ചെയ്യുമ്പോൾ സ്വയം ഈ ചോദ്യം ചോദിക്കുക: "ആറ് മാസത്തിന് ശേഷവും എനിക്ക് ഇത് മനസ്സിലാക്കാൻ കഴിയുമോ?"

ഇവ ചോദിക്കരുത്:

  • "എനിക്ക് എല്ലാം കോൺഫിഗർ ചെയ്യാൻ കഴിയുമോ?"
  • "എനിക്ക് എല്ലാ എഡ്ജ് കേസുകളും (edge cases) സപ്പോർട്ട് ചെയ്യാൻ കഴിയുമോ?"

വായനാക്ഷമത (Readability) വർദ്ധിക്കുന്നു. സങ്കീർണ്ണത വർദ്ധിക്കില്ല.

ലാളിത്യം ഒരു പരിമിതിയല്ല. അധികാരം അതിന്റെ ശരിയായ സ്ഥാനത്ത് എത്തിക്കുക എന്നതാണ് ലക്ഷ്യം. സാധാരണ വർക്ക്ഫ്ലോകൾ (workflows) ലളിതമായിരിക്കണം. അഡ്വാൻസ്ഡ് വർക്ക്ഫ്ലോകൾ സാധ്യമായിരിക്കണം.

മികച്ച ഡിസൈൻ സിസ്റ്റങ്ങൾ ഒരു പൊതു ഭാഷ സൃഷ്ടിക്കുന്നു. അവ ഇംപ്ലിമെന്റേഷന് പകരം ഉദ്ദേശ്യത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഡെവലപ്പർമാരെ ലക്ഷ്യം വ്യക്തമാക്കാൻ അവ സഹായിക്കുന്നു.

ഡെവലപ്പർമാർ ലേഔട്ടുകൾ നിർമ്മിക്കാനല്ല ആഗ്രഹിക്കുന്നത്. അവർ ഉൽപ്പന്നങ്ങൾ (products) നിർമ്മിക്കാനാണ് ആഗ്രഹിക്കുന്നത്. ലേഔട്ട് എന്നത് ജോലിയുടെ ഒരു ഭാഗം മാത്രമാണ്.

ഉറവിടം: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41