कम डेवलपर्स के लिए कुछ सुझाव

अक्सर कम-फाइलें बनाना (जो संयोगवश, अन्य सीएसएस प्रीप्रोसेसरों की चिंता करता है), हम कम-कोड की सुंदरता और लालित्य का पीछा करते हैं, जब हम अक्सर संकलित सीएसएस-कोड के बारे में भूल जाते हैं। कभी-कभी यह महत्वपूर्ण परिणाम देता है जब अंतिम सीएसएस की मात्रा समय के कारक से बढ़ जाती है, और कोड पूरी तरह से अपठनीय हो जाता है।

त्याग
1) यह लेख SASS / SCSS डेवलपर्स और CSS लेखकों दोनों के लिए उपयुक्त है।
2) उपरोक्त कोड उदाहरण समान नहीं हैं, लेकिन ज्यादातर मामलों में विनिमेय हैं और युक्तियों को स्पष्ट करने के लिए लिखे गए हैं।

1) बहुत लंबा निवेश न करें

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

बीमार	अच्छी तरह से
#root { max-width: 1200px; margin: 0 auto; .wrapper { padding: 1rem; .cart { background: #eee; h1 { font-size: 2rem; margin: 1rem 0 2rem; &#green-header { color: green; } } .good { border: 0.1rem solid #ccc; } input { border: 1px solid #ccc; &.error { background: #99ffff; } } } } }	#root { max-width: 1200px; margin: 0 auto; .wrapper { padding: 1rem; } } #green-header { color: green; } input.error { background: #99ffff; } .cart { background: #eee; h1 { font-size: 2rem; margin: 1rem 0 2rem; } .good { border: 0.1rem solid #ccc; } }

2) अल्पविराम से अलग चयनकर्ताओं से सावधान रहें

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

बीमार	अच्छी तरह से
form.type { &#typeAddress, &form#typeReview { textarea { background: #eee; } table { td { &.value { padding: 1rem; } &.title { padding: 0.5rem 1rem; margin: 0.5rem 0; } &.value, &.title { background: #eee; color: #444; a { text-decoration: none; padding: 0 0.4rem; } b { color: #ccc; } p { border-left: 0.25rem solid #ece; } } &.result { padding: 1rem 0; background: green; } } } } }	form.type { textarea { background: #eee; } table { td { background: #eee; color: #444; padding: 1rem; a { text-decoration: none; padding: 0 0.4rem; } b { color: #ccc; } p { border-left: 0.25rem solid #ece; } &.title { padding: 0.5rem 1rem; margin: 0.5rem 0; } &.result { padding: 1rem 0; background: green; } } } }

3) मिश्रण

अधिक बार मिश्रण बनाएं

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

मिश्रण पैरामीटर का उपयोग करें

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

बीमार

अच्छी तरह से

@color-btn: #ea186e; @color-txt: #000; .btn-flat() { display: inline-block; text-align: center; text-decoration: none; margin: 1rem 0; padding: 0.5rem 1rem; background: @color-btn; color: @color-txt; border: 0.1rem solid darken(@color-btn,15%); } #root { a.btn { .btn-flat; } button { .btn-flat; background: #ccc; color: #303; padding: 0.75rem 1.5rem; margin: 1.5rem 0; border: 0.2rem solid darken(#ccc,15%); } }

@color-btn: #ea186e; @color-txt: #000; .btn-flat(@bgcolor: @color-btn, @color: @color-txt, @pad: 1rem) { display: inline-block; text-align: center; text-decoration: none; margin: @pad 0; padding: @pad/2 @pad; background: @bgcolor; color: @color; border: @pad/10 solid darken(@bgcolor,15%); } #root { a.btn { .btn-flat; } button { .btn-flat(#ccc, #303, 1.5rem); } }

एक अच्छा मिश्रण एक छोटा सा मिश्रण है

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

 @pad: 0.5rem; @bpad: @pad/5; @color-back: #fff; @color-btn: maroon; .border(@color: #ccc) { border: @bpad solid @color; } .gradient(@c1,@c2){ background: @c1; background: -moz-linear-gradient(top, @c1 0%, @c2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@c1), color-stop(100%,@c2)); background: -webkit-linear-gradient(top, @c1 0%,@c2 100%); background: -o-linear-gradient(top, @c1 0%,@c2 100%); background: -ms-linear-gradient(top, @c1 0%,@c2 100%); background: linear-gradient(to bottom, @c1 0%,@c2 100%); } .btn(@padding: @pad) { padding: @padding/2 @padding; display: inline-block; text-align: center; text-decoration: none; } .btn-simple(@color: @color-btn) { .btn; .border(darken(@color,7%)); .gradient(lighten(@color,3%), darken(@color,3%)); color: @color-back; color: lighten(@color,40%); &:hover { .gradient(darken(@color,3%), darken(@color,8%)); color: lighten(@color,50%); } &:active { .gradient(darken(@color,15%), darken(@color,15%)); color: lighten(@color,10%); .border(darken(@color,25%)); } } 

4) अपने टेम्पलेट का उपयोग करें

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

5) चर का उपयोग करें

रंग के लिए, आकार के लिए चर। यह ग्रिड से चिपके रहने और तत्वों को संरेखित करने में मदद करता है।
मैं ब्लॉक आकार और पैडिंग सेट करने के लिए रेम इकाइयों का उपयोग करता हूं, वे अच्छे हैं क्योंकि वे मूल फ़ॉन्ट के आकार से स्वतंत्र हैं। इस प्रकार, क्षैतिज संकेत समान हो जाते हैं, भले ही हम फ़ॉन्ट आकार बदलते हों। और इसके अलावा, html टैग के लिए स्क्रीन रिज़ॉल्यूशन से फ़ॉन्ट आकार परिवर्तन सेट करके, सभी आकार आनुपातिक रूप से बढ़ेंगे। यह टैबलेट पर लागू होता है: "टेलीफोन" पैमाने की तुलना में पाठ और इंडेंटेशन थोड़ा बड़ा होना चाहिए। (आधुनिक ब्राउज़रों में काम करता है, यानी 9 +)

---

संक्षेप में देना

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

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