Advertisement
  1. Code
  2. HTML & CSS

शुरुआती के लिए 30 CSS बेस्ट प्रैक्टिस

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

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

इसे पड़ने योग्य बनाये

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

<editors-note> CSS लिखते समय, अधिकांश डेवलपर्स दो समूहों में से एक होते हैं।

समूह 1: एक पंक्ति में सारा

समूह 2: प्रत्येक स्टाइल को अपनी लाइन मिलती है

दोनों प्रथाएं पूरी तरह से स्वीकार्य हैं, हालांकि आपको आम तौर पर यह पता चल जाएगा कि समूह दो समूह को तुच्छ मानता है! बस याद रखें - आपके लिए सबसे अच्छा लगने वाली विधि चुनें। यही बात मायने रखती है। </editors-note>

2. इसे कंसिस्टेंट रखें

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

ऐसी चीजों के बारे में सोचें जैसे कि आप अपने ID और class के नामों में अंडरस्कोर या डैश का उपयोग करेंगे या नहीं, और आप किस मामले में उनका उपयोग करेंगे। जब आप CSS के लिए अपने स्वयं के मानकों का निर्माण शुरू करते हैं, तो आप अधिक कुशल बन जाते हैं।

3. एक फ्रेमवर्क के साथ शुरू करें

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

कई डिजाइनरों के पास अपना खुद का फ्रेमवर्क है, जो उन्होंने समय के साथ बना दिया है, और यह भी एक महान विचार है। यह परियोजनाओं के भीतर स्थिरता बनाए रखने में मदद करता है।

CSS frameworks

<editors-note> मैं असहमत हूं। CSS फ्रेमवर्क शानदार टूल हैं... उन लोगों के लिए जो उनका उपयोग करना जानते हैं।

यह किसी चीज को फिर से बनाने का मामला कम है, और यह समझने की बात है कि वह चीज कैसे काम करती है।

यदि आप बस CSS के साथ आरंभ कर रहे हैं, तो मैं व्यक्तिगत रूप से सिफारिश करता हूं कि आप इन फ्रेमवर्क से कम से कम एक वर्ष के लिए दूर रहें। अन्यथा, आप केवल अपने आप को भ्रमित करेंगे। CSS सीखें... फिर शॉर्टकट लें! </editors-note>

4. Reset का प्रयोग करें

अधिकांश CSS फ्रेमवर्क में एक रीसेट बनाया गया है, लेकिन अगर आप इनका उपयोग नहीं करने जा रहे हैं, तो कम से कम एक रीसेट का उपयोग करने पर विचार करें। रीसेट ख़ास तौर से ब्राउज़र की असंगताओं को समाप्त करता है जैसे की heights, font size, margins, headings आदि। रीसेट की सहायता से आपके लेआउट सभी ब्राउज़रों में संगत रूप से प्रदर्शित हो सकते हैं।

MayerWeb Yahoo's developer reset के साथ एक लोकप्रिय रीसेट है। या आप हमेशा अपनी खुद की रीसेट रोल कर सकते हैं, अगर वह आपकी कल्पना को गुदगुदी करता है।

5. टॉप-डाउन संरचना के साथ स्टाइलशीट को व्यवस्थित करें

यह हमेशा आपकी स्टाइलशीट को ऐसे तरीके से रखना समझदारी भरा कदम है जिससे आप अपने कोड के किसी भी हिस्से को जल्दी से ढूंढ सकें। मैं एक टॉप-डाउन प्रारूप को रेकमेंड करता हूं जो कि स्टाइल कोड की तरह ही स्टाइल्स को टैकल करता है। इसलिए, एक उदाहरण स्टाइलशीट इस आर्डर में हो सकती है:

  1. जेनेरिक क्लास (body, a, p, h1, आदि)
  2. #header
  3. #nav-menu
  4. #main-content

<editors-note> प्रत्येक अनुभाग पर कमेंट करना मत भूलना! </editors-note>

6. एलिमेंट्स का मिश्रण

एक स्टाइलशीट में एलिमेंट कभी-कभी प्रॉपर्टी को साझा करते हैं। पिछले कोड को फिर से लिखने के बजाय, उन्हें कंबाइन क्यों न कर दें? उदाहरण के लिए, आपका h1, h2, और h3 एलिमेंट सभी एक ही फ़ॉन्ट और रंग साझा कर सकते हैं:

