🌐 कोड गाइड by @mdo - hidaytrahman.github.io

एचटीएमएल

वाक्य - विन्यास
एचटीएमएल 5 doctype
भाषा विशेषता
अक्षरों को सांकेतिक अक्षरों में बदलना
इंटरनेट एक्सप्लोरर संगतता मोड
सीएसएस और जावास्क्रिप्ट शामिल
पवित्रता से अधिक व्यावहारिकता
आदेश गुण
बूलियन गुण
मार्कअप को कम करना
जावास्क्रिप्ट उत्पन्न मार्कअप

सीएसएस

सीएसएस वाक्य रचना
घोषणा के आदेश
@import का प्रयोग न करें
मीडिया क्वेरी के प्लेसमेंट
उपसर्ग के गुण
एकल घोषणाओं के साथ नियम
संक्षेप संकेतन
LESS और SASS में नेस्टिंग
LESS और SASS में ऑपरेटर
टिप्पणियाँ
शैक्षणिक
चयनकर्ताओं
संगठन

सुनहरा नियम

इन, या अपने स्वयं लागू करने, सभी समय पर दिशा-निर्देशों पर सहमत हुए। छोटे या बड़े, बाहर कॉल क्या गलत है। जोड़ या इस संहिता गाइड करने के लिए योगदान के लिए, कृपया GitHub पर एक मुद्दा खोलने.

कोड की हर पंक्ति एक ही व्यक्ति द्वारा लिखे जाने के लिए प्रकट करना चाहिए, कोई योगदानकर्ताओं की संख्या में कोई फर्क।

वाक्य - विन्यास

दो स्थानों-वे कोड की गारंटी करने के लिए एक ही रास्ता के साथ नरम टैब का उपयोग किसी भी वातावरण में ही प्रदान करता है।
नेस्टेड तत्व एक बार इंडेंट किया जाना चाहिए (दो रिक्त स्थान)।
हमेशा डबल कोट्स, कभी एकल उद्धरण, विशेषताओं पर इस्तेमाल करते हैं।
खुद बंद में स्लैश शामिल न करें तत्व- एचटीएमएल 5 कल्पना का कहना है कि वे वैकल्पिक रहे हैं।
न आना न वैकल्पिक बंद टैग (जैसे </li> or </body>).

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

एचटीएमएल 5 doctype

हर HTML पृष्ठ की शुरुआत में इस सरल doctype के साथ संभव हर ब्राउज़र में मानकों मोड और अधिक सुसंगत प्रतिपादन लागू।

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

भाषा विशेषता

एचटीएमएल 5 कल्पना से:

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

के बारे में और अधिक पढ़ें lang विशेषता कल्पना में.

एक के लिए Sitepoint करने के लिए सिर भाषा कोड की सूची.

<html lang="en-us">
  <!-- ... -->
</html>

IE संगतता मोड

इंटरनेट एक्सप्लोरर एक दस्तावेज अनुकूलता के उपयोग का समर्थन <meta> IE के संस्करण क्या पृष्ठ के रूप में प्रदान की जानी चाहिए निर्दिष्ट करने के लिए टैग। जब तक हालात अन्यथा की आवश्यकता होती है, इसके साथ नवीनतम समर्थित मोड का उपयोग करने के लिए IE हिदायत लिए सबसे उपयोगी एज मोड.

अधिक जानकारी के लिए, इस भयानक पोट अतिप्रवाह लेख पढ़ा (स्टैक ओवरफ्ल).

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

अक्षरों को सांकेतिक अक्षरों में बदलना

जल्दी और आसानी से एक स्पष्ट वर्ण एन्कोडिंग की घोषणा के द्वारा यह सुनिश्चित अपनी सामग्री के समुचित प्रतिपादन। जब ऐसा करने से, आप अपने HTML में चरित्र संस्थाओं का उपयोग कर से बचने के लिए कर सकते हैं, बशर्ते उनके एन्कोडिंग दस्तावेज़ (आम तौर पर UTF-8) की है कि मेल खाता है।

<head>
  <meta charset="UTF-8">
</head>

सीएसएस और जावास्क्रिप्ट शामिल

प्रति एचटीएमएल 5 कल्पना, आम तौर पर वहाँ एक निर्दिष्ट करने के लिए कोई जरूरत नहीं है type जब सहित सीएसएस और जावास्क्रिप्ट फ़ाइलों के रूप में text/css और text/javascript उनके संबंधित चूक रहे हैं।

एचटीएमएल 5 कल्पना लिंक

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

