स्टाइल घटकों के लिए 5 मिनट का परिचय

सीएसएस अजीब है। आप 15 मिनट में इसके मूल बातें जान सकते हैं। लेकिन आपकी शैलियों को व्यवस्थित करने के लिए एक अच्छा तरीका निकालने से पहले आपको सालों लग सकते हैं।

इसका एक हिस्सा सिर्फ भाषा की quirks के कारण है। बॉक्स से बाहर, सीएसएस काफी सीमित है, जिसमें कोई चर, लूप या फ़ंक्शन नहीं हैं। उसी समय, यह काफी हद तक अनुमत है कि आप तत्वों, कक्षाओं, आईडी या इनमें से किसी भी संयोजन को स्टाइल कर सकते हैं।

अराजक शैली की चादरें

जैसा कि आप शायद खुद के लिए अनुभव करते हैं, यह अक्सर अराजकता के लिए एक नुस्खा है। जबकि SASS और LESS जैसे प्रीप्रोसेसर बहुत अधिक उपयोगी सुविधाएँ जोड़ते हैं, वे सीएसएस अराजकता को रोकने के लिए वास्तव में बहुत कुछ नहीं करते हैं।

यह संगठनात्मक नौकरी BEM जैसी कार्यप्रणालियों पर छोड़ दी गई थी, जो - जबकि उपयोगी - पूरी तरह से वैकल्पिक है, और इसे भाषा या टूलिंग स्तर पर लागू नहीं किया जा सकता है।

सीएसएस की नई लहर

कुछ वर्षों में तेजी से आगे बढ़ें, और जावास्क्रिप्ट-आधारित टूल की एक नई लहर सीएसएस लिखने के तरीके को बदलकर, इन मुद्दों को उनकी जड़ में हल करने की कोशिश कर रही है।

स्टाइलिंग घटक इन पुस्तकालयों में से एक है, और इसके नवाचार और परिचितता के मिश्रण के कारण इसने बहुत अधिक ध्यान आकर्षित किया है। इसलिए यदि आप रिएक्ट का उपयोग करते हैं (और यदि आप नहीं करते हैं, तो मेरी जावास्क्रिप्ट अध्ययन योजना और रिएक्ट के लिए मेरा परिचय देखें), यह निश्चित रूप से इस नए सीएसएस विकल्प पर एक नज़र डालने के लायक है।

मैंने हाल ही में अपनी निजी साइट को फिर से डिज़ाइन करने के लिए इसका इस्तेमाल किया था, और आज मैं इस प्रक्रिया में सीखी गई कुछ चीजों को साझा करना चाहता था।

अवयव, स्टाइल

स्टाइलड कंपोनेंट्स के बारे में आपको जो मुख्य बात समझनी है, वह यह है कि इसका नाम काफी महत्वपूर्ण रूप से लिया जाना चाहिए। अब आप HTML तत्वों या घटकों को उनके वर्ग या HTML तत्व के आधार पर स्टाइल नहीं कर रहे हैं:

हैलो वर्ल्ड

h1.title {
  फ़ॉन्ट-आकार: 1.5em;
  बैंगनी रंग;
}

इसके बजाय, आप स्टाइल वाले घटकों को परिभाषित कर रहे हैं, जो उनके स्वयं के संक्षिप्त शैली के पास हैं। फिर आप अपने कोडबेस में इनका स्वतंत्र रूप से उपयोग कर रहे हैं:

आयात 'स्टाइल-घटकों' से स्टाइल;
const टाइटल = स्टाइल
  फ़ॉन्ट-आकार: 1.5em;
  बैंगनी रंग;
`;
<शीर्षक> नमस्ते विश्व 

यह एक मामूली अंतर की तरह लग सकता है, और वास्तव में दोनों वाक्यविन्यास बहुत समान हैं। लेकिन वे महत्वपूर्ण अंतर यह है कि शैलियों अब उनके घटक का हिस्सा हैं।

दूसरे शब्दों में, हम सीएसएस कक्षाओं को घटक और इसकी शैलियों के बीच एक मध्यस्थ कदम के रूप में छुटकारा पा रहे हैं।

जैसा कि स्टाइल-घटकों के सह-निर्माता मैक्स स्टोइबर कहते हैं:

"स्टाइल-घटकों का मूल विचार शैलियों और घटकों के बीच मानचित्रण को हटाकर सर्वोत्तम प्रथाओं को लागू करना है।"

ऑफलोडिंग जटिलता

यह पहली बार में काउंटर-सहज ज्ञान युक्त लगेगा, क्योंकि सीधे सीएसएस HTML तत्वों के बजाय सीएसएस का उपयोग करने के पूरे बिंदु (याद रखें टैग?) इस मध्यस्थ वर्ग की परत को पेश करके शैलियों और मार्कअप को हटाना है।

लेकिन यह डिकंप्लिंग भी बहुत जटिलता पैदा करता है, और ऐसा तर्क दिया जाना चाहिए कि सीएसएस की तुलना में जावास्क्रिप्ट की तरह एक "वास्तविक" प्रोग्रामिंग भाषा उस जटिलता को संभालने के लिए बहुत बेहतर है।

प्रॉप्स ओवर क्लास

इस नो-क्लास दर्शन को ध्यान में रखते हुए, स्टाइल-कंपोनेंट्स कक्षाओं के ऊपर प्रॉप्स का उपयोग करते हैं, जब यह एक घटक के व्यवहार को अनुकूलित करने की बात आती है। इसलिए इसके बजाय:

हैलो वर्ल्ड // नीला होगा

h1.title {
  फ़ॉन्ट-आकार: 1.5em;
  बैंगनी रंग;
  
  और .primary {
    नीला रंग;
  }
}

आप लिखते हैं:

const टाइटल = स्टाइल
  फ़ॉन्ट-आकार: 1.5em;
  रंग: $ {प्रॉप्स => प्रॉप्स.प्रिमरी? 'नीला - बैंगनी'};
`;
<शीर्षक प्राथमिक> हैलो वर्ल्ड  // नीला होगा

