यह पोस्ट ट्विटर पर इस बातचीत के सवालों का एक विस्तृत जवाब है। मूल के लेखक, सुनील पाइ, अपेक्षाकृत लोकप्रिय ग्लैमर लाइब्रेरी के लेखक हैं और फेसबुक पर एक डेवलपर के रूप में काम करते हैं।
जावास्क्रिप्ट सीएसएस की तुलना में अधिक सुविधाजनक कैसे है? जेएस के अंदर सीएसएस लिखने से यह अधिक समर्थित कैसे हो जाता है?
मुझे इस विषय पर बात करके खुशी होगी। मुझे तुरंत कहना होगा कि सीएसएस-इन-जेएस समाधान ओवरहेड हैं, लेकिन आमतौर पर यह कीमत उन लाभों से उचित है जो वे लाते हैं। कभी-कभी वे उपयोगी हो सकते हैं, लेकिन इसका मतलब यह भी नहीं है कि सीएसएस-इन-जेएस का उपयोग हमेशा और हर जगह किया जाना चाहिए।
तो, CSS-in-JS (cij) में सबसे महत्वपूर्ण बात CSS चयनकर्ता हैं। Cij का सबसे बड़ा फायदा यह है कि कंप्यूटर इन चयनकर्ताओं को स्वचालित रूप से उत्पन्न कर सकते हैं। सम्मेलनों जैसे OOCSS, आदि। सिद्धांत रूप में, वे अच्छे हैं, लेकिन वे हाथ से लिखे गए चयनकर्ताओं पर आधारित हैं, जो सामान्य नामस्थान में विशिष्टता सुनिश्चित करना मुश्किल है, क्योंकि चौराहे के लिए हमेशा एक मौका होता है। यदि यह अब नहीं होता है, तो यह तीन साल बाद हो सकता है, जब आपकी टीम बढ़ती है और परिस्थितियां बदलती हैं। तीसरे पक्ष के पुस्तकालयों का उपयोग करके इस स्थिति को बढ़ा दिया गया है। सीएसएस चयनकर्ताओं के दायरे को सीमित करना सीएसएस मॉड्यूल का उपयोग करके भी प्राप्त किया जा सकता है, जो इस अवसर के लिए सटीक रूप से लोकप्रिय हैं।
फिर भी, इन सभी दृष्टिकोणों के साथ, चयनकर्ताओं को सांख्यिकीय रूप से विश्लेषण करने में बहुत मुश्किल होती है और पाते हैं कि कौन से टूटे हुए हैं (या टाइपोस हैं), जिसका अर्थ है कि कोड-समीक्षा प्रक्रिया में उन्हें मैन्युअल रूप से जांचना होगा, जिससे कमांड की प्रभावशीलता कम हो जाएगी। हमें कंप्यूटर की मदद का उपयोग करना चाहिए और लोगों की अखंडता और दोषरहितता पर भरोसा नहीं करना चाहिए (क्योंकि ऐसा नहीं है)। CSS-in-JS अद्वितीय चयनकर्ताओं और पहचानकर्ताओं की पीढ़ी को स्वचालित करना संभव बनाता है।
इसके अलावा, सीएसएस चयनकर्ताओं पर बढ़ा हुआ नियंत्रण नई संभावनाओं को खोलता है जो पहले आसानी से सुलभ नहीं थे। उदाहरण के लिए, हम बस उन शैलियों के साथ HTML ब्लॉक का मिलान करके महत्वपूर्ण CSS निष्कर्षण को लागू कर सकते हैं, जिससे हम पृष्ठ पर CSS के केवल 1-2 Kb लोड कर सकते हैं, जो पृष्ठ के प्रारंभिक प्रदर्शन के लिए आवश्यक है। बिना किसी क्रम के! गैट्सबी और नेक्स्ट जैसे फ्रेमवर्क सक्रिय रूप से उन पर आधारित परियोजनाओं में प्रदर्शन संकेतकों को बेहतर बनाने के लिए इसका उपयोग करते हैं। वे महत्वपूर्ण सीएसएस को सीधे डाउनलोड करने योग्य HTML में एम्बेड करते हैं, क्योंकि यह इतना कम वजन का होता है कि यह पेज लोडिंग को रोकने के अतिरिक्त अनुरोध से बेहतर होगा। यह प्रारंभिक पृष्ठ रेंडरिंग समय को बहुत कम कर देता है। इसके अलावा, यह डाउनलोड करने योग्य जावास्क्रिप्ट आकार की समस्याओं को हल करने में भी योगदान देता है! लाभ महत्वपूर्ण सीएसएस लागू करने के साथ-साथ गतिशील import() , कोड विभाजन और अप्रयुक्त कोड को हटाने से आते हैं। (कभी-बढ़ती लिगेसी शैली की फ़ाइलों के विपरीत, जिसमें डेवलपर्स केवल नया कोड जोड़ते हैं, मौजूदा वाले को छूने से डरते हैं । इस विषय पर थोड़ा सा विश्लेषिकी है ।)
विषयों के कार्यान्वयन के साथ एक समान स्थिति। क्या आप जानते हैं कि सीएसएस चर , यहां तक कि एक बहुत ही दिलचस्प चीज होने के नाते, उन मामलों का उपयोग करने के लिए बंद नहीं किया गया था जिनके लिए वे मूल रूप से इरादा थे, और सभी क्योंकि पुराने ब्राउज़रों के लिए फ़ॉलबैक विधियां या तो बहुत जटिल थीं या हीन थीं? इसका मतलब है कि वे आमतौर पर वैश्विक स्थिरांक के रूप में उपयोग किए जाते हैं, लेकिन शायद ही कभी चर के रूप में जिसका मूल्य गतिशील रूप से ब्राउज़र में निर्धारित होता है। CSS CSS रनटाइम होने का मतलब है कि आप JS से लेकर स्टाइल तक के मूल्यों को पास कर सकते हैं, जिससे यह संभव है।
वास्तव में, आप इसे पसंद करेंगे: आप अंततः ईमानदारी से सभी ब्राउज़रों में सीएसएस चर का उपयोग कर सकते हैं, अर्थात्, उन ब्राउज़र में रनटाइम के बिना मूल क्षमताएं, जो उनका समर्थन करते हैं, और पुराने ब्राउज़र के लिए एक विशेष रनटाइम। (मैंने इसके बारे में यहां और लिखा है , और - अगर मैं सही ढंग से समझूं तो - यह एकमात्र पुस्तकालय है जिसने यह हासिल किया है)।
घटकों और संसाधनों के अतुल्यकालिक लोडिंग जैसे स्क्रिप्ट और शैलियों के समूह के साथ एक जटिल एसपीए स्थिति में, आप लोडिंग शैलियों के सटीक क्रम की गारंटी नहीं दे सकते हैं, इसलिए या तो आपको शैलियों के आदेश की गारंटी के लिए कुछ प्रकार के रनटाइम समाधान बनाने होंगे, या बस उपयोग करना होगा !important यदि आप किसी प्रकार की CSS कार्यप्रणाली से चिपके रहते हैं । उदाहरण के लिए, आपके पास class=“ab” साथ एक तत्व है, लेकिन वर्गों a और b विभिन्न शैली फ़ाइलों में परिभाषित किया गया है, तो आप ब्लॉक के अंतिम रूप के बारे में सुनिश्चित नहीं हो सकते हैं यदि आपके पास शैली फ़ाइलों का स्पष्ट अनुक्रम क्रम नहीं है। फेसबुक कोडबेस में हजारों !important उपयोग हैं, भले ही कोड को योग्य प्रोग्रामर द्वारा SOLID सिद्धांतों और डिजाइन टीम के साथ अच्छी बातचीत का उपयोग करके लिखा गया था।
यह अक्सर सीएसएस को संभालने के लिए संदर्भित करता है जैसे कि यह जावास्क्रिप्ट था - यह देखते हुए कि 10 साल पहले हम जेएस के लिए इसी तरह की समस्याओं को हल कर रहे थे - पुस्तकालयों और मॉड्यूल ने खुद को वैश्विक नाम स्थान ( $ और इसी तरह) में पंजीकृत किया और हमें कनेक्शन ऑर्डर के साथ काफी सावधान रहना पड़ा HTML में स्क्रिप्ट। लेकिन हम हमेशा के लिए वहां अटक नहीं गए थे - अब हम मॉड्यूल का उपयोग करते हैं, और विधानसभा प्रणाली उन्हें एक साथ गारंटीशुदा सही क्रम में सिलाई करती है। यह हमारे लिए सरल और पारदर्शी है।
वास्तविक परियोजनाओं को देखते हुए, मैंने यह भी देखा कि आप अभी भी सीएसएस-इन-जेएस दुनिया में पारंपरिक वास्तुशिल्प दृष्टिकोण (जैसे ओओसीएसएस या एसएमएसीएसएस, आदि) का उपयोग कर सकते हैं - उन आर्किटेक्चर के तत्वों को जेएस ऑब्जेक्ट्स द्वारा प्रतिनिधित्व किया जाता है, बजाय + चुनिंदा ब्लॉक। शैलियों। मैं यह तरीका अपनाता हूं और यह मेरे लिए अच्छा है। यहाँ आप इसके बारे में अधिक पढ़ सकते हैं।
मैं CSS-in-JS के नुकसानों से भी अच्छी तरह वाकिफ हूं। वास्तव में, यह ठीक है कि कोई "कैनोनिकल" पुस्तकालय नहीं है जो सीएसएस-इन-जेएस का प्रतिनिधित्व करता है - यह एक तरफ वैनिला स्टेटिक सीएसएस से दूसरी तरफ पूरी तरह से गतिशील पुस्तकालयों जैसे पूरी तरह से गतिशील पुस्तकालयों के लिए विभिन्न समाधानों का एक स्पेक्ट्रम है। SASS या LESS जैसे प्रीप्रोसेसर इस स्पेक्ट्रम के लिए लंबवत लग सकते हैं, क्योंकि वे सैद्धांतिक रूप से इन पुस्तकालयों में से किसी का उपयोग अपने लेखकों के विवेक पर कर सकते हैं। इन पुस्तकालयों में से प्रत्येक की अपनी कमियां हैं - कुछ विधानसभा स्तर पर शैलियों को निकालने में लगे हुए हैं ताकि रनटाइम में कोई लागत न हो, कुछ डेवलपर्स के लिए शुद्धता या सुविधा पर केंद्रित हैं, अन्य जटिल एनिमेशन के प्रभावी कार्यान्वयन पर केंद्रित हैं, और इसी तरह और इसके आगे। यह विविधता विभिन्न कार्य कार्यों के लिए अलग-अलग समाधानों की आवश्यकता के लिए एक बहुत तेजी से बढ़ते उद्योग में एक प्राकृतिक प्रतिक्रिया है। और यह न केवल पुस्तकालयों के साथ होता है - वेब मानक डेवलपर्स (शैडोम और अन्य) इन समस्याओं को भी हल करने की कोशिश कर रहे हैं, लेकिन उनके समाधान में कमियां भी हैं, जिनमें से सबसे कम यह है कि वे अभी तक हर जगह उपलब्ध नहीं हैं, जो इसे उपयोग के लिए अस्वीकार्य बनाता है कई टीमों में।
मैं इस बारे में मजबूत भावनाएं रखता था, लेकिन मैंने पिछले कुछ महीनों में अपने विचारों पर संयम रखा है। यह पता चला कि सच्चाई वास्तव में बीच में कहीं निहित है - यह टीमों, आवश्यकताओं, समय, प्रलेखन और कई अन्य कारकों पर निर्भर करता है। इसके अलावा, मुझे नहीं लगता कि यह पाठ इस विचार के "अंतिम रूप" का प्रतिनिधित्व करता है। हमें इस क्षेत्र में प्रयोग को प्रोत्साहित करना चाहिए ताकि हम यह पता लगा सकें कि हम और क्या कर सकते हैं और यहां तक कि ब्राउज़रों में इनमें से कुछ चीजों को एम्बेड भी कर सकते हैं।
पीएस टू लेट मुझे एहसास हुआ कि मैं "अनुवाद" बॉक्स की जांच करना भूल गया था, इसलिए इसे इस तरह से प्रकाशित किया गया था। मूल से लिंक करें ।
Habr, इंटरफ़ेस ठीक करें, आप प्रकाशन के बाद अनुवाद ध्वज क्यों नहीं जोड़ सकते?