इसे व्यक्त

पुनः सायक्लिंग मंत्र है और वेब विकास में कोई अलग मतलब है. यह ऊर्जा, संरक्षण के प्रयास के मामले में!

सीएसएस लेखन और डिजाइन से HTML बनाने के वर्षों में, मैं कुछ सर्वोत्तम प्रथाओं का पालन किया है, क्या हम सामान्यतः "पुनः आविष्कार व्हील" के रूप में कार्यकाल में समय और ऊर्जा की बचत की खोज में. समय और बार फिर, मैं अपने आप को कहा है, कि मैं कुछ टेम्पलेट्स बनाने चाहिए, कुछ मानक सीएसएस फिर से प्रयोग करने योग्य है कि मैं बाहर बॉक्स का अपने भविष्य के काम में प्रयोग करेंगे. पूरी तरह से नहीं हालांकि, लेकिन मैं लक्ष्यों के कुछ हासिल करने के लिए प्रबंध किया था.

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

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

सीएसएस के पुन: साइकिल कुंजी:

नामकरण सम्मेलनों का उपयोग करें

यह सीएसएस / HTML पुनः प्रयोग करने योग्य बनाने में सबसे महत्वपूर्ण कारक है. पृष्ठ तत्वों को लगातार नाम देते पृष्ठ घटकों और उनकी शैली का थोड़ा या संशोधनों के साथ फिर से उपयोग में सक्षम बनाता है. इस तर्क के साथ लाइन में, यहां तक ​​कि HTML5, अपने पूर्ववर्तियों से एक बड़ा परिवर्तन में परिवर्तन करने के लिए कुछ अर्थात संरचनात्मक टैग का परिचय है. <article>, <section>, <header>, <aside>, और <nav> [है HTML5 क्या ले आए? ]. 4 HTML (या कम) के साथ भी, यह सबसे अच्छा है के लिए के तरह consistanly सरल उदाहरण में नीचे अपने पृष्ठ के मानक वर्गों के नाम ...

याद रखें, अपनी परियोजना पर अधिकांश पृष्ठों, अंत में एक ही मूल संरचनात्मक तत्वों. इन आम कोर पृष्ठ तत्वों को पहचानें ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

रीसेट डिफ़ॉल्ट शैली (सीएसएस रीसेट करता है): चाहे आप एक रूपरेखा का उपयोग करें या अपने लिखने के लिए, आप सीएसएस रीसेट करता है प्रदान करना होगा [ सीएसएस रीसेट करता है क्या हैं? ], के रूप में वे कम या कभी कभी कि विभिन्न ब्राउज़रों के बीच होते हैं दृश्य विसंगतियों को खत्म करने. सरल शब्दों में सीएसएस रीसेट तंत्र शून्य या शून्य मान के लिए HTML तत्व की शैली सेट, इस प्रकार किसी भी ब्राउज़र डिफ़ॉल्ट मानों वे बन गया है हो सकता है अधिभावी. यह किसी भी प्रयोक्ता एजेंट डिफ़ॉल्ट के इन तत्वों शून्य [के गुण सेट करने के लिए एक साफ स्लेट प्रदान करता है CSS2.1 उपयोगकर्ता एजेंट स्टाइल शीट मूलभूत ]. सभी सीएसएस चौखटे रीसेट तंत्र की है. यदि आप आप अपने सीएसएस रीसेट करता है लिख रहे हैं, सतर्कता का एक शब्द है कि यदि आप करने के लिए एक महत्वपूर्ण संपत्ति रीसेट भूलना होगा, यह पार ब्राउज़र मुद्दों है कि डिबग करने के लिए बहुत मुश्किल हैं ले जा सकता है. याद रखें, रीसेट शैलियों की एक प्रतिलिपि रखें और उन्हें आप एक नई परियोजना बनाने में छोड़.

  शरीर, div, डेसीलीटर, डीटी, डीडी, उल, राजभाषा, ली,
  H1, H2, H3, H4, H5, H6,
  पूर्व, प्रपत्र, fieldset, इनपुट, चुनें, textarea,
  पी, blockquote, मेज, वें, टीडी
  {
    सीमा: 0px;
    मार्जिन: 0;
    padding: 0;
  } 

