CSS स्टैट्स को समझना: अधिकांश नंबर कैसे बनाएं

यदि आप ध्यान नहीं देते हैं, तो CSS विश्लेषण साइट cssstats.com ने हाल ही में एक ओवरहाल प्राप्त किया है। यह एक खूबसूरती से डिज़ाइन किया गया टूल है जो आपको अपने कोड में बहुत अधिक जानकारी प्रदान करता है, लेकिन आप सीएसएस आँकड़ों का सर्वश्रेष्ठ उपयोग कैसे कर सकते हैं? आप के लिए क्या शूट करना चाहिए? उनका क्या मतलब है, और आप उन्हें दिन-प्रतिदिन कैसे उपयोग कर सकते हैं?

आज, हम CSS सर्वोत्तम प्रथाओं, विशिष्टता और रखरखाव के बारे में बात करने जा रहे हैं, साथ ही आप सीखेंगे कि CSS के आँकड़ों का ठीक से इस्तेमाल करने और बेहतर इस्तेमाल कैसे करें। चलो अंदर चलो!

CSS आँकड़े के लिए क्विक आरंभ गाइड

cssstats.com पर जाएं, अपनी वेबसाइट का url, स्टाइलशीट दर्ज करें, या CSS को सीधा सीधे टेक्स्टएरिया में पेस्ट करें और Go को दबाएं।

एक बार पार्स किए जाने पर, आपको CSS के बारे में आंकड़े एक टन दिए जाएंगे; नियमों की संख्या, उनके औसत आकार, प्रत्येक प्रकार की घोषणा, फ़ॉन्ट और बैकग्राउंड रंग, फ़ॉन्ट फॅमिलेस और आकार, और विशिष्टता ग्राफ़ के टूटने से।

यही CSS स्टैट्स वाकई आपको देता है, अब हम देखते हैं कि हम सभी डेटा के साथ क्या कर सकते हैं।

रखरखाव पर फोकस

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

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

कई अलग-अलग पहलुओं पर CSS केंद्रों की रखरखाव।

• कितनी आसानी से आप एक विशेष मॉड्यूल डिजाइन कर सकते हैं?
• आप आसानी से उस मॉड्यूल का एक संशोधित संस्करण कैसे डिज़ाइन कर सकते हैं?
• क्या कोई नया डेवलपर आपके CSS कार्यरत प्रणालियों को व्यापक रूप से समझ सकता है?
• क्या आपका CSS भविष्यवाणी, सुसंगत और संगठित है?
• क्या आप विकास और विभाजन को और अधिक लचीला बनाने के लिए एक प्रीप्रोसेसर (या अन्य उपकरण) पर निर्भर हैं?
• क्या आप अक्सर अपने आप को दोहराते हैं?
• क्या आप पहले स्थापित नाम और स्टाइल सम्मेलनों का उपयोग कर रहे हैं?

हम इन वस्तुओं में से प्रत्येक में डाइविंग नहीं होंगे, लेकिन जब हम रखरखाव के बारे में बात करते हैं, तो ये प्रत्येक विचार आपके कोडबेस के समग्र रखरखाव को प्रभावित करते हैं।

तो, ये आँकड़े आपको रखरखाव के बारे में क्या बताते हैं?

ईमानदार उत्तर? कुछ, जरूरी नहीं है CSS आँकड़ों को देखकर आप रखरखाव के बारे में कुछ नहीं सीखते हैं। आपको उस विशिष्ट CSS के संदर्भ के साथ-साथ सक्रिय विकास के संदर्भ को भी समझना चाहिए।

अपने CSS आँकड़े का विश्लेषण करने का पहला तरीका CSS ब्लोट के संकेतों को देखना है।

ब्लोट

ब्लोट द्वारा हम अप्रयुक्त, बेमानी, या अन्यथा अनावश्यक CSS मतलब है।

साइट का कौन सा स्केल CSS लोड कर रहा है?

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