पवित्रता से अधिक व्यावहारिकता

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

आदेश गुण

एचटीएमएल कोड विशेषताओं का आसानी से पढ़ने के लिए इस विशेष क्रम में आना चाहिए।

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

शैक्षणिक महान पुन: प्रयोज्य घटकों के लिए करना है, तो वे सबसे पहले आते हैं। आईडी अधिक विशिष्ट होते हैं और (इन-पेज बुकमार्क्स के लिए जैसे,) संयम से इस्तेमाल किया जाना चाहिए, ताकि वे दूसरी आते हैं।

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

बूलियन गुण

एक बूलियन विशेषता है कि कोई घोषित मूल्य की जरूरत है। एक्सएचटीएमएल आप एक मूल्य की घोषणा करने के लिए आवश्यक है, लेकिन एचटीएमएल 5 ऐसी कोई आवश्यकता है।

आगे पढ़ने के लिए, परामर्श बूलियन विशेषताओं पर WHATWG अनुभाग:

एक तत्व पर एक बूलियन विशेषता की उपस्थिति सही मूल्य का प्रतिनिधित्व करता है, और विशेषता के अभाव झूठी मूल्य का प्रतिनिधित्व करता है।

आप तो चाहिए विशेषता के मूल्य में शामिल हैं, और आप को जरूरत नहीं है, इस WHATWG दिशानिर्देश का पालन करें:

अगर विशेषता मौजूद है, इसकी कीमत या तो खाली स्ट्रिंग या [...] विशेषता के विहित नाम, कोई आगे या पीछे कोई खाली स्थान के साथ होना चाहिए।

संक्षेप में, एक मूल्य जोड़ नहीं है।

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

मार्कअप को कम करना

जब भी संभव हो, जब HTML लेखन ज़रूरत से ज़्यादा माता पिता तत्वों से बचें। कई बार इस यात्रा और पुनर्रचना की आवश्यकता है, लेकिन कम एचटीएमएल पैदा करता है। निम्न उदाहरण लें:

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

जावास्क्रिप्ट उत्पन्न मार्कअप

एक जावास्क्रिप्ट फ़ाइल में मार्कअप लेखन सामग्री कठिन खोजने के लिए, संपादित करने के लिए कठिन है, और कम performant बनाता है। यह करने से बचें जब भी संभव है।

वाक्य - विन्यास

दो स्थानों-वे कोड की गारंटी करने के लिए एक ही रास्ता के साथ नरम टैब का उपयोग किसी भी वातावरण में ही प्रदान करता है।
जब चयनकर्ताओं समूहीकरण, एक भी लाइन के लिए अलग-अलग चयनकर्ताओं रहते हैं।
स्पष्टता के लिए घोषणा ब्लॉक के उद्घाटन के गले से पहले एक अंतरिक्ष शामिल हैं।
एक नई लाइन पर घोषणा ब्लॉक के तार लगवाने को बंद रखें।
एक के बाद एक अंतरिक्ष शामिल : प्रत्येक घोषणा के लिए।
प्रत्येक घोषणा और अधिक सटीक त्रुटि रिपोर्टिंग के लिए अपने स्वयं लाइन पर दिखाई देनी चाहिए।
एक अर्द्ध पेट के साथ सभी घोषणाओं खत्म होता है। पिछले घोषणा की वैकल्पिक है, लेकिन अपने कोड और त्रुटि प्रवण है इसके बिना।
अल्पविराम से अलग संपत्ति मूल्यों प्रत्येक अल्पविराम के बाद एक अंतरिक्ष (उदाहरण के लिए, शामिल होना चाहिए box-shadow).
अल्पविराम के बाद रिक्त स्थान शामिल न करें भीतर rgb(), rgba(), hsl(), hsla(), या rect() मूल्यों।यह कई संपत्ति मूल्यों (अंतरिक्ष के साथ अल्पविराम) से कई रंग मूल्यों (अल्पविराम, कोई स्पेस) के अंतर में मदद करता है।
साथ संपत्ति मूल्यों या रंग मापदंडों उपसर्ग न एक अग्रणी शून्य (जैसे, .5 के बजाय 0.5 और -.5px के बजाय -0.5px).
, सभी हेक्स मूल्यों, जैसे लोअरकेस #fff. छोटे अक्षरों में ज्यादा है जब एक दस्तावेज़ स्कैनिंग के रूप में वे अधिक अद्वितीय आकार के हो जाते हैं विचार करने के लिए आसान कर रहे हैं।
आशुलिपि हेक्स मूल्यों का प्रयोग करें जहां उपलब्ध है, जैसे, #fff बजाय #ffffff.
भाव, चयनकर्ताओं, उदा में विशेषता मान input[type="text"]. वे कुछ मामलों में केवल वैकल्पिक रहे हैं , और यह स्थिरता के लिए एक अच्छा अभ्यास है।
, शून्य मान, उदाहरण के लिए इकाइयों को निर्दिष्ट करने से बचें margin: 0; बजाय margin: 0px;.

