लेखन कुशल सीएसएस

Question

ठीक है तो में एक और सवाल कुछ चर्चा हुई जा रहा है, और इस लिंक उल्लेख किया गया था:

https://developer.mozilla.org/en/Writing_Efficient_CSS

कि लेख में, वे कुछ बातें मुझे नहीं पता था कहते हैं, लेकिन के बारे में इससे पहले कि मैं पूछना उन्हें, मुझे यह पूछना चाहिए ... क्या यह फ़ायरफ़ॉक्स द्वारा व्याख्या किए गए सीएसएस पर लागू होता है? मेरी नोबनेस को माफ कर दो, लेकिन मुझे यकीन नहीं था कि मोज़िला यूआई द्वारा उनका क्या मतलब था। (मुझे चोट नहीं!)

यदि यह लागू होता है, जब वे कहते हैं:

वंशज चयनकर्ता से बचें!

वंशज चयनकर्ता सबसे अधिक सीएसएस में महंगे चयनकर्ता है। यह डरावना महंगा है, खासकर अगर चयनकर्ता का उपयोग कर नियम या सार्वभौमिक श्रेणी में है। अक्सर वास्तव में वांछित है बच्चे चयनकर्ता। वंशज चयनकर्ता का उपयोग यूआई सीएसएस में बिना आपकी त्वचा के मॉड्यूल स्वामी की स्पष्ट स्वीकृति के बिना प्रतिबंधित है।

* BAD - treehead treerow treecell { } 
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { } 

वंशज चयनकर्ता सिर्फ एक जगह नहीं है? और फिर बच्चे और वंश के बीच क्या अंतर होगा? बच्चा दूसरे के अंदर एक तत्व है, लेकिन वह वंश के समान नहीं है? जैसा कि मैं लिख रहा हूं, मुझे लगता है कि मैंने इसे समझ लिया होगा। एक वंशज एक बच्चा/पोते/महान-पोते/आदि हो सकता है? और बच्चा केवल एक गहरा है?

फिर से मेरे प्रश्न के बेवकूफ स्तर के लिए खेद है ... बस सोच रहा है, क्योंकि मैं लगातार अपनी साइट के लिए अपने सीएसएस में वंशजों का उपयोग कर रहा हूं। लेकिन हाँ, अगर यह फ़ायरफ़ॉक्स के बारे में नहीं है तो यह पूरा प्रश्न व्यर्थ है ...

यदि यह फ़ायरफ़ॉक्स के बारे में नहीं है, तो क्या किसी के पास फ़ायरफ़ॉक्स या ब्राउज़र के लिए सामान्य रूप से दक्षता समझाते हुए एक लेख का लिंक है?

Answer 1

सबसे पहले - इस लेख में सुझाव HTML पृष्ठों के लिए नहीं हैं - वे मोज़िला यूआई के लिए विशेष रूप हैं - XUL, तो यह XUL के लिए सबसे अच्छा अभ्यास है, लेकिन एचटीएमएल के लिए नहीं हो सकता।

एक औसत HTML पृष्ठ पर सीएसएस को लागू करना पृष्ठ लोड करते समय होने वाली सबसे तेज़ चीजों में से एक है।
इसके अलावा, लेख सीएसएस नियमों को लागू करने का सबसे तेज़ तरीका सुझा सकता है, लेकिन किस कीमत पर? .treecell-इंडेंट {}

है यही कारण है कि लगभग अपमानजनक -

खराब - .treecell.indented {}
अच्छा: उदाहरण के लिए, वे नियम के अनुसार एक से अधिक वर्ग नहीं होने की सलाह देते हैं । यह तेजी से सीएसएस का कारण बन सकता है, लेकिन कौन परवाह करता है? मान लिया जाये कि आप पहले से ही .treecell और .indented है, इन सुझावों को मान जटिल तर्क, कठिन रखरखाव, दोहराया सीएसएस नियम, कठिन जावास्क्रिप्ट (जो एक बहुत अधिक है कि सीएसएस लागत), आदि की ओर जाता है
उनका सुझाव है पूर्ण उपयोग नहीं कर सीएसएस चयनकर्ताओं की समृद्धि और इन चयनकर्ताओं को फ्लैट वर्गों के साथ बदलना, जो शर्म की बात है।

