Building a Design System Without Recreating CSS
डिझाइन सिस्टम्स अनेकदा एका जाळ्यात अडकतात.
तुम्ही युटिलिटी क्लासेस (utility classes) जोडण्यापासून सुरुवात करता. तुम्ही रिस्पॉन्सिव्ह पर्याय जोडता. तुम्ही लेआउट हेल्पर्स जोडता. लवकरच, तुम्ही एक नवीन सिंटॅक्स (syntax) तयार करता. शेवटी, तुम्ही अगदी तेच करता जे CSS आधीच करते.
CSS बदलण्याचा प्रयत्न करणे थांबवा.
त्याऐवजी, CSS च्या वर एक लेयर (layer) तयार करा. हेतूवर (intent) लक्ष केंद्रित करा.
डेव्हलपर्सना लवचिकता (flexibility) हवी असते. पण लवचिकतेमुळे गुंतागुंत (complexity) वाढते. अनेक सिस्टम्स प्रत्येक ब्रेकपॉइंट (breakpoint) आणि लेआउट पर्याय उघड करतात. यामुळे मार्कअप (markup) वाचणे कठीण होते. तुमचा कोड लेआउट काय करतो यापेक्षा तो कसा तयार करायचा याचे वर्णन करण्यात जास्त वेळ घालवतो.
सिस्टम समजून घेणे कठीण होते कारण ती प्रत्येक गोष्टीचे वर्णन करण्याचा प्रयत्न करते.
तुमचा दृष्टिकोन बदला. लेआउट कसा तयार केला जातो यापेक्षा तो काय साध्य करतो याबद्दल अधिक विचार करा.
हे उदाहरण पहा:
हे CSS ला पर्याय नाही. ते हेतू व्यक्त करते.
- कंटेंट ग्रिडनुसार जुळवून घेतो.
- मोबाईलवर, तो स्टॅक (stack) होतो.
अंमलबजावणी (implementation) सिस्टमच्या आत राहते. हे अधिक ॲब्स्ट्रॅक्शनबद्दल (abstraction) नाही, तर अधिक चांगल्या संवादाबद्दल आहे.
अनंत कॉन्फिगरेशनपेक्षा (configuration) चांगले डिफॉल्ट्स (defaults) अधिक चांगले असतात. बहुतेक लेआउट्स सामान्य पॅटर्नचे पालन करतात. बहुतेक डेव्हलपर्सना कंटेंट व्यवस्थित करायचा असतो, नवीन लेआउट सिस्टम शोधायच्या नसतात.
डिझाइन सिस्टमने विचारपूर्वक डिफॉल्ट्स प्रदान केले पाहिजेत. जर तुम्ही CSS ची प्रत्येक क्षमता उघड करण्याचा प्रयत्न केला, तर तुम्ही हरता. CSS आधीच शक्तिशाली आणि प्रमाणित (standardized) आहे.
डिझाइन सिस्टमचे काम आहे:
- कॉग्निटिव्ह लोड (cognitive load) कमी करणे.
- सुसंगतता (consistency) निर्माण करणे.
- हेतू स्पष्ट करणे.
- सामान्य पॅटर्न सोपे करणे.
API डिझाइन करताना स्वतःला हा प्रश्न विचारा: "सहा महिन्यांनंतर मला हे समजेल का?"
हे विचारू नका:
- "मी सर्व काही कॉन्फिगर करू शकतो का?"
- "मी प्रत्येक एज केस (edge case) सपोर्ट करू शकतो का?"
वाचनीयता (Readability) वाढवता येते. गुंतागुंत वाढत नाही.
साधेपणा ही मर्यादा नाही. शक्ती योग्य ठिकाणी ठेवणे हे ध्येय आहे. सामान्य वर्कफ्लो (workflows) साधे राहिले पाहिजेत. प्रगत वर्कफ्लो शक्य राहिले पाहिजेत.
सर्वोत्तम डिझाइन सिस्टम्स एक सामायिक भाषा तयार करतात. त्या अंमलबजावणीऐवजी हेतूवर लक्ष केंद्रित करतात. त्या डेव्हलपर्सना उद्देश स्पष्ट करण्यास मदत करतात.
डेव्हलपर्सना लेआउट्स तयार करायचे नसतात. त्यांना उत्पादने (products) तयार करायची असतात. लेआउट हा कामाचा फक्त एक भाग आहे.
स्रोत: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41