यदि आप चयनकर्ताओं की एक बड़ी संख्या देख रहे हैं (उदाहरण के लिए, यदि आपकी सरल एकल पृष्ठ साइट में Bootstrap जैसे वेब फ्रेमवर्क के रूप में बहुत CSS शामिल है, जो 2400 चयनकर्ताओं के अंतर्गत घड़ियां खड़ी करता है), तो यह संभव है कि आप कहीं गलत हो गए हों। यदि आप 30 फ़ॉन्ट आकारों में लोड कर रहे हैं और 10 के लिए आपके डिज़ाइन कॉल हैं, तो यह संभव है कि आपने अप्रयुक्त, फूला हुआ स्टाइल्स या संभवत: असंगत स्टाइल्स का उपयोग किया हो।

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

साइट के किस प्रकार के पृष्ठ लोड होते हैं?

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

हालांकि, यदि आप ऐसा कुछ बना रहे हैं, उदाहरण के लिए, एक सीमित रंग योजना वाला एक ब्लॉग, आपके CSS स्टैट्स को उस रंग चयन और फ़ॉन्ट घोषणा गिनती को प्रतिबिंबित करना चाहिए।

नियमों के बीच अतिरेक

क्या आप अपने CSS में एक ही फ़ॉन्ट आकार बीस बार परिभाषित करते हैं? बहुत बार यह से बचा जा सकता है, और आमतौर पर योजना की कमी का नतीजा है। यदि आप किसी भी अन्य CSS लिखने से पहले अपने फ़ॉन्ट आकार निर्धारित करते हैं, तो आप और अधिक आसानी से उन सभी आकारों को लागू करने में सक्षम होंगे जो पूरे सिस्टम में हैं।

किसी भी दोहराया स्टाइल के लिए भी यही सच है; यदि आप खुद को एक ही बार एक ही बात लिखते हैं, शायद स्टाइल्स के सेट में यह अपनी वर्तमान या अर्थिक कक्षा या अन्य मॉड्यूलर परिभाषा के योग्य है?

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

1

.btn {

2

    font-size: 1.2em;

3

    font-weight: 400;

4

    letter-spacing: .06em;

5

    color: #fff;

6

    background-color: #4a4a4a;

7

    padding: 6px 8px;

8

}

कहते हैं कि आप उसी बटन का एक नीला संस्करण चाहते हैं। आपको यह परिभाषित करने के बारे में कैसे जाना चाहिए? यदि आप एक ही btn क्लास को फिर से परिभाषित करते हैं, तो ऐसा कुछ दिखाई देगा:

1

.btn-blue {

2

    font-size: 1.2em;

3

    font-weight: 400;

4

    letter-spacing: .06em;

5

    color: #fff;

6

    background-color: #0C508D;

7

    padding: 6px 8px;

8

}