हम इन सभी हैडर स्टाइल्स में एक अद्वितीय करक्टेरस्टिक को स्ट्य्लेसहित में बाद में जोड़ सकते हैं यदि हम चाहें तो (यानी h1 {site: 2.1em})।

7. अपने HTML को पहले बनाएँ

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

8. मल्टीप्ल क्लासेस का उपयोग करें

कभी-कभी यह एक एलिमेंट में मल्टीप्ल क्लासेज जोड़ना फायदेमंद होता है। मान लीजिए कि आपके पास एक <div> "box" है जिसे आप राइट साइड में फ्लोट करना चाहते हैं, और आपको पहले से ही एक .right क्लास मिल गयी जो सब कुछ राइट में कर देती है आप डिक्लेरेशन में एक अतिरिक्त क्लास जोड़ सकते हैं, जैसे:

आप जितने चाहें उतने क्लासेज जोड़ सकते हैं जैसे आप किसी भी डिक्लेरेशन में (स्पेस अलग) चाहते हैं।

<editors-note> id और क्लास-नामों का प्रयोग करते समय बहुत सावधान रहें जैसे "left" और "right"। मैं उनका उपयोग करूँगा, लेकिन केवल ब्लॉग पोस्ट जैसी चीज़ों के लिए। कैसे? मान लीजिए, आप तय करते हैं कि आप बॉक्स को LEFT में फ्लोट हुआ देखना चाहते हैं। इस मामले में, आपको अपने HTML पर वापस लौटना होगा और पेज की प्रस्तुति को एडजस्ट करने के लिए क्लास-नाम को बदलना होगा। यह असामान्य है। याद रखें - HTML मार्कअप और कंटेंट के लिए है। CSS प्रेजेंटेशन के लिए है।

यदि आपको पेज की प्रेजेंटेशन (या स्टाइल) को बदलने के लिए अपने HTML पर वापस जाना होगा, तो आप इसे गलत कर रहे हैं!

</editors-note>

9. सही Doctype का उपयोग करें

doctype घोषणा आपके मार्कअप और CSS मान्य होगी या नहीं, इसके बारे में बहुत मायने रखती है। वास्तव में, आपकी साइट का संपूर्ण रूप और अनुभव आपके द्वारा DOCTYPE के आधार पर बहुत बदल सकता है जिसे आप घोषित करते हैं।

इसके बारे में अधिक जानें कि किस सूची में एक DOCTYPE इस्तेमाल करना है।

doctype

<editors-note>

मैं अपने सभी प्रोजेक्ट्स के लिए HTML 5 के doctype का उपयोग करता हूं।

"इस नए DOCTYPE के बारे में क्या अच्छा है, विशेष रूप से, यह है कि सभी वर्तमान ब्राउज़रों (IE, FF, Opera, Safari) इसे देखेंगे और कंटेंट को स्टैण्डर्ड मोड में बदलेंगे - भले ही वे HTML 5 को लागू न करें। इसका मतलब है कि आप आज ही HTML का उपयोग कर अपने वेब पेजेज को लिखना शुरू करें और उन्हें एक बहुत, बहुत, लंबे समय के लिए अंतिम रूप दें। "

</editors-note>

10. शॉर्टहैंड का उपयोग करें

अपने CSS को क्राफ्टिंग करते समय आप अपने कोड को शॉर्टहैंड का उपयोग करके काफी छोटा कर सकते हैं। पैडिंग, मार्जिन, फ़ॉन्ट और कुछ अन्य एलिमेंट्स के लिए, आप एक पंक्ति में स्टाइल्स को जोड़ सकते हैं। उदाहरण के लिए, एक div में ये स्टाइल हो सकती है:

आप उन स्टाइल्स को एक पंक्ति में जोड़ सकते हैं, जैसे:

यदि आपको अधिक मदद की आवश्यकता है, तो यहां CSS शॉर्टहैंड प्रॉपर्टीज पर एक व्यापक मार्गदर्शिका है

11. अपने CSS को कमेंट दें

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

12. Block बनाम Inline एलिमेंट्स के बीच अंतर को समझें

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

यहां उन एलिमेंट्स की सूची दी गई हैं जो या तो इनलाइन या ब्लॉक हैं:

और ब्लॉक एलिमेंट्स:

13. अपनी प्रॉपर्टीज को वर्णित करें

हालांकि यह एक बेवकूफ टिप से अधिक है, लेकिन यह त्वरित स्कैनिंग के लिए काम में आ सकता है।

