index.html

---
layout: default
---


<div class="heading" id="toc">
  <h2>Cuprins</h2>
</div>
<div class="section toc">
  <div class="col">
    <h4><a href="#html">HTML</a></h4>
    <ul>
      <li><a href="#html-syntax">Sintaxa</a></li>
      <li><a href="#html-doctype">HTML5 doctype</a></li>
      <li><a href="#html-lang">Atributul language</a></li>
      <li><a href="#html-encoding">Codificarea caractereor</a></li>
      <li><a href="#html-ie-compatibility-mode">Modul de compatibilitate Internet Explorer</a></li>
      <li><a href="#html-style-script">Includerea CSS și JavaScript</a></li>
      <li><a href="#html-practicality">Optați pentru practicalitate în loc de puritate</a></li>
      <li><a href="#html-attribute-order">Ordinea atributelor</a></li>
      <li><a href="#html-boolean-attributes">Atributele logice</a></li>
      <li><a href="#html-reducing-markup">Reducerea markup-ului</a></li>
      <li><a href="#html-javascript">Markup generat de JavaScript</a></li>
    </ul>
  </div>
  <div class="col">
    <h4><a href="#css">CSS</a></h4>
    <ul>
      <li><a href="#css-syntax">Sintaxa CSS</a></li>
      <li><a href="#css-declaration-order">Ordinea de declarare</a></li>
      <li><a href="#css-import">Nu folosiți @import</a></li>
      <li><a href="#css-media-queries">Amplasarea pentru media query</a></li>
      <li><a href="#css-prefixed-properties">Proprietăți prefixate</a></li>
      <li><a href="#css-single-declarations">Reguli cu delarații singulare</a></li>
      <li><a href="#css-shorthand">Notații prescurtate</a></li>
      <li><a href="#css-nesting">Gruparea în Less și Sass</a></li>
      <li><a href="#css-operators">Operatorii în Less și Sass</a></li>
      <li><a href="#css-comments">Commentarii</a></li>
      <li><a href="#css-classes">Clase</a></li>
      <li><a href="#css-selectors">Selectori</a></li>
      <li><a href="#css-organization">Organizarea codului CSS</a></li>
    </ul>
  </div>
</div>


<div class="section" id="golden-rule">
  <div class="col">
    <h2>Regula de aur</h2>
    <p>Î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 <a href="/~https://github.com/mdo/code-guide/issues/new">înregistrate pe GitHub</a>.</p>
  </div>
  <div class="col">
    <blockquote>
      <p>Fiecare linie de cod trebuie să arate precum ar fi scrisă de o singură persoană, indiferent de numărul contributorilor.</p>
    </blockquote>
  </div>
</div>



<div class="heading" id="html">
  <h2>HTML</h2>
</div>

