Întotdeauna conduceți-vă după reguli, aceasta sau altele adoptate de voi. Nu admiteți incorectitudine. Adițiunile sau constribuțiile la acest ghid pot fi înregistrate pe GitHub.
Fiecare linie de cod trebuie să arate precum ar fi scrisă de o singură persoană, indiferent de numărul contributorilor.
</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>Insistați la respectarea standardelor și la afișarea cît mai consistentă în oricare browser cu ajutorul acestui simplu doctype la fiecare început de pagină HTML.
<!DOCTYPE html>
<html>
<head>
</head>
</html>Din specificațiile HTML5:
Autorii sunt încurajați să specifice un atribut lang în fiecare element-rădăcină, care indică limba documentului. Acesta contribuie ca instrumentele de sinteză a limbii și traducerii să lucreze mai eficient.
Citiți mai mult despre atributul lang in the spec.
Găsiți pe Sitepoint o listă a codurilor limbilor.
<html lang="en-us">
<!-- ... -->
</html>Internet Explorer suportă folosirea unui tag <meta> de compatibilitate a documentului pentru a specifica sub ce versiune de IE trebuie să fie afișată pagina. Dacă nu există alte circumstanțe, este cel mai bine de a seta IE să funcționeze cu edge mode.
Pentru mai multă informație, vedeți acest articol de pe StackOverflow..
<meta http-equiv="X-UA-Compatible" content="IE=Edge">Într-un mod ușor și rapid puteți asigura afișarea corectă a conținutului prin declararea unei codificări de caractere implicite. Dacă faceți astfel, ați putea evita folosirea entităților de caracter în codul vostru HTML, suplinind analogurile lor din codificarea documentului (deobicei UTF-8).
<head>
<meta charset="UTF-8">
</head>Conform specificațiilor HTML5, deobicei nu este nevoie să specificați un atribut type la includerea fișierelor CSS și JavaScript deoarece valorile text/css și respectiv text/javascript sunt utilizate implicit.
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>Tindeți spre menținerea standardelor și semanticii HTML, dar nu cu prețul practicalității. Folosiți cît mai puțin cod posibil cu încă mai puține labirinturi.
Atributele HTML trebuie să apară anume în această ordine, pentru o citire mai ușoară a codului.
classid, namedata-*src, for, type, href, valuetitle, altrole, aria-*Clasele asigură reutilizarea componentelor, deci ele trebuie să apară primele. ID-urile sunt mai specifice și deobicei folosite mai rar (ex. pentru marcarea elementelor-cheie ale paginii), deci ele vin în rîndul doi.
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">Un atribut logic este cel care nu are nevoie de declararea valorii. XHTML are o asemenea cerință, dar HTML5 nu.
Pentru mai multă informație, consultați secțiunea WhatWG la atributele logice:
Prezența unui atribut logic în cadrul unui element înseamnă valoarea lui adevărată, iar absența lui - falsă.
Dacă trebuie să includeți valoarea lui, dar nu aveți nevoie, urmați acest ghid WhatWG:
Dacă atributul este prezent, valoarea sa trebuie să fie ori un șir de caractere gol ori [...] numele atributului, fără spațiu înainte sau după el.
Pe scurt, nu specificați valoarea.
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>Dacă e posibil, evitați folosirea inutilă a elementelor-părinte HTML. Deseori asta necesită transformări, dar produc mai puțin cod HTML. Vedeți următorul exemplu:
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">Scrierea markup-ului într-un fișier JavaScript face conținutul mai greu de găsit, de editat, și mai puțin performant. Evitați-o oricînd posibil.
: pentru fiecare declarare.box-shadow).rgb(), rgba(), hsl(), hsla(), sau rect(). Asta ajută la diferențierea culorilor cu mai multe valori (virgulă, fără spațiu) de valorile proprietăților cu multe valori (virgulă cu soațiu)..5 în loc de 0.5 și -.5px în loc de -0.5px).#fff. Literele mici sunt mai lizibile la mărirea documenteului din cauza că ele tin să aibă forme mai unice.#fff în loc de #ffffff.input[type="text"]. Ele sunt opționale în unele cazuri, și sunt o bună practică pentru consistență.margin: 0; în loc de margin: 0px;.Mai multe detalii despre termenii utilizați în această secțiune vedeți în acest articol de pe Wikipedia.
/* 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;
}Declarațiile proprietăților comune trebuiesc grupate împreună conform ordinii:
Poziționarea vine prima pentru că poate elimina elementul din fluxul normal al documentului și suprascrie stilurile aferente acesteia. Modelul de apariție este pe a doua poziție deoarece dicteaza dimensiunile și amplasarea elementului.
Restul are loc în interiorul componentului fără a afecta elementele din secțiunea precedentă, deci ele ocupă ultimele poțiții.
Pentru o listă completă a proprietăților și ordinii lor, vedeți acest Recess.
.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În comparație cu <link>, @import este mai lent, adaugă mai multe cereri de pagină, sau cauzează mai multe probleme neașteptate. Optați pentru o alternativă:
<link> multiplePentru mai multă informație, citiți acest articol de Steve Souders.
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
@import url("more.css");
</style>Amplasați media queries cît mai aproape de seturile lor de reguli relevante cînd este posibil. Nu le grupați într-un alt fișier sau la sfîrșitul documentului. Asta le va face mai puțin observabile de către alte persoane. Acesta este un început tipic.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}Cînd folosiți proprietăți prefixate de numele producătorului, deplasați fiecare proprietate astfel încît liniile din valoarea declarării se pot alinia vetical pentru o editare multi-linie mai ușoară.
În Textmate, folosiți Text → Edit Each Line in Selection (⌃⌘A). În Sublime Text 2, folosiți Selection → Add Previous Line (⌃⇧↑) and Selection → Add Next Line (⌃⇧↓).
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}În cazul cînd un set de reguli include doar o singură declarare, considerație ștergerea sfîrșiturilor de linie pentru citire și editare mai ușoară. Oricare set de reguli cu declarații multiple trebuie separat în mai multe linii.
Factorul-cheie este detecția erorilor, de ex. un validator CSS constată că aveți o eroare de sintaxă în linia Line 183. Cu o singură declarare nu o veți pierde. Cu declarări multiple, veți avea un cod mai curat.
/* 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; }Limitați folosirea declarărilor prescurate în cazurile cînd trebuie să setați explicit toate valorile. Multe tipuri de notații prescurtate include:
paddingmarginfontbackgroundborderborder-radiusDeseori nu avem nevoia de a seta toate valorile pe care le reprezintă o declarare prescurtată. De exemplu, heading-urile HTML setează doar deplasarea de sus și jos, deci cînd e necesar, suprascrieți doar acele valori. Folosirea excesivă a notațiilor prescurtate aduce la erori neașteptate.
Mozilla Developer Network are un articol despre notațiile prescurtate pentru cei care nu cunosc notația sau comportamentul acestora.
/* 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;
}Evitați gruparea fără de folos. Doar din cauză că puteți grupa, nu e necesar s-o faceți mereu. Considerați gruparea doar dacă doriți izolarea stilurilor față de un anumit părinte sau dacă există mai multe elemente care trebuiesc grupate.
Lectură adițională:
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}Pentru lizibilitate, delimitați operatorii matematici în parenteze cu un singur spațiu între valori, variabile și operatori.
// Bad example
.element {
margin: 10px 0 @variable*2 10px;
}
// Good example
.element {
margin: 10px 0 (@variable * 2) 10px;
}Codul este scris și menținut de oameni. Codul trebuie să fie descriptiv, bine comentat și lizibil pentru alții. Comentariile bune transmit contextul sau scopul. Evitați doar reproducerea unui nume component sau clase.
Folosiți propoziții întregi pentru comentarii mai mari și fraze succinte pentru note generale.
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}.btn și .btn-danger)..btn e de folos pentru button, dar .s nu înseamnă nimic..js-* pentru a specifica comportamentul (ca antonim al stilului), dar păstrați acele clase în afara codului CSS.Este binevenit să aplicați mai multe din aceste reguli la crearea variabilelor Sass și Less.
/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }[class^="..."]) în cazul cînd mai multe elemente le pot conține. Performanța browser-ului este afectată de către acestea.Lectură adițională:
/* 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 { ... }Aplicați următoarele setări în editorului vostru pentru a evita inconsistențe comune ale codului:
Considerați documentarea și aplicarea acestor preferințe în fișierul .editorconfig corespunzător editoruului vostru. Pentru exemplu, vedeți pe cel din Bootstrap. Vedeți mai mult despre EditorConfig.