<editors-note> Ehh... थोड़ा बेहतर पड़ने लायक बनाने के लिए स्पीड की बलि दे दें? मैं पास होता हूं - लेकिन अपने लिए खुद तय करो! </editors-note>

14. CSS कंप्रेशर्स का उपयोग करें

CSS कंप्रेशर्स लाइन ब्रेक, व्हाइट रिक्त स्थान, और एलिमेंट्स के संयोजन से CSS फ़ाइल आकार को छोटा करने में सहायता करते हैं। यह संयोजन फ़ाइल आकार को बहुत कम कर सकता है, जो ब्राउज़र लोडिंग को गति देता है। CSS Optimizer और CSS Compressor दो उत्कृष्ट ऑनलाइन टूल्स हैं जो CSS को छोटा कर सकते हैं।

यह ध्यान दिया जाना चाहिए कि आपका CSS को श्रिंक करना प्रदर्शन में लाभ दे सकता है, लेकिन आप अपने CSS को पड़ने की योग्यता खो देते हैं।

use css compressors

15. जेनेरिक क्लासेस का उपयोग करें

आप पाएंगे कि ऐसी कुछ स्टाइल्स हैं जिन्हें आप बार बार लागू कर रहे हैं। उस विशिष्ट स्टाइल को प्रत्येक ID में जोड़ने के बजाय, आप सामान्य क्लासेज बना सकते हैं और उन्हें ID या अन्य CSS क्लासेज में जोड़ सकते हैं (टिप #8 का उपयोग करके)।

उदाहरण के लिए, मैं खुद अपने डिज़ाइनो में float:right और float:left का इस्तेमाल कर रहा हूं। तो में बस .left और .right क्लास को मेरी स्टाइलशीट में जोड़ता हूँ और एलिमेंट्स में इसका रिफरेन्स जोड़ता हूँ।

इस तरह आपको निरंतर "float:left" को सभी एलिमेंट्स में जोड़ना नहीं है, जिन्हें फ्लोट होना चाहिए।

<editors-note> कृपया #8 के लिए एडिटर के नोट देखें </editors-note>

16. सेंटर लेआउट के लिए "Margin: 0 auto" का उपयोग करें

CSS के कई शुरुआती समझ नहीं सकते हैं कि आप float:center को एलिमेंट्स को केन्द्रित प्रभाव को हासिल करने के लिए क्यों नहीं कर सकते। यदि यह केवल इतना आसान था! दुर्भाग्य से, आपको उपयोग करने की आवश्यकता होगी

आपके लेआउट divs, पैराग्राफ या अन्य एलिमेंट्स को सेण्टर करने के लिए

<editors-note> यह डिक्लेअर करते हुए कि एक एलिमेंट के लेफ्ट और राइट मार्जिन एक जैसे समान होंगे, इसके एलिमेंट्स को उसके एलिमेंट में सेण्टर करने के लिए कोई विकल्प नहीं है। </editors-note>

17. यह सिर्फ चारों ओर एक DIV मत लपेटें

शुरू करते समय, एक एलिमेंट के चारों ओर एक ID या class के साथ एक div को लपेटने और इसके लिए एक स्टाइल तैयार करने का प्रलोभन होता है।

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

फिर आप आसानी से पैरेंट div की जगह h1 के लिए एक स्टाइल जोड़ सकते हैं।

18. फायरबग का उपयोग करें

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

use firebug

19. Hack Less

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

20. Absolute Position का प्रयोग करें

Absolute Positioning CSS का एक आसान पहलू है जो आपको यह निर्धारित करने की अनुमति देता है कि पेज पर एक एलिमेंट कहाँ स्थित होना चाहिए। हालांकि, पेज पर अन्य एलिमेंट्स के लिए absolute पोजीशन की उपेक्षा के कारण, लेआउट बहुत पतला हो सकता है अगर लेआउट के चारों ओर एक से अधिक absolute पोजीशन वाले कई एलिमेंट्स है।

21. Text-transform का उपयोग करें

Text-transform एक अत्यधिक-उपयोगी CSS प्रॉपर्टी है जो आपको आपकी साइट पर टेक्स्ट को "standardize" करने की अनुमति देता है। उदाहरण के लिए, मानते हैं कि आप कुछ हेडर बनाना चाहते हैं, जिनमें केवल छोटे अक्षर हैं। बस टेक्स्ट-ट्रांस्फ़ॉर्म प्रॉपर्टी को हेडर स्टाइल में जोड़ें, जैसे:

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

22. अपने h1 को छिपाने के लिए नकारात्मक मार्जिन का उपयोग न करें

बार-बार लोग अपने हैडर टेक्स्ट के लिए एक इमेज का उपयोग करते हैं, और तब या तो display:none का उपयोग करते हैं या नकारात्मक मार्जिन पेज से बाहर h1 फ्लोट करने के लिए। Matt Cutts, Google की वेबस्पैम टीम के प्रमुख, ने आधिकारिक तौर पर कहा है कि यह एक बुरा विचार है, क्योंकि Google शायद यह स्पैम के बारे में सोच रहा है।

जैसा कि Mr. Cutts स्पष्ट रूप से कहते हैं, CSS के साथ अपने लोगो के टेक्स्ट को छुपाने से बचें। बस Alt टैग का उपयोग करें। हालांकि कई लोग दावा करते हैं कि आप h1 टैग को छिपाने के लिए अभी भी CSS का उपयोग कर सकते हैं, क्योंकि h1 लोगो टेक्स्ट के समान है, मैं सुरक्षित पक्ष पर गलती करना पसंद करता हूं।

23. अपने CSS और XHTML वैलिडेट करें

आपके CSS और XHTML को मान्य करना गर्व की भावना देने से ज्यादा करता है: यह आपको अपने कोड में जल्दी से त्रुटियों की स्थिति में मदद करता है। यदि आप किसी डिज़ाइन पर काम कर रहे हैं और कुछ कारणों से यह सही नहीं दिख रहा है, तो मार्कअप और CSS validator चलाने का प्रयास करें और देखें कि क्या त्रुटियां पॉप अप हैं। आम तौर पर आप पाएंगे कि आप किसी div को कहीं न कहीं बंद करना भूल गए हैं, या किसी CSS प्रॉपर्टी में मिस्ड सेमी-कोलन को बंद करना भूल गए थे।

24. Ems बनाम पिक्सल

हमेशा एक मजबूत बहस हो रही है कि क्या यह पिक्सल (px) या ems (em) का इस्तेमाल करना बेहतर है, जब फ़ॉन्ट आकार को परिभाषित करते हैं। पिक्सल फ़ॉन्ट आकार को परिभाषित करने के लिए एक अधिक स्थिर तरीका है, और ems विभिन्न ब्राउज़र आकार और मोबाइल उपकरणों के साथ अधिक स्केलेबल हैं। कई विभिन्न प्रकार के वेब ब्राउज़िंग (लैपटॉप, मोबाइल, आदि) के आगमन के साथ, ems तेजी से फ़ॉन्ट आकार माप के लिए डिफ़ॉल्ट हो रहे हैं क्योंकि वे लचीलेपन का सबसे बड़ा स्वरूप प्रदान करते हैं। आप इस बारे में अधिक पढ़ सकते हैं कि इस विचारशील forum thread में आपको फ़ॉन्ट आकार के लिए ems का उपयोग क्यों करना चाहिए। About.com में मेज़रमेंट के आकार के बीच अंतर पर एक महान लेख भी है।

<editors-note> इस एक पर फार्म में मुझे मत लेना- लेकिन मैं शर्त लगा सकता हूं कि ब्राउज़र जूमिंग के कारण, अधिकांश डिज़ाइनर पिक्सेल आधारित लेआउट्स के लिए डिफ़ॉल्ट हैं। तुम क्या सोचते हो? </editors-note>

25. लिस्ट को कम मत समझना

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

कई शुरुआती लिस्ट में प्रत्येक एलिमेंट बनाने के लिए divs का उपयोग करते हैं क्योंकि उन्हें समझ नहीं आता कि उन्हें ठीक से कैसे उपयोग करना है। भविष्य में डेटा को ढांचा बनाने के लिए सीखने की लिस्ट के एलिमेंट्स पर ब्रश का उपयोग करने के प्रयास के लिए यह अच्छी तरह से लायक है।

<editors-note>

आप अक्सर ऐसे नेविगेशन लिंक देखेंगे:

हालांकि, तकनीकी रूप से, यह CSS कुछ सालों के बाद ठीक काम करेगा, यह स्लॉपी है। यदि आप लिंक की एक लिस्ट जोड़ रहे हैं, तो एक unordered list, मूर्ख हंस का उपयोग करें!

</editors-note>

26. अतिरिक्त सेलेक्टर्स से बचें

अनजाने में हमारे CSS में अतिरिक्त सेलेक्टर्स को जोड़ना आसान है, जो स्टाइलशीट को छिपाना। अतिरिक्त सेलेक्टर्स को जोड़ने का एक सामान्य उदाहरण लिस्ट के साथ है।

इस उदाहरण में, बस .someclass li ने अभी ठीक काम किया होता।

अतिरिक्त सेलेक्टर्स को जोड़ना Armageddon या कुछ भी प्रकार से नहीं लाएगा, लेकिन वे अपने CSS को जितना सरल और साफ किया जा सके उतना ही बनाए रखेंगे।

27. सभी में मार्जिन और पैडिंग जोड़ें

विभिन्न ब्राउज़रों एलिमेंट्स को अलग ढंग से प्रस्तुत करते हैं। IE फ़ायरफ़ॉक्स से अलग एलिमेंट को प्रस्तुत करता हैI IE 6 एलिमेंट्स को IE 7 और IE 8 की तुलना में अलग ढंग से प्रस्तुत करता है। हालांकि ब्राउज़र W3C मानकों के अधिक बारीकी से पालन करना शुरू कर रहे हैं, फिर भी वे सही नहीं हैं (*उँह IE उँह*)।

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

अब सभी एलिमेंट्स में पैडिंग और मार्जिन 0 हो जाती है, जब तक स्टाइलशीट में किसी अन्य स्टाइल से परिभाषित नहीं किया जाता है।

<editors-note> समस्या ये है, क्योंकि इस विधि से सबकुछ 0 हो जाता है, आप संभावित रूप से मदद के बजाय नुक्सान कर देंगे। क्या आप निश्चित हैं कि आप चाहते हैं कि हर एक एलिमेंट के मार्जिन और पैडिंग शून्य हो जाए? यदि ऐसा है - यह पूरी तरह से स्वीकार्य है। लेकिन कम से कम इस पर विचार करें। </editors-note>

28. जब तैयार हो, तो ऑब्जेक्ट ओरिएंटेड CSS की कोशिश करें

ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग कोड में एलिमेंट्स को अलग अलग करता है ताकि पुन: उपयोग बनाए रखना आसान हो। ऑब्जेक्ट ओरिएंटेड CSS स्टाइलशीट (या अधिक स्टाइलशीट) के विभिन्न पहलुओं को और अधिक लॉजिकल सेक्शन में अलग करने के समान सिद्धांत का अनुसरण करता है, जिससे आपके CSS और मॉड्यूलर और पुनः प्रयोग योग्य होते हैं।

ऑब्जेक्ट ओरिएंटेड CSS कैसे काम करता है यह एक स्लाइड प्रस्तुति है:

यदि आप CSS/XHTML गेम में नए हैं, तो OOCSS शुरुआत में थोड़ी सी चुनौती हो सकती है। लेकिन सिद्धांत सामान्य रूप से ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग को समझने के लिए महान हैं।

29. मल्टीप्ल स्टाइलशीट का उपयोग करें

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

उदाहरण के लिए, मेरे पास एक पोलिंग प्रोग्राम हो सकता है जिसमें स्टाइल्स का एक अनूठा सेट होगा। मुख्य स्टाइलशीट में पोल स्टाइल्स को शामिल करने के बजाय, मैं सिर्फ एक poll.css और स्टाइलशीट सिर्फ उन पेजेज पर ही बना सकता हूं जो पोल दिखाते हैं।

<editors-note> हालांकि, सुनिश्चित किए जाने वाले HTTP अनुरोधों की संख्या पर विचार करना सुनिश्चित करें। कई डिजाइनर कई स्टाइलशीट्स के साथ डेवेलप करना पसंद करते हैं, और फिर उन्हें एक फाइल में जोड़ते हैं। यह HTTP अनुरोधों की संख्या को कम कर देता है। इसके अलावा, पूरी फाइल यूज़र्स के कंप्यूटर पर कैश की जाएगी। </editors-note>

30. डिबगिंग के लिए पहले बंद किए गए एलिमेंट्स की जांच करें

यदि आप यह देख रहे हैं कि आपका डिज़ाइन एक tad wonky दिखता है, तो यह एक अच्छा मौका है क्योंकि आपने एक </div> समापन छोड़ दिया है। आप सभी प्रकार की त्रुटियों को भी ढूंढने में मदद करने के लिए XHTML validator का उपयोग कर सकते हैं।

आप भी आनंद ले सकते हैं...

  • और अधिक दैनिक वेब डेवलपमेंट tuts और लेखों के लिए Twitter पर हमें का फॉलो करें, या Nettuts+ RSS Feed की सदस्यता लें।


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.