शर्तों पर सवाल यहाँ इस्तेमाल किया है? देखें व्यापक स्टाइल शीट लेख के वाक्य रचना अनुभाग विकिपीडिया पर।

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

घोषणा के आदेश

संबंधित संपत्ति घोषणाओं के आदेश के बाद एक साथ बांटा जाना चाहिए:

पोजिशनिंग
बॉक्स मॉडल
मुद्रण
दृश्य

क्योंकि यह दस्तावेज़ और ओवरराइड बॉक्स मॉडल संबंधित शैलियों के सामान्य प्रवाह से एक तत्व को दूर कर सकते पोजिशनिंग पहले आता है। बॉक्स मॉडल के रूप में यह एक घटक के आयाम और स्थान तय कर अगले आता है।

बाकी सब कुछ जगह लेता है अंदर घटक या पिछले दो वर्गों को प्रभावित किए बिना, और इस तरह वे पिछले आते हैं।

गुण और उनके आदेश की एक पूरी सूची के लिए, कृपया देखें अवकाश.

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

`@import` का प्रयोग न करें

<link> की तुलना में @import धीमी है, अतिरिक्त पृष्ठ अनुरोधों कहते हैं, और अन्य अप्रत्याशित समस्याओं का कारण बन सकता है। उन्हें बचें और इसके बजाय एक वैकल्पिक दृष्टिकोण के लिए चुनते हैं:

एकाधिक उपयोग के <link> तत्वों
एक एकल फाइल में सास या उससे कम की तरह एक पूर्वप्रक्रमक के साथ अपने सीएसएस संकलित करें
रेल, Jekyll में उपलब्ध कराई गई सुविधाओं, और अन्य वातावरण के साथ अपने सीएसएस फ़ाइलों को जुटना

अधिक जानकारी के लिए, स्टीव सोउदेर्स द्वारा इस लेख को पढ़ें!.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

मीडिया क्वेरी के प्लेसमेंट

के रूप में अपने प्रासंगिक नियम के पास जगह मीडिया के प्रश्नों जब भी संभव सेट। उन सब को एक अलग शैली पत्रक में या दस्तावेज़ के अंत में बंडल मत करो। ऐसा करने से ही यह आसान लोग उन्हें भविष्य में याद करने के लिए बनाता है। यहाँ एक ठेठ सेटअप है।

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

उपसर्ग के गुण

विक्रेता उपसर्ग गुण का उपयोग कर, प्रत्येक संपत्ति इंडेंट कि इस तरह की घोषणा के मूल्य लाइनें खड़ी आसान बहु लाइन संपादन के लिए।

Textmate में उपयोग Text → के चयन में प्रत्येक पंक्ति → संपादित पाठ (⌃⌘A). Sublime Text 2 का उपयोग चयन → पिछला लाइन को जोड़ने (⌃⇧↑) और चयन → अगली पंक्ति जोड़ें (⌃⇧↓).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

एकल घोषणाओं

उदाहरण हैं जहां एक नियम सेट शामिल है में केवल एक घोषणा , पठनीयता और तेजी से संपादन के लिए लाइन टूट हटाने पर विचार करें। किसी भी नियम कई घोषणाओं के साथ सेट अलग लाइनों को विभाजित किया जाना चाहिए।

यहां महत्वपूर्ण कारक त्रुटि का पता लगाने जैसे, एक सीएसएस सत्यापनकर्ता बताते हुए आप एक ही घोषणा के साथ लाइन 183 पर एक सिंटेक्स त्रुटि है, वहाँ यह याद आ रही कोई है। कई घोषणाओं के साथ, अलग लाइनों अपने विवेक के लिए बहुत जरूरी है।

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

संक्षेप संकेतन

उदाहरण हैं जहां आप स्पष्ट सभी उपलब्ध मूल्यों को निर्धारित करने के लिए करना चाहिए आशुलिपि घोषणाओं के उपयोग को सीमित करने के लिए प्रयास करते हैं। आम overused आशुलिपि संपत्ति में शामिल हैं:

