L'importanza di scrivere bene il codice HTML e CSS

Spesso quando scriviamo codice C# stiamo molto attenti alla sintassi, a commentare bene il codice o comunque sia cerchiamo di seguire degli standard per far sì che chi legga il codice dopo di noi o noi stessi dopo qualche mese, risulti facilmente interpretabile, soprattutto nei passaggi più complessi.
Purtroppo questa cosa non accade spesso quando invece scriviamo codice HTML o CSS.
I motivi sono semplici:

  • non abbiamo un compilatore che ci impedisce di scrivere "come vuole lui"
  • la parte di UI è quella più soggetta a modifiche (anche all'ultimo momento)

Ovviamente scrivere bene il codice HTML e CSS ci fa risparmiare molto tempo se dobbiamo apportare delle modifiche e sopratutto il browser riesce a interpretarlo meglio e quindi renderizzarlo più velocemente.
Qua sotto provo a fare un elenco di alcuni degli accorgimenti che andrebbero adottati.
Ce ne sono tanti, ma inserirò quelli più importanti.

HTML

  • Usare sempre il doppio apice e mai il singolo sugli attributi
  • Non chiudere mai i tag che non hanno bisogno di chiusura (es. img)
  • Chiudere sempre i tag che hanno la chiusura opzionale
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/logo.png" alt="Logo">
    <h1 class="title">My first page</h1>
  </body>
</html>
  • Impostare sempre l'attributo della lingua sul tag html. Questo aiuta anche gli strumenti di sintesi vocale a utilizzare il dizionario giusto
<html lang="it-it">
  • Per una facile lettura, gli attributi dei tag html dovrebbero rispettare il seguente ordine:
    • class
    • id
    • data-
    • src, href, value
    • title, alt
<a class="..." id="..." data-toggle="modal" href="#">
  Link
</a>
  • Gli attributi booleani non hanno bisogno del valore, quindi meglio non specificarlo (es. disabled, checked)
<input id="todo" type="checkbox" value="1" checked>

CSS

  • Quando si usano più selettori per un classe, andare a capo per ognuno di essi
  • Inserire uno spazio dopo i :
  • Non inserire lo 0 quando un numero inizia per 0 (es. .8)
  • Usare i caratteri minuscoli per i valori esadecimali (es. #ccc)
  • Non specificare l'unità di misura per i valori impostati a 0 (es. margin: 0)
.title,
.title-secondary {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
  • Seguire sempre lo stesso ordine quando si dichiara un classe
    • Posizione
    • Box-model
    • Font e colori
    • Sfondo e bordi
    • Altro
.title-primary {
  /* Posizione */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

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

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

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

  /* Altro */
  opacity: 1;
}
  • Le definizioni di classi di visualizzazione alternativa con media queries è buona norma inserirle subito sotto la classe originale. In questo modo si trova facilmente.
  • Non utilizzare file separati per le definizioni delle media queries
.title { ... }

@media (min-width: 960px) {
  .title { ...}
}
  • Evitare di utilizzare le dichiarazioni abbreviate per gli elementi che lo supportano. In questo modo vengono settati anche i valori che non vengono utilizzati.
    Gli elementi più comuni sono:
    • margin
    • padding
    • background
    • border
.title {
  margin-bottom: 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
  • Cercare di inserire commenti che spiegano il significato di quello che c'è scritto sotto
  • Non scrivere nel commento la stessa cosa che c'è scritta nel nome della classe
/* the title of homepage and contact page */
.title {
  ...
}
  • I nomi delle classi devono essere minuscoli
  • Si può usare il simbolo - per separare eventuali parole, non _
  • Cercare di fare le classi più piccole possibili, in modo da poter riutilizzarle più facilmente
.title { ... }
.important { ... }
.title-header { ... }

 

E voi, quanti di questi accorgimenti stavate usando? :)