<div class="section" id="html-syntax">
  <div class="col">
    <h3>Sintaxa</h3>
    <ul>
      <li>Folosiți tab-uri ușoare cu două spații, aceasta e unica siguranță că codul se va afișa la fel în orice mediu.</li>
      <li>Elementele imbricate trebuie să fie dantelate o singură dată (două spații).</li>
      <li>Folosiți mereu ghilimele duble pentru atribute și nicidecum singulare.</li>
      <li>Nu includeți o bară suplimentară în elementele care se auto închid — <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 specifică</a> că ele sunt opționale.</li>
      <li>Nu omiteți tag-urile închise opțional (ex. <code>&lt;/li&gt;</code> or <code>&lt;/body&gt;</code>).</li>
    </ul>
  </div>
  <div class="col">
    {% highlight html %}{% include html/syntax.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-doctype">
  <div class="col">
    <h3>HTML5 doctype</h3>
    <p>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.</p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/doctype.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-lang">
  <div class="col">
    <h3>Atributul language</h3>
    <p>Din specificațiile HTML5:</p>
    <blockquote>
      <p>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.</p>
    </blockquote>
    <p>Citiți mai mult despre atributul <code>lang</code>  <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">in the spec</a>.</p>
    <p>Găsiți pe Sitepoint <a href="http://reference.sitepoint.com/html/lang-codes">o listă a codurilor limbilor</a>.</p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/lang.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-ie-compatibility-mode">
  <div class="col">
    <h3>Modul de compatibilitate cu IE.</h3>
    <p>Internet Explorer suportă folosirea unui tag <code>&lt;meta&gt;</code> 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 <strong>edge mode</strong>.</p>
    <p>Pentru mai multă informație, <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e">vedeți acest articol de pe StackOverflow.</a>.</p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-encoding">
  <div class="col">
    <h3>Codificarea caracterelor</h3>
    <p>Î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).</p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/encoding.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-style-script">
  <div class="col">
    <h3>Includerea CSS și JavaScript</h3>
    <p>Conform specificațiilor HTML5, deobicei nu este nevoie să specificați un atribut <code>type</code> la includerea fișierelor CSS și JavaScript deoarece valorile <code>text/css</code> și respectiv <code>text/javascript</code> sunt utilizate implicit.</p>
    <h4>Adrese spre specificațiile HTML5</h4>
    <ul>
      <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">Folosirea link</a></li>
      <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">Folosirea style</a></li>
      <li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Folosirea script</a></li>
    </ul>
  </div>
  <div class="col">
    {% highlight html %}{% include html/style-script.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-practicality">
  <div class="col">
    <h3>Optați pentru practicalitate în loc de puritate</h3>
    <p>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.</p>
  </div>
</div>

<div class="section" id="html-attribute-order">
  <div class="col">
    <h3>Ordinea atributelor</h3>
    <p>Atributele HTML trebuie să apară anume în această ordine, pentru o citire mai ușoară a codului.</p>
    <ul>
      <li><code>class</code></li>
      <li><code>id</code>, <code>name</code></li>
      <li><code>data-*</code></li>
      <li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code>, <code>value</code></li>
      <li><code>title</code>, <code>alt</code></li>
      <li><code>role</code>, <code>aria-*</code></li>
    </ul>
    <p>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.</p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-boolean-attributes">
  <div class="col">
    <h3>Atributele logice</h3>
    <p>Un atribut logic este cel care nu are nevoie de declararea valorii. XHTML are o asemenea cerință, dar HTML5 nu.</p>
    <p>Pentru mai multă informație, consultați <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">secțiunea WhatWG la atributele logice</a>:</p>
    <blockquote>
      <p>Prezența unui atribut logic în cadrul unui element înseamnă valoarea lui adevărată, iar absența lui - falsă.</p>
    </blockquote>
    <p>Dacă <em>trebuie</em> să includeți valoarea lui, dar <strong>nu aveți nevoie</strong>, urmați acest ghid WhatWG:</p>
    <blockquote>
      <p>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.</p>
    </blockquote>
    <p><strong>Pe scurt, nu specificați valoarea.</strong></p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-reducing-markup">
  <div class="col">
    <h3>Reducerea codului HTML</h3>
    <p>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:</p>
  </div>
  <div class="col">
    {% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="html-javascript">
  <div class="col">
    <h3>Markup-ul generat de JavaScript</h3>
    <p>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.</p>
  </div>
</div>



<div class="heading" id="css">
  <h2>CSS</h2>
</div>

<div class="section" id="css-syntax">
  <div class="col">
    <h3>Sintaxa</h3>
    <ul>
      <li>Folosiți tab-uri ușoare din 2 spații — asta este una din garanțiile că codul se va afișa bine în orice mediu.</li>
      <li>La gruparea selectorilor, păstrați doar un singur selector per linie.</li>
      <li>Includeți un spațiu înainte de deschiderea acoladei de declarare a blocului pentru legibilitate.</li>
      <li>Amplasați acolada de închidere a blocului într-o linie nouă.</li>
      <li>Includeți un spațiu după <code>:</code> pentru fiecare declarare.</li>
      <li>Fiecare declarație trebuie să apară în propria sa linie pentru o developare mai bună a erorilor.</li>
      <li>Încheiați toate declarațiile cu simbolul punct și virgulă. Este opțional pentru ultima declarație, dar codul va fi mai expus la erori fără acesta.</li>
      <li>Valorile proprietăților care sunt separate prin virgulă trebuie să includă un spațiu după fiecare din ele (De ex. <code>box-shadow</code>).</li>
      <li>Nu includeți spații după virgule <em>în cadrul</em> valorilor <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>, sau <code>rect()</code>. 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).</li>
      <li>Nu prefixați valorile proprietăților sau parametrii de culori cu un zerou (De ex. <code>.5</code> în loc de <code>0.5</code> și <code>-.5px</code> în loc de <code>-0.5px</code>).</li>
      <li>Folosiți litere mici pentru valorile hexadecimale, de ex. <code>#fff</code>. Literele mici sunt mai lizibile la mărirea documenteului din cauza că ele tin să aibă forme mai unice.</li>
      <li>Folosiți versiunile scurte ale valorilor hexadecimale, de ex. <code>#fff</code> în loc de <code>#ffffff</code>.</li>
      <li>Delimitați prin ghilimele valoarile atributelor în selectori, de ex. <code>input[type="text"]</code>. <a href="http://mathiasbynens.be/notes/unquoted-attribute-values#css">Ele sunt opționale în unele cazuri</a>, și sunt o bună practică pentru consistență.</li>
      <li>Evitați specificarea unităților pentru valorile nule, de ex. <code>margin: 0;</code> în loc de <code>margin: 0px;</code>.</li>
    </ul>
    <p>Mai multe detalii despre termenii utilizați în această secțiune <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax">vedeți în acest articol</a> de pe Wikipedia.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/syntax.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-declaration-order">
  <div class="col">
    <h3>Ordinea declarării</h3>
    <p>Declarațiile proprietăților comune trebuiesc grupate împreună conform ordinii:</p>
    <ol>
      <li>Poziționare</li>
      <li>Modelul de apariție</li>
      <li>Tipografic</li>
      <li>Vizual</li>
    </ol>
    <p>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.</p>
    <p>Restul are loc <em>în interiorul</em> componentului fără a afecta elementele din secțiunea precedentă, deci ele ocupă ultimele poțiții.</p>
    <p>Pentru o listă completă a proprietăților și ordinii lor, vedeți acest <a href="http://twitter.github.com/recess">Recess</a>.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/declaration-order.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-import">
  <div class="col">
    <h3>Nu folosiți <code>@import</code></h3>
    <p>În comparație cu <code>&lt;link&gt;</code>, <code>@import</code> este mai lent, adaugă mai multe cereri de pagină, sau cauzează mai multe probleme neașteptate. Optați pentru o alternativă:</p>
    <ul>
      <li>Folosiți elemente <code>&lt;link&gt;</code> multiple</li>
      <li>Compilați codul CSS cu un pre-procesor ca Sass sau Less într-un singur fișier</li>
      <li>Concatenați fișierele CSS cu instrumentele oferite de Rails, Jekyll, și altele</li>
    </ul>
    <p>Pentru mai multă informație, <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">citiți acest articol de Steve Souders</a>.</p>
  </div>
  <div class="col">
    {% highlight html %}{% include css/import.html %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-media-queries">
  <div class="col">
    <h3>Amplasarea pentru media query</h3>
     <p>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.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/media-queries.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-prefixed-properties">
  <div class="col">
    <h3>Proprietăți prefixate</h3>
    <p>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ă.</p>
    <p>În Textmate, folosiți <strong>Text &rarr; Edit Each Line in Selection</strong> (&#8963;&#8984;A). În Sublime Text 2, folosiți <strong>Selection &rarr; Add Previous Line</strong> (&#8963;&#8679;&uarr;) and <strong>Selection &rarr;  Add Next Line</strong> (&#8963;&#8679;&darr;).</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/prefixed-properties.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-single-declarations">
  <div class="col">
    <h3>Declarații singulare</h3>
    <p>În cazul cînd un set de reguli include <strong>doar o singură declarare</strong>, 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.</p>
    <p>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.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/single-declarations.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-shorthand">
  <div class="col">
    <h3>Notații prescurtate</h3>
    <p>Limitați folosirea declarărilor prescurate în cazurile cînd trebuie să setați explicit toate valorile. Multe tipuri de notații prescurtate include:</p>
    <ul>
      <li><code>padding</code></li>
      <li><code>margin</code></li>
      <li><code>font</code></li>
      <li><code>background</code></li>
      <li><code>border</code></li>
      <li><code>border-radius</code></li>
    </ul>
    <p>Deseori 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.</p>
    <p>Mozilla Developer Network are un articol despre <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">notațiile prescurtate</a> pentru cei care nu cunosc notația sau comportamentul acestora.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/shorthand.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-nesting">
  <div class="col">
    <h3>Gruparea în Less și Sass</h3>
    <p>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.</p>
    <p>Lectură adițională:</p>
    <ul>
      <li><a href="http://markdotto.com/2015/07/20/css-nesting/">Nesting in Sass and Less</a></li>
    </ul>
  </div>
  <div class="col">
    {% highlight scss %}{% include css/nesting.scss %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-operators">
  <div class="col">
    <h3>Operatorii în Less și Sass</h3>
    <p>Pentru lizibilitate, delimitați operatorii matematici în parenteze cu un singur spațiu între valori, variabile și operatori.</p>
  </div>
  <div class="col">
    {% highlight scss %}{% include css/operators.scss %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-comments">
  <div class="col">
    <h3>Commentarii</h3>
    <p>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.</p>
    <p>Folosiți propoziții întregi pentru comentarii mai mari și fraze succinte pentru note generale.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/comments.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-classes">
  <div class="col">
    <h3>Nume de clase</h3>
    <ul>
      <li>Păstrați clasele cu litere mici și folosiți cratime (nu cratima de jos sau camelCase). Cratimele sunt niște pauze naturale într-o clasă relevantă (de ex <code>.btn</code> și <code>.btn-danger</code>).</li>
      <li>Evitați escesul de notații arbitrare sau prescurtate. <code>.btn</code> e de folos pentru <em>button</em>, dar <code>.s</code> nu înseamnă nimic.</li>
      <li>Păstrați numele claselor căt mai scurte și succint posibile</li>
      <li>Folosiți nume sugestive; folosiți nume care relevă structura sau scopul, nu cele prezentaționale.</li>
      <li>Prefixați numele claselor în baza celui mai apropiat părinte sau clasei de bază.</li>
      <li>Folosiți clasele <code>.js-*</code> pentru a specifica comportamentul (ca antonim al stilului), dar păstrați acele clase în afara codului CSS.</li>
    </ul>
    <p>Este binevenit să aplicați mai multe din aceste reguli la crearea variabilelor Sass și Less.</p>
  </div>
  <div class="col">
    {% highlight css %}{% include css/class-names.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-selectors">
  <div class="col">
    <h3>Selectorii</h3>
    <ul>
      <li>Folosiți clasele în loc de numele generic al elementului pentru o performanță mai mare a afișării.</li>
      <li>Evitați folosirea unor selectori de atribute (de ex <code>[class^="..."]</code>) în cazul cînd mai multe elemente le pot conține. Performanța browser-ului este afectată de către acestea.</li>
      <li>Folsiți selectori scurți și încercați să limitați numărul elementelor în fiecare selector la 3.</li>
      <li>Delimitați clasele față de cel mai apropiat părinte <strong>doar</strong> cînd e necesar (de ex. cînd nu folosiți clase prefixate).</li>
    </ul>
    <p>Lectură adițională:</p>
    <ul>
      <li><a href="http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/">Scope CSS classes with prefixes</a></li>
      <li><a href="http://markdotto.com/2012/03/02/stop-the-cascade/">Stop the cascade</a></li>
    </ul>
  </div>
  <div class="col">
    {% highlight css %}{% include css/selectors.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-organization">
  <div class="col">
    <h3>Organizarea</h3>
    <ul>
      <li>Organizați secțiunile de cod după component.</li>
      <li>Dezvoltați o ierarhie consistentă de comentarii.</li>
      <li>Folosiți spațiile în separarea secțiunilor de cod pentru citirea documentelor mai mari.</li>
      <li>Cînd folosiți mai multe fișiere CSS, efectuați separarea după component în loc de pagină.</li>
    </ul>
  </div>
  <div class="col">
    {% highlight css %}{% include css/organization-comments.css %}{% endhighlight %}
  </div>
</div>

<div class="section" id="css-editor-prefs">
  <div class="col">
    <h3>Preferințele editorului</h3>
    <p>Aplicați următoarele setări în editorului vostru pentru a evita inconsistențe comune ale codului:</p>
    <ul>
      <li>Folosiți tab-uri ușoare de 2 spații.</li>
      <li>Eliminați spațiile inutile la salvarea fișierului.</li>
      <li>Setați encodingul la UTF-8.</li>
      <li>Adăugați linie nouă la sfărțitul fișierelor.</li>
    </ul>
    <p>Considerați documentarea și aplicarea acestor preferințe în fișierul <code>.editorconfig</code> corespunzător editoruului vostru. Pentru exemplu, vedeți <a href="/~https://github.com/twbs/bootstrap/blob/master/.editorconfig">pe cel din Bootstrap</a>. Vedeți mai mult despre <a href="http://editorconfig.org">EditorConfig</a>.</p>
  </div>
</div>