padding
margin
font
background
border
border-radius

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

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

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

LESS और SASS में नेस्टिंग

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

अतिरिक्त पढ़ना:

LESS और SASS में नेस्टिंग

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

LESS और SASS में ऑपरेटर

सुधार पठनीयता के लिए, मूल्यों, चर, और ऑपरेटरों के बीच एक भी जगह के साथ कोष्ठकों में सभी गणित संचालन लपेटो।

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

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

बड़ा टिप्पणियों और सामान्य नोट्स के लिए संक्षिप्त वाक्यांशों के लिए पूरा वाक्य में लिखने के लिए सुनिश्चित करें।

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

क्लास का नाम

लोअरकेस वर्गों और उपयोग डैश (न रेखांकित या CamelCase) रखें। डैश संबंधित वर्ग में के रूप में प्राकृतिक टूटता की सेवा (जैसे, .btn और .btn-danger).
अत्यधिक और मनमाने ढंग से आशुलिपि संकेतन से बचें। .btn के लिए उपयोगी है button, लेकिन .s कुछ भी मतलब नहीं है।
कक्षाओं के रूप में कम और संभव के रूप में संक्षिप्त रखें।
सार्थक नाम का उपयोग करें; प्रस्तुतिकरण से अधिक संरचनात्मक या उद्देश्यपूर्ण नामों का उपयोग करें।
निकटतम माता-पिता या आधार वर्ग के आधार पर उपसर्ग क्लासेस।
.js-* का प्रयोग करें (के रूप में शैली के खिलाफ) व्यवहार निरूपित करने के लिए कक्षाएं, लेकिन इन वर्गों के अपने सीएसएस से बाहर रखने के लिए।

यह भी SASS और LESS चर नाम बनाते समय ही इन नियमों के कई लागू करने के लिए उपयोगी है।

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

चयनकर्ताओं

इष्टतम प्रतिपादन प्रदर्शन के लिए सामान्य तत्व टैग पर कक्षाओं का प्रयोग करें।
कई विशेषता चयनकर्ताओं (जैसे, प्रयोग करने से बचें [class^="..."]) आमतौर पर होने वाली घटकों पर)। ब्राउज़र प्रदर्शन इन से प्रभावित हो जाता है।
चयनकर्ताओं कम रखें और तीन के लिए प्रत्येक चयनकर्ता में तत्वों की संख्या को सीमित करने का प्रयास करते हैं।
निकटतम माता पिता के लिए स्कोप कक्षाओं केवल जब आवश्यक (जैसे, जब उपसर्ग वर्गों का प्रयोग नहीं)।

अतिरिक्त पढ़ना:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

संगठन

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

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

संपादक प्राथमिकताएँ

आम कोड विसंगतियों और गंदा diffs से बचने के लिए निम्नलिखित सेटिंग्स करने के लिए अपने संपादक सेट:

soft-tabs को दो रिक्त स्थान के लिए सेट करें।
बचाने पर सफेद स्थान अनुगामी ट्रिम।
UTF-8 एन्कोडिंग सेट करें।
फाइलों के अंत में नई लाइन जोड़ें।

दस्तावेजीकरण और अपनी परियोजना के लिए इन वरीयताओं को लागू करने पर विचार .editorconfig फ़ाइल। एक उदाहरण के लिए, देखें बूटस्ट्रैप में एक. और जानें EditorConfig के बारे में.

विषय - सूची

एचटीएमएल

सीएसएस

सुनहरा नियम

एचटीएमएल

वाक्य - विन्यास

एचटीएमएल 5 doctype

भाषा विशेषता

IE संगतता मोड

अक्षरों को सांकेतिक अक्षरों में बदलना

सीएसएस और जावास्क्रिप्ट शामिल

एचटीएमएल 5 कल्पना लिंक

पवित्रता से अधिक व्यावहारिकता

आदेश गुण

बूलियन गुण

मार्कअप को कम करना

जावास्क्रिप्ट उत्पन्न मार्कअप

सीएसएस

वाक्य - विन्यास

घोषणा के आदेश

@import का प्रयोग न करें

मीडिया क्वेरी के प्लेसमेंट

उपसर्ग के गुण

एकल घोषणाओं

संक्षेप संकेतन

LESS और SASS में नेस्टिंग

LESS और SASS में ऑपरेटर

टिप्पणियाँ

क्लास का नाम

चयनकर्ताओं

संगठन

संपादक प्राथमिकताएँ

`@import` का प्रयोग न करें