richerlariviere/normes.md

## normes.md

      
    Raw
  

              normes.md
            
          
    Normes de programmation web

Ces normes sont largements inspirées de celles de GitHub et de Bootstrap
HTML

Formattage du code


Le code passe la validation HTML5


Utilisation des conteneurs sémantiques :


L'indentation se fait avec 4 espaces


Les éléments imbriqués sont également indentés


La déclaration des attributs se fait par toujours par l'utilisation des guillemets anglais "


Les éléments se fermant tout seuls comme <img>, <br> ne doivent pas avoir de / à la fin. C'est optionnel en html5 et inutile


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


L'encodage par défaut est UTF-8 <meta charset="UTF-8">


L'inclusion de fichiers Javascript et CSS n'admet pas d'attribut type (puisque inférés par défaut avec text/css et text/javascript)


Aucun Javascript dans le HTML


Aucune balise <style></style>


Ordres des attributs


Ordre des attributs principaux

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


<a class="..." id="..." data-bidon="..." href="#">
  Lien bidon
</a>

<input class="form-control" id="..." name="..." type="text">

<img src="..." alt="...">
Vérifications booléennes


On n'utilise pas l'attribut value pour tester un booléen.

Bonne façon :
<select>
  <option value selected>1</option>
</select>
Mauvaise façon :
<select>
  <option value="1" selected>1</option>
</select>
Absence de value = faux
Présence de value= vrai
CSS

Utilisation de SASS (et non LESS pour de nombreuses raisons)
Le CSS est très dur à garder propre. Essayer de garder un ordre logique et mettre des commentaires dans les fichiers avant compilation.
Tirer profit des avantages du css précompilé au maximum

Utiliser la notation courte des couleurs en hexadécimal dès que possible.

Un document devrait le plus possible être disposé de cette manière :

Positionnement (position...)
Box-model (display...)
Typographie (font, color,text-align...)
Fioritures visuelles (background, border-radius...)

Exemple de bonne pratique (observer les espacements) :
.selecteur,
.selecteur-secondaire,
.selecteur[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;
}


Pour la valeur zéro on ne spécifie pas d'unité


Mettre les media-query proches des éléments qu'elles affectent


Javascript

On utilise TypeScript pour le javascript.
Utilisation de JSLint
À noter que dans Brackets, JSLint peut être facilement configuré. Sinon des scripts (comme une tâche grunt) ou le site peuvent faire la vérification.