CSS को फिर से बनाए बिना एक डिज़ाइन सिस्टम बनाना
डिज़ाइन सिस्टम अक्सर एक जाल में फंस जाते हैं।
आप यूटिलिटी क्लासेस (utility classes) जोड़कर शुरुआत करते हैं। आप रिस्पॉन्सिव विकल्प जोड़ते हैं। आप लेआउट हेल्पर्स जोड़ते हैं। जल्द ही, आप एक नया सिंटैक्स बना लेते हैं। अंत में, आप वही करने लगते हैं जो CSS पहले से ही करता है।
CSS को बदलने की कोशिश करना बंद करें।
इसके बजाय, CSS के ऊपर एक लेयर (layer) बनाएं। इरादे (intent) पर ध्यान केंद्रित करें।
डेवलपर्स लचीलापन (flexibility) चाहते हैं। लेकिन लचीलापन जटिलता लाता है। कई सिस्टम हर ब्रेकपॉइंट और लेआउट विकल्प को उजागर करते हैं। इससे मार्कअप को पढ़ना कठिन हो जाता है। आपका कोड इस बात पर अधिक समय बिताता है कि लेआउट कैसे बनाया जाए, बजाय इसके कि लेआउट क्या करता है।
सिस्टम को समझना कठिन हो जाता है क्योंकि यह सब कुछ समझाने की कोशिश करता है।
अपना ध्यान बदलें। इस बारे में कम सोचें कि लेआउट कैसे बनाया जाता है। इस बारे में अधिक सोचें कि लेआउट क्या हासिल करता है।
इस उदाहरण को देखें:
यह CSS को रिप्लेस नहीं करता है। यह इरादे (intent) को व्यक्त करता है।
- कंटेंट ग्रिड के अनुसार ढल जाता है।
- मोबाइल पर, यह स्टैक (stack) हो जाता है।
कार्यान्वयन (implementation) सिस्टम के अंदर ही रहता है। यह अधिक एब्स्ट्रैक्शन (abstraction) के बारे में नहीं है। यह बेहतर संचार (communication) के बारे में है।
अंतहीन कॉन्फ़िगरेशन से बेहतर अच्छे डिफॉल्ट्स (defaults) होते हैं। अधिकांश लेआउट सामान्य पैटर्न का पालन करते हैं। अधिकांश डेवलपर्स कंटेंट को व्यवस्थित करना चाहते हैं, न कि नए लेआउट सिस्टम का आविष्कार करना।
एक डिज़ाइन सिस्टम को विचारशील डिफॉल्ट्स प्रदान करने चाहिए। यदि आप CSS की हर क्षमता को उजागर करने की कोशिश करते हैं, तो आप हार जाते हैं। CSS पहले से ही शक्तिशाली और मानकीकृत (standardized) है।
एक डिज़ाइन सिस्टम का काम है:
- संज्ञानात्मक भार (cognitive load) को कम करना।
- निरंतरता (consistency) बनाना।
- इरादे (intent) को संप्रेषित करना।
- सामान्य पैटर्न को आसान बनाना।
API डिज़ाइन करते समय खुद से यह सवाल पूछें: "क्या मैं इसे छह महीने बाद समझ पाऊंगा?"
यह न पूछें:
- "क्या मैं सब कुछ कॉन्फ़िगर कर सकता हूँ?"
- "क्या मैं हर एज केस (edge case) को सपोर्ट कर सकता हूँ?"
पठनीयता (readability) स्केल करती है। जटिलता नहीं।
सादगी कोई सीमा नहीं है। लक्ष्य शक्ति को वहां रखना है जहां वह होनी चाहिए। सामान्य वर्कफ़्लो सरल रहने चाहिए। उन्नत वर्कफ़्लो संभव बने रहने चाहिए।
सबसे अच्छे डिज़ाइन सिस्टम एक साझा भाषा बनाते हैं। वे कार्यान्वयन के बजाय इरादे पर ध्यान केंद्रित करते हैं। वे डेवलपर्स को उद्देश्य संप्रेषित करने में मदद करते हैं।
डेवलपर्स लेआउट बनाना नहीं चाहते। वे उत्पाद बनाना चाहते हैं। लेआउट काम का केवल एक हिस्सा है।
स्रोत: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41