इन, या अपने स्वयं लागू करने, सभी समय पर दिशा-निर्देशों पर सहमत हुए। छोटे या बड़े, बाहर कॉल क्या गलत है। जोड़ या इस संहिता गाइड करने के लिए योगदान के लिए, कृपया GitHub पर एक मुद्दा खोलने.
कोड की हर पंक्ति एक ही व्यक्ति द्वारा लिखे जाने के लिए प्रकट करना चाहिए, कोई योगदानकर्ताओं की संख्या में कोई फर्क।
</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>हर HTML पृष्ठ की शुरुआत में इस सरल doctype के साथ संभव हर ब्राउज़र में मानकों मोड और अधिक सुसंगत प्रतिपादन लागू।
<!DOCTYPE html>
<html>
<head>
</head>
</html>एचटीएमएल 5 कल्पना से:
लेखक दस्तावेज़ की भाषा देने जड़ HTML तत्व पर एक लैंग विशेषता निर्दिष्ट करने के लिए प्रोत्साहित किया जाता है। यह निर्धारित करने के लिए क्या उच्चारण का उपयोग करने के लिए, अनुवाद उपकरण निर्धारित करने के लिए क्या उपयोग करने के नियमों, और इसके आगे के भाषण संश्लेषण उपकरण एड्स।
के बारे में और अधिक पढ़ें lang विशेषता कल्पना में.
एक के लिए Sitepoint करने के लिए सिर भाषा कोड की सूची.
<html lang="en-us">
<!-- ... -->
</html>इंटरनेट एक्सप्लोरर एक दस्तावेज अनुकूलता के उपयोग का समर्थन <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 उनके संबंधित चूक रहे हैं।
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>व्यावहारिकता की कीमत पर एचटीएमएल मानकों और शब्दों को बनाए रखने के लिए प्रयास करते हैं, लेकिन नहीं। सबसे कम जटिलताओं के साथ मार्कअप के कम से कम राशि का उपयोग करें जब भी संभव है।
एचटीएमएल कोड विशेषताओं का आसानी से पढ़ने के लिए इस विशेष क्रम में आना चाहिए।
classid, namedata-*src, for, type, href, valuetitle, altrole, 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> तत्वोंअधिक जानकारी के लिए, स्टीव सोउदेर्स द्वारा इस लेख को पढ़ें!.
<!-- 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 आशुलिपि संपत्ति में शामिल हैं:
paddingmarginfontbackgroundborderborder-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;
}अनावश्यक नेस्टिंग से बचें। बस आप नेस्ट सकता है, क्योंकि इसका मतलब यह नहीं है कि आप हमेशा से करना चाहिए। नेस्टिंग पर विचार केवल यदि आप एक माता पिता के लिए और अगर वहाँ कई तत्वों नेस्ट जा रहे हैं गुंजाइश शैलियों चाहिए।
अतिरिक्त पढ़ना:
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}सुधार पठनीयता के लिए, मूल्यों, चर, और ऑपरेटरों के बीच एक भी जगह के साथ कोष्ठकों में सभी गणित संचालन लपेटो।
// 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 {
...
}.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 से बचने के लिए निम्नलिखित सेटिंग्स करने के लिए अपने संपादक सेट:
दस्तावेजीकरण और अपनी परियोजना के लिए इन वरीयताओं को लागू करने पर विचार .editorconfig फ़ाइल। एक उदाहरण के लिए, देखें बूटस्ट्रैप में एक. और जानें EditorConfig के बारे में.