कम/SASS सीएसएस minification/अनुकूलन से विपरीत?

Question

मुझे आश्चर्य है कि मैं कह सकता हूं कि कम/SASS सीएसएस "प्री-प्रोसेसर (मुझे लगता है कि उन्हें बुलाया जाता है?)" क्या कमीशन जैसे अनुकूलन के विपरीत है? मुझे आश्चर्य है कि क्या कोई उल्लेखनीय प्रदर्शन प्रभाव होगा? या क्या आपको लगता है कि विकास आसान है और अधिक महत्वपूर्ण है?

मैं इस पूछना क्या कम सीएसएस उत्पन्न करता है जैसे

body #div1 #div2 p 
body #div1 #div2 p a:link, body #div1 #div2 p a:visited 
... 

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

Answer 1

आप आश्चर्यचकित होंगे, लेकिन जीएसपीड सीएसएस फाइलें जो कोड के ब्लॉक को दोहराती हैं, छोटे चयनकर्ताओं के मुकाबले ज्यादा नहीं होनी चाहिए।

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

स्वाभाविक रूप से, इसकी कुंजी यह सुनिश्चित कर रही है कि आपकी सीएसएस फाइलें gzipped हैं - उन्हें असंपीड़ित छोड़कर निश्चित रूप से फ़ाइल आकार में वृद्धि होगी।

Answer 2

options पर निर्भर करता है, एसएएसएस विभिन्न शैलियों में आउटपुट दे सकता है। उत्पादन के लिए, आप आउटपुट शैली को 'कॉम्पैक्ट' पर सेट करना चाहेंगे।

Answer 3

सास में आप nesting कामों को समझकर 'विशिष्टता ब्लोट' को नियंत्रित कर सकते हैं। यदि आप नहीं चाहते हैं तो आपको किसी भी घोंसले को करने की ज़रूरत नहीं है - यह ऐसा कुछ है जिसे आप नियंत्रित कर सकते हैं।

नई @extend directive का उपयोग करना, आप वास्तव में अपने सीएसएस में अतिरेक OOCSS की priciples लगाने से कम कर सकते हैं और इस प्रकार प्रदर्शन में सुधार कर सकते हैं। get you started with @extend पर एक अच्छा लेख यहां दिया गया है। और कुछ और OOCSS संसाधन:

• http://www.stubbornella.org/content/category/general/geek/css/oocss-css-geek-general/
• http://wiki.github.com/stubbornella/oocss/faq
• http://oocss.org/

सास में @extend का सबसे बड़ा फायदा यह है कि यह पुस्तिका OOCSS लागू करने में शामिल प्रयास लेता है और यह बनाता है आश्चर्यजनक दर्द रहित और आसान।

अंत में, के रूप में एंड्रिया ने कहा, सास सीएसएस को कम करने के लिए विकल्प की एक किस्म है (:compressed style देखें), तो कुल मिलाकर आप वास्तव में केवल एक डेवलपर के रूप में अपने प्रदर्शन में सुधार नहीं, लेकिन यह भी सुधार के लिए एक बहुत शक्तिशाली टूलकिट मिल गया है आपके सीएसएस का प्रदर्शन। कार्रवाई के इस उदाहरण के लिए, देखें कि क्रिस एपस्टीन, Compass के लेखक और सास के मूल योगदानकर्ता, refactors the Digg stylesheet कोड की 125 लाइनों से कोड की 85 लाइनों (32% की कमी) से नीचे देखें।

Answer 4

सास के लिए एक फायरबग एडन है जो चीजों को पढ़ने में आसान बनाना चाहिए। आपको वास्तव में आउटपुट को सीधे पढ़ने की ज़रूरत नहीं है।

सास, कम और एक्ससीएसएस अधिक आउटपुट उत्पन्न करेगा लेकिन मैं इसे ब्लोट नहीं कहूंगा।

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

तो आपको हाथ से लिखित सीएसएस फ़ाइल के खिलाफ अपने अच्छी तरह से स्वरूपित सास/कम फ़ाइल के शुरुआती पदचिह्न का वजन उठाना होगा जिसे कुछ बार संपादित किया गया है।

सैस पर एक और लाभ यह है कि आपका HTML दुबला हो जाता है। सीएसएस की फ्लैट, वैश्विक संरचना के लिए आपको अपने कोड में कक्षा के नामों को जोड़ने की आवश्यकता नहीं है।