जैसा कि आप देख सकते हैं, स्टाइल-कलपुर्जों ने आपको सभी सीएसएस और HTML से संबंधित कार्यान्वयन विवरणों को ध्यान में रखते हुए अपने रिएक्ट घटकों को साफ करने दिया।

उस ने कहा, स्टाइल-घटकों सीएसएस अभी भी सीएसएस है। तो इस तरह की चीजें भी पूरी तरह से वैध हैं (हालांकि थोड़ा गैर-मुहावरेदार) कोड:

const टाइटल = स्टाइल
  फ़ॉन्ट-आकार: 1.5em;
  बैंगनी रंग;
  
  और .primary {
    नीला रंग;
  }
`;
<शीर्षक className = "प्राथमिक"> हैलो वर्ल्ड  // नीला होगा

यह एक ऐसी विशेषता है जो स्टाइल-घटकों को बहुत आसान बना देती है: जब यह संदेह करता है, तो आप हमेशा वही जान सकते हैं जो आप जानते हैं!

चेतावनियां

यह उल्लेख करना भी महत्वपूर्ण है कि स्टाइल-कलपुर्जे अभी भी एक युवा परियोजना है, और कुछ विशेषताएं अभी तक पूरी तरह से समर्थित नहीं हैं। उदाहरण के लिए, यदि आप एक माता-पिता से बाल घटक को स्टाइल करना चाहते हैं, तो आपको अभी के लिए CSS कक्षाओं का उपयोग करने पर निर्भर रहना होगा (कम से कम जब तक स्टाइल-घटकों v2 सामने नहीं आता है)।

सर्वर पर अभी तक आपके सीएसएस को पूर्व-रेंडर करने का कोई "आधिकारिक" तरीका नहीं है, हालांकि यह निश्चित रूप से शैलियों को मैन्युअल रूप से इंजेक्ट करके संभव है।

और यह तथ्य कि स्टाइल-कलपुर्जे अपने रैंडमाइज्ड वर्ग के नाम उत्पन्न करते हैं, यह आपके ब्राउज़र के देव टूल्स का उपयोग करना कठिन बना सकता है, जहां आपकी शैलियों को मूल रूप से परिभाषित किया गया है।

लेकिन जो बहुत उत्साहजनक है वह यह है कि स्टाइल-कंपोनेंट कोर टीम इन सभी मुद्दों से अवगत है, और उन्हें एक-एक करके ठीक करने के लिए कड़ी मेहनत कर रही है। संस्करण 2 जल्द ही आ रहा है, और मैं वास्तव में इसके लिए तत्पर हूं!

और अधिक जानें

यहां मेरा लक्ष्य विस्तार से यह बताना नहीं है कि स्टाइल-कंपोनेंट्स कैसे काम करते हैं, लेकिन आपको एक छोटी सी झलक देने के लिए और अधिक ताकि आप अपने लिए तय कर सकें कि क्या यह जांचने लायक है।

अगर मैं आपको जिज्ञासु बनाने में कामयाब रहा, तो यहां कुछ ऐसे स्थान हैं जहां आप स्टाइल-घटकों के बारे में अधिक जान सकते हैं:

  • मैक्स स्टॉइबर ने हाल ही में स्मैशिंग मैगज़ीन के लिए स्टाइल-कंपोनेंट्स के कारण के बारे में एक लेख लिखा था।
  • स्टाइल-कंपोनेंट्स रेपो में खुद एक व्यापक प्रलेखन है।
  • जेमी डिक्सन का यह लेख स्टाइल-घटकों पर स्विच करने के कुछ लाभों को रेखांकित करता है।
  • यदि आप इस बारे में अधिक जानना चाहते हैं कि पुस्तकालय वास्तव में कैसे लागू किया जाता है, तो मैक्स द्वारा इस लेख को देखें।

और अगर आप और भी आगे जाना चाहते हैं, तो आप ग्लैमर की भी जांच कर सकते हैं, नए-लहर सीएसएस पर एक अलग ले!

सेल्फ-प्रमोशन का समय: हम नोवा के साथ मदद के लिए ओपन-सोर्स योगदानकर्ताओं की तलाश कर रहे हैं, जो फुल-स्टैक रिएक्ट और ग्राफकॉल ऐप बनाने का सबसे आसान तरीका है, जो फॉर्म, डेटा लोडिंग और उपयोगकर्ता खातों के साथ पूरा करते हैं। हम अभी तक स्टाइल-घटकों का उपयोग नहीं करते हैं, लेकिन आप उन्हें लागू करने वाले पहले व्यक्ति हो सकते हैं!