बुरा, लेकिन मेरा: कैसे सच में भयानक सीएसएस लिखने के लिए

यह ओहांस इमैनुएल के एक लेख का अनुवाद है , जो कई वर्षों से वेबसाइटों और सेवाओं के विकास में काम कर रहा है। उनका मुख्य शौक सीएसएस है, यहां उन्हें पानी में मछली की तरह महसूस होता है। ओहांस स्वेच्छा से काम और ज्ञान के अपने प्यार को पाठकों तक पहुंचाते हैं।

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

स्किलबॉक्स की सलाह है: ऑनलाइन शिक्षा वेब पेशे पेशेवर पाठ्यक्रम।
हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रचारक कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

आपको टिप्पणियों की आवश्यकता क्यों है? वे केवल जूनियर्स द्वारा लिखे गए हैं!

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

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

अपने सहकर्मियों या अपने आप को भविष्य में पीड़ित न करें, टिप्पणियों के बारे में मत भूलना। हर कोई टिप्पणी की आवश्यकता की बात करता है, लेकिन, दुर्भाग्य से, हमेशा बात करने का मतलब इस नियम के कार्यान्वयन से है।

चयनकर्ता जितना कठिन होगा, उतना ही बेहतर होगा

अरे हाँ! आपने बस CSS (मूल बातें) सीखी और अब आप दुनिया के राजा की तरह महसूस करते हैं। यह आपके आसपास के दुर्भाग्यपूर्ण लोगों को दिखाने का समय है कि चयनकर्ता कितने जटिल हो सकते हैं।

बुरी चाल।

यदि आप बहुत अधिक चयनकर्ताओं का उपयोग करते हैं, तो आप अपनी साइट या सेवा के HTML संरचना से इन सभी को बारीकी से जोड़कर CSS को जटिल बनाते हैं।

यदि बाद में लेआउट बदलता है, तो आपको सीएसएस को बदलना होगा। और फिर, हम समय, पैसा और सहयोगियों का प्यार खो देते हैं।

एक समाधान है: बस कक्षाओं का उपयोग करें और एक पूर्ण जीवन जीएं। संरचना जितनी सरल होगी, उसके साथ काम करना उतना ही आसान होगा। सीएसएस में, कई अन्य क्षेत्रों की तरह, कहा जाता है कि "ब्रेविटी प्रतिभा की बहन है" प्रासंगिक है।

प्रदर्शन? उसकी जरूरत भी नहीं है

एक बड़ी गलती एक साइट या सेवा के प्रदर्शन के बारे में भूलना है। यदि आप इसका ध्यान नहीं रखते हैं, तो परिणाम उस कंपनी के पूरे ऑनलाइन व्यवसाय को नकारात्मक रूप से प्रभावित कर सकते हैं जिसके लिए साइट बनाई जा रही है, और इसलिए आपकी प्रतिष्ठा।

उपयोगकर्ताओं को परेशान न करें, सब कुछ तुरंत करें।

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

आप संभावित रूप से चयनकर्ताओं के माध्यम से बाएं से दाएं देख रहे हैं। लेकिन ब्राउज़र इसके विपरीत करता है, इसलिए यह उन चयनकर्ताओं को अनदेखा कर सकता है जो अंतिम रूप से पाए जाते हैं। अपने आप के रूप में ब्राउज़र का ख्याल रखें।

ऊपर दिए गए चित्र में CSS उदाहरण देखें। इस मामले में, ब्राउज़र सभी तत्वों (*) की उपस्थिति की जांच करेगा, साथ ही यह भी कि क्या वे बाल निकाय चयनकर्ता हैं।

<source lang="css">body * { ... } 

लेकिन क्यों? तथ्य यह है कि लगभग कोई भी दृश्य तत्व आदर्श रूप से एक बाल तत्व है। सत्यापन अर्थहीन और अप्रभावी है।

खराब सीएसएस शैली का नामकरण? हम भगवान के रूप में आत्मा पर डालते हैं

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

ईमानदारी से, मुझे संदेह है कि कुछ स्थितियों में एक वर्ग के नाम के रूप में एक अक्षर का उपयोग करने के लायक है।

 .u { font-size: 60rem; } 

ठीक है, अगर हम सुपर-विस्तृत नामकरण लेते हैं तो क्या होगा?

 .former-black-now-red-paragraph { color: red; } 

ठीक है, इसलिए भी, सहमत हैं।

जबकि दूसरा विकल्प स्वीकार्य लग सकता है, कक्षा का पुन: उपयोग करना एक कठिन काम होगा। उदाहरण के लिए, यदि एक पैराग्राफ अलग रंग बनाना चाहता है, तो ऐसा नाम बहुत अजीब लगेगा।

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

मैं हर जगह कक्षाओं का उपयोग करना चाहता हूं, यह बहुत अच्छा है ... अच्छा है!

हां, कक्षाएं शांत हैं, बहुत से लोग उन्हें पसंद करते हैं। लेकिन, हर चीज की तरह, उनका उपयोग केवल वहीं किया जाना चाहिए, जहां इसकी जरूरत है।

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

और हाँ, जब भी संभव हो मॉड्यूलर कक्षाओं का उपयोग करने से बचें।

मैं सीएसएस परफेक्शनिस्ट हूं। एसएसएस, कम - मेरे लिए नहीं!

हम सभी तरह के पूर्णतावादी हैं। यदि संभव हो तो, यह सीएसएस-इन-जेएस (कुछ रिएक्ट परियोजनाओं के लिए एक महान समाधान) जैसे समाधानों के बिना शुद्ध सीएसएस का उपयोग करने के लायक है।

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

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

हमने डाला! महत्वपूर्ण हर जगह

ओह, यह सीएसएस, यह कभी काम नहीं करता है। चलो दर्जनों और सैकड़ों के साथ समस्या को ठीक करें! महत्वपूर्ण यहां और वहां बिखरे हुए हैं! महान विचार, है ना?

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

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

और अंत में, हम उन लोगों को सलाह दे सकते हैं जो अच्छी CSS लेखन तकनीकों की वकालत करते हैं:

• CSS में सामग्री संरचना का उपयोग करें, अर्थात, सामग्री की एक प्रकार की तालिका, जो यदि आवश्यक हो तो कोड के सही वर्गों को खोजने में मदद करेगी।
• सीएसएस को पठनीय बनाओ, यानी स्वच्छ नियम सेट बनाएं जो सीएसएस को पढ़ने में आसान बनाते हैं।
• अलग jQuery प्लगइन शैलियों।
• एक शैली रीसेट फ़ाइल का उपयोग करें, जो आपको सामान्य ब्राउज़र के साथ विभिन्न ब्राउज़रों में प्रदर्शन अंतर को कम करने की अनुमति देता है।
• पिछले सीएसएस एनिमेशन जोड़ें।

स्किलबॉक्स अनुशंसा करता है:

• ऑनलाइन पाठ्यक्रम "खरोंच से अजगर डेवलपर । "
• व्यावहारिक वार्षिक पाठ्यक्रम "पीएचपी-डेवलपर खरोंच से प्रो तक" ।
• शैक्षिक ऑनलाइन पाठ्यक्रम "पेशे जावा-डेवलपर" ।