Answer 2

एक वंशज एक बच्चे/पोते/बड़े-पोते/आदि हो सकता है? और बच्चा केवल एक गहरा है?

हाँ, बिल्कुल। चूंकि एक बच्चा केवल एक गहरा हो सकता है, वहां एक बहुत छोटी जगह है कि प्रतिपादन इंजन को यह जांचने के लिए खोजना पड़ता है कि नियम मेल खाता है या नहीं।

और हाँ, यह लेख सामान्य रूप से फ़ायरफ़ॉक्स और ब्राउज़र दोनों के बारे में है। इसमें से अधिकांश (सभी?) किसी भी पृष्ठ प्रतिपादन इंजन पर लागू होते हैं।

Answer 3

एक "पैरेंट> बच्चा" केवल एक कदम नीचे है, जबकि एक "पूर्वज वंश" एक या एक से अधिक कदम हो सकता है।

जहां भी संभव हो वहां "#id" टैग का उपयोग करना बेहतर है जैसे कि कम डोम खोज है। सेटिंग संवाद, एक्सटेंशन इंटरफेस आदि

वंशज और बच्चों से अलग हैं, बच्चों और अधिक विशिष्ट हैं और बहुत कम विचार किया जाना होने में परिणाम -

Answer 4

यूआई सीएसएस ब्राउज़र के आंतरिक स्टाइलिंग के लिए है।

Answer 5

...जैसा कि मैं लिख रहा हूं, मुझे लगता है कि मैंने इसे समझ लिया होगा। एक वंशज एक बच्चा/पोते/महान-पोते/आदि हो सकता है? और बच्चा केवल एक गहरा है?

दरअसल।

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

Answer 6

बच्चे चयनकर्ता के साथ समस्या यह है कि यह भी समर्थित नहीं है। बेशक, यह नए आईई ब्राउज़र पर तय किया गया हो सकता है।

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

Answer 7

O'Reillys सीएसएस चयनकर्ता को सरल बनाना "। यह मोज़िला पर अपने लिंक संदर्भ देता है।

मुझे लगता है कि दो अंक ध्यान में रखते हुए लायक हैं।

1. " Even Faster Web Sites" इस शीर्षक पर एक पूरा अध्याय है " हां, यदि आपने इसे यथासंभव संभव किया है, तो आपका एचटीएमएल और सीएसएस शैलियों की गड़बड़ी होगी और संभवतः फ़ाइल आकार के कारण भी अधिक अक्षम होगा। यह सर्वोत्तम संतुलन लेने के लिए डेवलपर पर निर्भर है। अनुकूलन पर परेशान न हों प्रत्येक पंक्ति जिसे आप लिखते हैं, इसे काम करें, फिर देखें कि क्या फायदेमंद हो सकता है।

2. जैसा कि एक अन्य टिप्पणीकर्ता ने नोट किया है, यह पृष्ठ लोड पर आपकी शैलियों को लागू करने के तरीके को समझने के लिए ब्राउज़र मिलीसेकंड लेता है। हालांकि, जहां इसका बहुत बड़ा प्रभाव हो सकता है डीएचटीएम के साथ। हर बार जब आप डोम बदलते हैं, ब्राउज़र पृष्ठ पर आपकी पूरी स्टाइल शीट को फिर से लागू करता है। इस परिदृश्य में कई अक्षम चयनकर्ता आपके पृष्ठ पर एक प्रभावशाली प्रभाव डाल सकते हैं (माना जाता है कि लापरवाही/उत्तरदायित्व)।

Answer 8

गूगल के पृष्ठ गति के लिए दस्तावेज़ (एक फ़ायरफ़ॉक्स/Firebug ऐड-ऑन) एक good page on efficient CSS भी शामिल है।