सेट (आधारभूत शैलियाँ) मूलभूत तत्वों को:

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

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

याद रखें, आधारभूत शैलियों शैली है कि जा रहे हैं डिजाइन व्यापक इस्तेमाल किया जा सेट किया जाता है. जैसे.

  एचटीएमएल {font-size: 77%; font-परिवार: Arial, बिना सेरिफ़;}
 मजबूत, H1, H2, H3, H4, H5, H6 {font-वजन: बोल्ड;} 

आम एचटीएमएल अवयव और सामान्य श्रेणी के लिए सार शैलियाँ:

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

आम HTML घटकों के लिए पुन: प्रयोज्य शैलियों परिभाषाओं को परिभाषित करने के अलावा, हम सार शैलियों कक्षाएं टाइपोग्राफी रंग, या भी लेआउट के लिए संबंधित सकता है. मैं खुद करते हैं आप का उपयोग करें ... Clearfix, Font08, FontGrey, AlignL, DisplayB आदि की तरह सामान्य वर्गों

  प्रपत्र इनपुट {सीमा: 0px; पृष्ठभूमि: # FFFFFF; padding: 10px 0px; _padding: 0px 0px; ऊँचाई: 26px; रंग: # 000000; रेखा से ऊँचाई: 30px, font-size: 1.1em;}
 प्रपत्र textarea {: # FFFFFF; रंग: # 000000, font-size: 0.9 उन्हें लाइन ऊँचाई: 1.5em, अतिप्रवाह: पृष्ठभूमि 0px सीमा दिखाई;}
 Fbold {font-वजन: बोल्ड, रंग: # cccccc;}.
 . Fgrey {रंग: # 666,666;}
 . Flightgrey {रंग: # bbbbbb;}
 . Clearfix {स्पष्ट: दोनों;}
 विभक्त {सीमा टॉप: 1px ठोस 647B06 #; सीमा - नीचे: 1px ठोस 9CC00A; ऊँचाई: 0px;}
 {प्रदर्शन: ब्लॉक;} displayb. Displayn {प्रदर्शन: कोई नहीं;}
 {पाठ संरेखित: सही} alignr के. Alignc {text-align: केंद्र}
 {फ्लोट: सही;} floatr floatl. {फ्लोट: छोड़ दिया;} 

सामान्य ब्राउज़र quirks के लिए फिक्स

विभिन्न ब्राउज़रों सीएसएस कोड लागू करने और सीएसएस विनिर्देशों के लिए समर्थन के स्तर अलग प्रदान करते हैं. इस का परिणाम .... "ब्राउज़र Quirks, कि हम डेवलपर्स से निपटने के लिए छोड़ दिया जाता है. विशेष रूप से, IE6 के समय सीमा को पूरा करने के लिए साथ सबसे सीएसएस coders के सत्ता. अच्छी खबर यह है कि अनुभव एक साथ लाया है इन मुद्दों (अक्सर के रूप में कहा संभव पुन: प्रयोज्य फिक्सेस सीएसएस भाड़े ).

याद रखें, इन हैक्स / फिक्सेस काम रखें

  / * निम्नलिखित ज़ूम: 1 नियम IE6 + IE7 के लिए विशेष रूप से है.  * /
    * Html clearfix.
    *: प्रथम बच्चे + html clearfix {
           ज़ूम: 1;
      } 

अपने सीएसएस को रिफ़ाइन

• दिन में फिर से साइकिल की आदत आप में नहीं आएगा. यह करने के लिए विकसित किया है. तो अपने पुनः सायक्लिंग की योजना है. मन में यह सहन कि आप सार शैलियों चूक, टाइपोग्राफी परिभाषाएँ, लेआउट, HTML तत्व शैलियाँ आदि के लिए आगे की सोचने की कोशिश करो सकता.
• इसके अलावा अपने अतीत परियोजनाओं पर वापस देखो, यह शैली है कि आप अक्सर porjects भर उपयोग करते हैं की पहचान में मदद करेगा. यह सार.
• किसी भी अप्रयुक्त शैली निकालें. इस अभ्यास "फूल" नामक एक आम लक्षण से अपने सीएसएस ढांचे रखेंगे
• दोहराव शैलियों निकालें.
• निर्माण शैलियों का एक सेट है कि काफी लचीला के लिए परियोजनाओं के पार बंदरगाह हैं.

सीएसएस चौखटे पर एक नज़र

अंत में. यदि आप प्रेरित कर रहे हैं और सीएसएस चौखटे में से एक या एक से अधिक उपयोग करना चाहते हैं, यहाँ कुछ लोकप्रिय लोगों में से एक त्वरित सूची है ....

• 960 ग्रिड प्रणाली : 960 ग्रिड प्रणाली एक 960 पिक्सल की चौड़ाई के आधार पर सामान्य रूप से उपयोग किए जाने आयाम प्रदान करके वेब विकास कार्यप्रवाह को कारगर बनाने का प्रयास है. 12, 16 और 24 कॉलम, जो अलग या अग्रानुक्रम में इस्तेमाल किया जा सकता है: वहाँ तीन वेरिएंट हैं. सोचा था कि कुछ भी नहीं है कि आप आसानी से अपने खुद के लिए पर्याप्त नहीं बना सकते हैं, ढांचे को PDF स्वरूप है, कि एक अपने पृष्ठ designs.Bet के स्केच का उपयोग कर सकते हैं प्रिंट के लिए ग्रिड टेम्पलेट्स प्रदान करता है, यह एक पेशेवर छाप बनाने के लिए, अगर आप कुछ जब पत्रक ले आप यूआई आवश्यकताओं सभा के लिए एक ग्राहक के लिए जाना. यह भी पटाखे, फ्लैश, InDesign, Illustrator, फ़ोटोशॉप, Visio, आदि दस के लिए एक "स्टार्टर" करने के लिए अपने डिजाइन का काम शुरू प्रदान की तरह लोकप्रिय डिजाइन सॉफ्टवेयर के लिए बुनियादी ग्रिड टेम्पलेट्स प्रदान करता है.
• खाका : खाका रीसेट करता है के लिए साफ़ तौर पर वर्गीकृत सीएसएस फ़ाइलों, ग्रिड, फार्म, मुद्रण, टाइपोग्राफ़ी के लिए प्लगइन्स बटन, टैब्स और sprites आदि यह भी शामिल हैं एक अलग रूप में IE के लिए सहायता प्रदान करता है प्रदान करता है.
• SenCSs : उपरोक्त दो के विपरीत, SenCSs (स्पष्ट नब्ज), लेआउट के लिए सीएसएस परिभाषा नहीं है. यह फोंट, paddings, मार्जिन, तालिकाएँ, सूचियाँ, हेडर, blockquotes, रूपों और अधिक शामिल है.
• BlueTrip : प्रसिद्धि के लिए मूल का दावा था कि, यह सबसे अच्छा ब्लू प्रिंट ट्रिप, ओली की तरह अन्य दूसरों से जहां यह उसका नाम हो जाता है ... चौखटे द्वारा उपलब्ध कराई गई सुविधाओं का एक संयोजन था. इसकी सुविधा सेट 24 स्तंभ ग्रिड, टाइपोग्राफी शैलियों, orm शैलियों, प्रिंट, बटन आदि शामिल हैं
• YUI ग्रिड : Yahooo डेवलपर नेटवर्क के द्वारा आप के लिए लाया, 750px, 950px और 974px पर तरल पदार्थ चौड़ाई (100%) के रूप में अच्छी तरह से पूर्व निर्धारित लेआउट निर्धारित चौड़ाई लेआउट का समर्थन करता है, और आसानी से किसी भी संख्या के लिए अनुकूलित करने की क्षमता है. जैसा कि आप देख सकते हैं, यह तकनीकी रूप से अभी लेआउट अवयव. YUI भी अन्य पृष्ठ तत्वों के लिए HTML / सीएसएस सेट प्रदान
• YAML (फिर भी एक अन्य एकाधिक स्तंभ लेआउट)
• Emastic

याद रखें, सीएसएस चौखटे का उपयोग मतलब है कि आप अपना खुद का बनाने के लिए आलसी नहीं कर रहे हैं ... यह अर्थ है कि आप स्मार्ट करने के लिए दूसरों के अनुभव और गलतियों से सीखते हैं, समय और उत्पादकता में वृद्धि बचाओ!!