कैस्केडिंग स्टाइल शीट्स (सीएसएस) के साथ काम करना नौसिखियों के लिए कठिन हो सकता है। CSS का उपयोग करके, आप अपने एप्लिकेशन की संरचना, अद्यतन और रखरखाव कर सकते हैं। लेकिन वांछित लेआउट प्राप्त करने के लिए भाषा को HTML पृष्ठों में हेरफेर करने के लिए कौशल की आवश्यकता होती है।
CSS के साथ काम करते समय बचने वाली कुछ गलतियाँ यहाँ दी गई हैं। वे आपका समय बचाएंगे और आपकी विकास प्रक्रिया को आसान बनाएंगे।
1. फ़ॉन्ट आकार के लिए पीएक्स का उपयोग करना
"पीएक्स" इकाई पिक्सेल का प्रतिनिधित्व करती है। आप किसी तत्व की चौड़ाई और ऊंचाई से लेकर उसके फ़ॉन्ट आकार तक, वेब पेज पर विभिन्न लंबाई को व्यक्त करने के लिए इसका उपयोग कर सकते हैं।
हालाँकि, px आपके डिज़ाइन को सभी स्क्रीन के लिए एक निश्चित आकार में लॉक कर देता है। पीएक्स में एक छवि एक स्क्रीन की पूरी चौड़ाई ले सकती है, और दूसरे का केवल एक छोटा सा अनुपात। यदि आप अधिक आनुपातिक तत्व चाहते हैं, सापेक्ष माप का उपयोग करें जैसे रेम, या प्रतिशत (%)।
उपयोग करने के लिए सबसे अच्छा सापेक्ष माप रेम है। यह इकाई मूल तत्व के फ़ॉन्ट आकार को संदर्भित करती है जिसे एक पाठक अक्सर अपने ब्राउज़र सेटिंग्स में सेट कर सकता है। आप निम्न उदाहरण में किसी तत्व पर px और rem का प्रभाव देख सकते हैं:
एचटीएमएल>
<एचटीएमएल>
<सिर>सिर>
<शरीर>
<एच 1>यह शीर्षक 1 हैएच 1>
<एच 2>यह शीर्षक 2 हैएच 2>
<पी>यह एक पैराग्राफ है।पी>
<पी>यह एक और पैराग्राफ है।पी>
शरीर>
एचटीएमएल>आप निम्नलिखित सीएसएस के साथ पीएक्स इकाइयों का उपयोग करके इस दस्तावेज़ में फ़ॉन्ट आकार शैलीबद्ध कर सकते हैं:
एच 1 {
फ़ॉन्ट आकार: 50पिक्सल;
}एच 2 {
फ़ॉन्ट आकार: 30पिक्सल;
}
पी {
फ़ॉन्ट आकार: 15पिक्सल;
}
जब आप इसे बड़ी स्क्रीन पर देखते हैं तो परिणामी पृष्ठ स्वीकार्य लगता है:
लेकिन यह छोटी स्क्रीन पर प्रस्तुत करने योग्य नहीं दिखता है, जैसे फ़ोन पर:
अगला, उसी सामग्री पर रेम लागू करें। HTML तत्व पर एक आधार फ़ॉन्ट-आकार निर्दिष्ट करें, और अन्य तत्वों को rems का उपयोग करके आकार दें, जैसा कि नीचे दिखाया गया है:
एचटीएमएल {
फ़ॉन्ट आकार: 16पिक्सल;
}एच 1 {
फ़ॉन्ट आकार: 3रेम;
}एच 2 {
फ़ॉन्ट आकार: 2रेम;
}
पी {
फ़ॉन्ट आकार: 1रेम;
}
बड़ी और छोटी स्क्रीन के बीच अंतर पर ध्यान दें। रेम के साथ, स्क्रीन आकार की परवाह किए बिना सामग्री बेहतर होती है। तत्व सेट स्क्रीन आकार से अधिक नहीं होंगे। इसलिए पिक्सल के बजाय सापेक्ष लंबाई का उपयोग करना बेहतर है।
डेस्कटॉप स्क्रीन पर:
छोटे पर्दे पर, रेम इकाइयों में पाठ अभी भी पढ़ने योग्य है:
2. अपनी सभी शैलियों को एक फ़ाइल में रखना
किसी बड़े प्रोजेक्ट के लिए एक CSS फ़ाइल का उपयोग करने से गड़बड़ हो सकती है। आपके पास कोड की लंबी लाइनों वाली एक फ़ाइल होगी जो अद्यतन करते समय भ्रमित हो जाएगी। विभिन्न घटकों के लिए सीएसएस स्टाइल शीट के लिए अलग-अलग फाइलों का उपयोग करने का प्रयास करें।
उदाहरण के लिए, आपके पास नेविगेशन, हेडर और फुटर के लिए अलग-अलग फाइलें हो सकती हैं। और दूसरा शरीर पर वर्गों के लिए। अपनी CSS फाइलों को अलग करने से आपके ऐप को स्ट्रक्चर करने और कोड उपयोगिता को प्रोत्साहित करने में मदद मिलती है।
3. इनलाइन CSS का अनुचित तरीके से उपयोग करना
वेनिला सीएसएस में आप एचटीएमएल पेजों पर स्टाइल लिख सकते हैं बूटस्ट्रैप और टेलविंडसीएसएस जैसे सीएसएस फ्रेमवर्क. इनलाइन CSS आपको एक HTML तत्व के लिए एक अनूठी शैली लागू करने की अनुमति देता है। यह HTML तत्व की शैली विशेषता का उपयोग करता है।
निम्नलिखित कोड इनलाइन CSS का एक उदाहरण है।
<एच 2शैली="हरा रंग करें;">यह एक ग्रीन हेडिंग हैएच 2>
<पीशैली="लाल रंग;">यह एक लाल पैराग्राफ है।पी>
पाठ ऐसा दिखाई देगा:
हालाँकि, इनलाइन CSS वाला HTML केवल गन्दा हो सकता है। चूँकि CSS के लिए कोई अन्य स्थान नहीं है, सभी CSS HTML के समान फ़ाइल में मौजूद हैं। भीड़भाड़ नजर आएगी। ऐसी फ़ाइल को संपादित करना मुश्किल है, खासकर अगर यह आपका कोड नहीं है।
साथ ही, इनलाइन सीएसएस के साथ, आपको प्रत्येक तत्व के लिए कोड लिखना होगा। यह दोहराव को बढ़ाता है और कोड के पुन: उपयोग को कम करता है। अपने वेब पेजों को स्टाइल करने के लिए हमेशा बाहरी स्टाइलशीट और इनलाइन CSS के संयोजन का उपयोग करें।
4. अति प्रयोग! महत्वपूर्ण
सीएसएस में, !महत्वपूर्ण नियम संपत्ति/मूल्य में अधिक महत्व जोड़ता है। यह उस तत्व पर उस संपत्ति के लिए अन्य स्टाइलिंग नियमों को ओवरराइड करता है।
आपके पास कुछ ही होना चाहिए !महत्वपूर्ण आपके कोड में नियम। जरूरत पड़ने पर ही इसका इस्तेमाल करें। कोड लिखने और फिर उसे ओवरराइड करने का कोई मतलब नहीं है। आपका कोड गन्दा दिखेगा और कुछ उपकरणों पर चलने पर समस्याएँ पैदा करेगा।
एचटीएमएल>
<एचटीएमएल>
<सिर>सिर>
<शरीर>
<पी> मैं नारंगी हूँ पी>
<पीकक्षा="मेरी कक्षा"> मैं हरा हूँ पी>
<पीपहचान="मेरी आईडी"> मैं नीला हूं। पी>
शरीर>
एचटीएमएल>सीएसएस:
#मेरी आईडी {
पृष्ठभूमि का रंग: नीला;
}।मेरी कक्षा {
पृष्ठभूमि का रंग: हरा;
}
पी {
पृष्ठभूमि का रंग: नारंगी !महत्वपूर्ण;
}
परिणाम इस प्रकार है:
5. नामकरण सम्मेलनों का पालन नहीं करना
CSS में नामकरण परंपराएँ हैं जो डेवलपर्स को मानक कोड लिखने के तरीके के बारे में मार्गदर्शन करती हैं। यदि आप समाप्त हो जाते हैं तो यह आवश्यक है सीएसएस फ़ाइल डिबगिंग भविष्य की तारीख में।
इन मानकों में से एक में समूहबद्ध शब्दों को अलग करने के लिए हाइफ़न का उपयोग करना शामिल है। एक और चयनकर्ता का नामकरण उसके अनुसार कर रहा है। इसलिए इसे देखकर किसी को भी अंदाजा नहीं लगाना पड़ेगा। यह कोड को पढ़ना, बनाए रखना और साझा करना भी आसान बनाता है। उदाहरण के लिए:
इसके अलावा:
छवि1 { मार्जिन छोड़ दिया: 3%; }इसे ऐसे लिखें:
लड़का छवि { मार्जिन छोड़ दिया: 3%; }स्टाइलशीट को देखते समय, आपको ठीक-ठीक पता चल जाएगा कि कोड किस छवि के लिए है। Google का HTML/CSS स्टाइल गाइड और भी कई परिपाटियों को सूचीबद्ध करता है जिन्हें प्रत्येक विकासकर्ता को जानना चाहिए।
टिप्पणियाँ लिखना प्रोग्रामिंग में सबसे कम महत्व वाला कौशल है। बहुत से लोग अपना कोड समझाने के लिए कमेंट लिखना भूल जाते हैं। लेकिन इससे समय की बचत होती है। कोड पढ़ने और बनाए रखने के लिए टिप्पणियाँ आवश्यक हैं।
चूंकि सीएसएस शिथिल रूप से संरचित है और कोई भी अपने स्वयं के सम्मेलनों को विकसित कर सकता है, टिप्पणियाँ महत्वपूर्ण हैं। अपनी स्टाइल शीट की व्याख्या करने के लिए अच्छी तरह से संरचित टिप्पणियों का उपयोग करना अच्छा अभ्यास है। आप कोड के अनुभागों और उनके द्वारा किए जाने वाले कार्यों की व्याख्या करते हुए टिप्पणियाँ लिख सकते हैं।
/ * वीडियो तत्वों को सांस लेने के लिए जगह चाहिए * /
।वीडियो {
मार्जिन टॉप: 2ईएम;
}
/* हीरो सेक्शन को स्टाइल करना */
अभिवादन {
मार्जिन टॉप: 1ईएम;
}
7. पहले से डिजाइन करने में विफल
बहुत से लोग ऐसा करते हैं, लेकिन बिना किसी योजना के कोडिंग शुरू करना एक गंभीर गलती है। CSS निर्धारित करती है कि आपके फ्रंट-एंड की संरचना कैसी दिखती है। डिजाइन आपके प्रोग्रामिंग कौशल के बारे में बहुत कुछ कहता है।
आपकी साइट के लिए एक डिज़ाइन आपकी दृष्टि और आपको वहाँ तक पहुँचाने के लिए आवश्यक संसाधनों को स्पष्ट करता है। अपने प्रोजेक्ट की मानसिक तस्वीर रखें। फिर इसे कागज पर डिजाइन करें या उपयोग करें कैनवा की तरह एक डिज़ाइन टूलकिट आप जो चाहते हैं उसकी कल्पना करने के लिए।
जब आपके पास प्रोजेक्ट की पूरी तस्वीर हो, तो अपने सभी संसाधनों को इकट्ठा करें और कोडिंग शुरू करें। यह आपका समय और अतिरेक बचाएगा।
आपको इन अनुशंसाओं पर विचार क्यों करना चाहिए
यदि आप वेब पर एप्लिकेशन विकसित कर रहे हैं, तो आप CSS का उपयोग करेंगे। सीएसएस के साथ अच्छी तरह से काम करने के लिए अभ्यास और मानक सम्मेलनों का पालन करने की आवश्यकता होती है। कन्वेंशन न केवल आपके कोड को पढ़ने योग्य बनाते हैं बल्कि बनाए रखने योग्य भी बनाते हैं।
मानकीकृत कोड लिखने से आपका समय और प्रयास बचेगा। जिस समय आपने फ्रंट-एंड को स्वरूपित करने में खर्च किया होगा, आप अधिक जटिल सुविधाओं पर खर्च कर सकते हैं। यह यह भी सुनिश्चित करता है कि आप कोड का पुन: उपयोग कर सकते हैं और इसे दूसरों के साथ साझा कर सकते हैं। निर्धारित परंपराओं का पालन करते हुए बेहतर कोड लिखें और एक बेहतर डेवलपर बनें।