एक शैली संपत्ति में एकाधिक सीएसएस चयनकर्ताओं को समूहीकृत करना

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

CSS चयनकर्ताओं को कैसे समूहित करें

CSS चयनकर्ताओं को स्टाइल शीट में समूहित करने के लिए, एकाधिक समूहीकृत चयनकर्ताओं को अलग करने के लिए अल्पविराम का उपयोग करें शैली में। इस उदाहरण में, शैली p और div तत्वों को प्रभावित करती है:

डिव, पी {रंग: #f00; }

इस संदर्भ में, अल्पविराम का अर्थ है "और," इसलिए यह चयनकर्ता सभी अनुच्छेद तत्वों और सभी विभाजन तत्वों पर लागू होता है। यदि अल्पविराम गायब था, तो चयनकर्ता इसके बजाय उन सभी अनुच्छेद तत्वों पर लागू होगा जो एक विभाजन के बच्चे हैं। यह एक अलग तरह का चयनकर्ता है, इसलिए अल्पविराम महत्वपूर्ण है।

आप किसी भी प्रकार के चयनकर्ता को किसी अन्य चयनकर्ता के साथ समूहित कर सकते हैं। यह उदाहरण एक आईडी चयनकर्ता के साथ एक वर्ग चयनकर्ता को समूहित करता है:

p.red, #sub {रंग: #f00; }

यह शैली वर्ग विशेषता वाले किसी भी अनुच्छेद पर लागू होती है लाल और कोई भी तत्व (क्योंकि प्रकार निर्दिष्ट नहीं है) की एक आईडी विशेषता के साथ विषय.

आप चयनकर्ताओं की किसी भी संख्या को समूहीकृत कर सकते हैं, जिसमें एकल शब्द वाले चयनकर्ता और मिश्रित चयनकर्ता शामिल हैं। इस उदाहरण में चार अलग-अलग चयनकर्ता शामिल हैं:

p, .red, #sub, div a: लिंक {रंग: #f00; }

यह सीएसएस नियम इस पर लागू होगा:

• कोई अनुच्छेद तत्व
• वर्ग के साथ कोई भी तत्व लाल
• की आईडी वाला कोई भी तत्व विषय
• संपर्क एंकर तत्वों का छद्म वर्ग जो एक विभाजन के वंशज हैं।

वह अंतिम चयनकर्ता एक मिश्रित चयनकर्ता है। जैसा कि दिखाया गया है, यह इस सीएसएस नियम में अन्य चयनकर्ताओं के साथ आसानी से संयुक्त है। नियम का रंग निर्धारित करता है #f00 (लाल) इन चार चयनकर्ताओं पर, जो एक ही परिणाम प्राप्त करने के लिए चार अलग-अलग चयनकर्ताओं को लिखने के लिए बेहतर है।

किसी भी चयनकर्ता को समूहीकृत किया जा सकता है

आप किसी भी मान्य चयनकर्ता को समूह में रख सकते हैं, और दस्तावेज़ के सभी तत्व जो सभी समूहीकृत तत्वों से मेल खाते हैं, उनकी शैली संपत्ति के आधार पर समान शैली होगी।

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

वें, टीडी, पी.रेड, डिव # फर्स्ट्रेड {रंग: लाल; }

या आप स्पष्टता के लिए शैलियों को अलग-अलग पंक्तियों में सूचीबद्ध कर सकते हैं:

वें,
टीडी,
पी.रेड,
डिव#फर्स्टरेड
{
लाल रंग;
}

समूह सीएसएस चयनकर्ता क्यों?

CSS चयनकर्ताओं को समूहीकृत करना आपकी स्टाइलशीट के आकार को कम करने में मदद करता है इसलिए यह तेजी से लोड होता है बेशक, स्टाइल शीट धीमी लोडिंग में मुख्य अपराधी नहीं हैं; CSS फाइलें टेक्स्ट फाइलें होती हैं, इसलिए बहुत लंबी सीएसएस शीट भी बिना ऑप्टिमाइज्ड इमेज की तुलना में छोटी होती हैं। फिर भी, अनुकूलन के हर बिट में मदद मिलती है, और यदि आप अपने सीएसएस से कुछ आकार शेव कर सकते हैं और पृष्ठों को अधिक तेज़ी से लोड कर सकते हैं, तो यह एक अच्छी बात है।

चयनकर्ताओं को समूहीकृत करना साइट रखरखाव को कहीं अधिक आसान बना देता है। यदि आपको कोई परिवर्तन करने की आवश्यकता है, तो आप एकाधिक के बजाय केवल एक ही CSS नियम संपादित कर सकते हैं। यह दृष्टिकोण समय और परेशानी बचाता है।

निचली पंक्ति: सीएसएस चयनकर्ताओं को समूहीकृत करने से दक्षता, उत्पादकता, संगठन और कुछ मामलों में लोड गति भी बढ़ जाती है।