बेशक, इस के साथ कई समस्याएं हैं। सबसे पहले, यह DRY (don't repeat yourself) सिद्धांत का उल्लंघन करता है। लेकिन ऐसा क्यों होता है? रख-रखाव। उदाहरण के लिए, हम कहते हैं कि डिज़ाइन बदलता है और बटन पर छोटे फ़ॉन्ट्स के लिए कॉल करता है। फिर आपको फ़ॉन्ट आकार बदलने के लिए .btn और .btn-blue क्लास में जाना होगा। इससे भी अधिक जटिलता तब होती है जब आपको नीले और नियमित ग्रे बटन के वेरिएंट की आवश्यकता होती है, जैसे नीली-रूपरेखा संस्करण। किसी भी एक बटन में आपके सभी बदलाव कई बटनों पर किए जाने चाहिए।

यह अविश्वसनीय अक्षम है। इसके बजाय, आपको इस तथ्य का फायदा उठाना चाहिए कि क्लास मॉड्यूलर हैं, और आप बटन स्टाइल को परिभाषित करने की अनुमति देते हैं जो आपके आधार का विस्तार करते हैं .btn क्लास।

1

.btn {

2

    font-size: 1.2em;

3

    font-weight: 400;

4

    letter-spacing: .06em;

5

    color: #fff;

6

    background-color: #4a4a4a;

7

    padding: 6px 8px;

8

}

9

.btn.btn-blue {

10

    background-color: #0C508D;

11

}

अहा! और अब हमारे पास एक बहुत अधिक संतोषणीय समाधान है, जो CSS की एक महत्वपूर्ण संख्या को भी हटा देता है और DRY सिद्धांत का पालन करता है।

विशेषता

विशिष्टता CSS के कड़ी-से-समझने के अंधेरे कोने में से एक है जो अक्सर सबसे अनुभवी डेवलपर्स भी दौरे करता है। CSS आँकड़े पर, आप एक विशिष्टता चार्ट देख सकते हैं जो दिखाता है कि आपके CSS में चयनकर्ता कितने विशिष्ट हैं, साथ ही साथ जहां उन चयनकर्ताओं को दिखाया गया है।

यह ग्राफ सेलेक्टर्स की विशिष्टता को दिखाता है क्योंकि वे bbc.co.uk में CSS एनकाउंटर किये जाते हैं। ग्राफ की बाईं ओर स्टाइलशीट के ऊपर की कल्पना कीजिए, फिर यह x axis के साथ चलता है, क्योंकि यह स्टाइलशीट को पढ़ता है। अधिक विशिष्ट नियम, y axis पर गहरे नीली रेखा उच्च है।

अंगूठे के विशिष्ट नियम

हम तीन सामान्य "अंगूठे के नियम" के साथ शुरू करने के लिए, और फिर नियमों की व्याख्या करेंगे।

1. कम विशिष्ट से अधिक विशिष्ट तक जाएं
2. न्यूनतम संभव औसत विशिष्टता के लिए शूट करें
3. अपने चार्ट में चोटियों को कम करें

हम गहराई से इनमें से प्रत्येक के बारे में बात करेंगे, लेकिन पहले हम थोड़ा कैसे बात करते हैं कि विशिष्टता कैसे काम करती है।

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

1

a {

2

    color: #fff;

3

}

4

a.button {

5

    color: #000;

6

}

जब CSS इंजन एक <a> टैग के एक क्लास के साथ button टैग का सामना करता है, तो यह निर्धारित करना चाहिए कि color विशेषता #fff, #000, या ब्राउज़र डिफ़ॉल्ट होने चाहिए। CSS विशिष्टता नियम निर्धारण है जो ब्राउज़र इस निर्धारण को बनाने के लिए उपयोग करता है।

Points

तो, विशिष्टता कैसे काम करती है? इस स्कोरिंग सिस्टम को एक गाइड के रूप में उपयोग करें, सीधे CSS ट्रिक्स से लिया गया है:

• तत्व चयनकर्ताओं और छद्म तत्वों को 1 अंक प्राप्त होता है।
• क्लास चयनकर्ताओं और पीईडीओओ-कक्षाएं 1,0 अंक प्राप्त करती हैं।
• ID चयनकर्ताओं को 1,0,0 अंक मिले।
• इनलाइन स्टाइल्स को 1,0,0,0 अंक मिलते हैं।
• !important सबको ट्रम्प्स करता है
• * चयनकर्ताओं को सभी 0 के विशिष्टता स्कोर मिलेंगे।

ध्यान दें कि इस स्कोरिंग सिस्टम में, जब कुछ 10 से अधिक हो जाता है, तो वह अगले कॉलम में नहीं जाता है, इसलिए उदाहरण के लिए यदि आपके पास एक चयनकर्ता था जो 11 तत्व लंबा था, तो वह 0 की विशिष्टता नहीं होगी, 0,1,1। इसके बजाय 0,0,0,11 होगा।

यहां कुछ चयनकर्ता और उनके परिणामस्वरूप स्कोर हैं।

1

nav li a {} /* 0,0,0,3 */

2

.nav-item {} /* 0,0,1,0 */

3

nav .nav-item {} /* 0,0,1,1 */

4

#logo {} /* 0,1,0,0 */

1

<a href="/" style="background-color: red;"> 

2

<!-- 

3

    In this instance, the background-color 

4

    rule will have its own specificity 

5

-->

1

a {

2

    background-color: blue !important;

3

}

4

/* 

5

    In the previous example, we used inline 

6

    styles to set the background color to red. 

7

    However, if we applied this style with the 

8

    !important qualifier, it would override 

9

    the inline style. 

10

*/

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

# 1 कम विशिष्ट से अधिक विशिष्ट तक जाएं

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

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

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

यह अभ्यास यह सुनिश्चित करेगा कि एक ही परियोजना के बाद के विकास को कैस्केडिंग सिस्टम को तुरंत समझ सकें।

#2 न्यूनतम संभव औसत विशिष्टता के लिए शूट करें

यदि आप लंबे समय तक एक फ्रंट-एंड डेवलपर रहे हैं, तो संभवतः आपको "CSS विशिष्टता युद्ध" का अनुभव हुआ है। आप एक चयनकर्ता और कुछ नियम लिखते हैं, फिर ब्राउज़र को केवल तभी रीफ़्रेश करें कि परिवर्तन लागू नहीं किए गए हैं। आप पिछले परियोजनाओं से या विशिष्टता के बारे में वार्तालापों से जानते हैं कि यह आपके चयनकर्ता के लिए पर्याप्त नहीं है, इसलिए चयनकर्ता को समस्या का पता लगाने की कोशिश करने के बजाय जो विशिष्ट है, आप नए और अधिक विशिष्ट बनाने का निर्णय लेते हैं। आप एक या दो आईडी जोड़ते हैं, और यदि वह चाल नहीं चलती है, तो आप !important थ्रो कर सकते हैं। और, वॉयला - आपकी स्टाइल दिखाती है।

यह दृष्टिकोण काम करता है, तकनीकी रूप से बोल रहा है; लेकिन दुर्भाग्य से, जब भी आप उस स्टाइल का विस्तार करना चाहते हैं, आपको जटिलता को बढ़ाना जारी रखना होगा, और इससे पहले कि आप जानते हों कि आपके चयनकर्ता बेहद विशिष्ट हैं, और आपको क्लासेस को फिर से उपयोग करने के बजाय कोड को दोहराएं। उस के ऊपर, यह निर्धारित करना लगभग असंभव है कि किसी भी नई स्टाइल को अधिक से अधिक ID जोड़ने के बिना विशिष्टता का स्तर क्या होगा और !important घोषणाएं।

अपने चयनकर्ताओं को कम विशिष्ट रखते हुए अपने CSS को संभालने के लिए एक बहुत ही स्वच्छ, अधिक सुयोग्य तरीका है।

कुछ समर्थक सुझाव:

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

#3 अपने चार्ट में चोटियों को कम करें

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

निष्कर्ष

CSS आँकड़े आपको अपने CSS लिखने के तरीके के बारे में जानकारी प्रदान कर सकते हैं, लेकिन यह केवल उपयोगी है अगर आपको यह पता चल गया कि उन आंकड़ों का विश्लेषण करने से पहले ऐसा नज़रिया क्या दिखना चाहिए। इसका अर्थ है कि आपका CSS किस प्रकार लिखा गया है और क्यों इसके बारे में गहन प्रासंगिक समझ है। यदि आपकी CSS साइट पर इस्तेमाल की जाने योग्य है और उपयुक्त है, तो उस CSS के आंकड़े आपके कोड को रिफैक्टर करने के लिए पर्याप्त नहीं हैं।

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

आगे की पढाई

• हैरी रॉबर्ट्स द्वारा The Specificity Graph
• CSS: Specificity Wars (a classic) by Andy Clarke
• Specificity on MDN
• Specifics on CSS Specificity by Chris Coyier
• cssstats.com