Nous codons pour des humains, pour nos collaborateurs présents et/ou futurs donc un code lisible et compréhensible est primordial. Cette charte propose des règles pour écrire des CSS cohérentes et uniformisées pour améliorer leur maintenabilité.
Il est recommandé de minifier les CSS pour des raisons de performance, mais uniquement en environnement de production.
Il est préférable de répartir les CSS en catégories dans des fichiers séparés. Les fichiers sont à charger dans l'ordre pour respecter la cascade des styles.
À l'intérieur d'un fichier CSS, il est plus agréable de signaler les différentes parties par des commentaires :
/* ----------------------------------------
Titre niveau 1
---------------------------------------- */
/* Titre niveau 2
----------------------- */
/* Titre niveau 3 */
Écrivez toujours en minuscule et séparez les mots par un tiret, que ce soit pour les classes CSS ou les images, pas de CamelCase. Utilisez le même nom pour la classe et pour l'image associée (exemple : .icon-user et icon-user.png). Dans l'absolu, le nom d'une classe doit signifier la fonction de l'élément qu'elle style et non son apparence. Codez le plus possible en anglais (noms des classes, commentaires).
.selector-1,
li + li,
.s-2,
nav > .s-3 {
position: relative;
display: inline-block;
padding: 6px 50px;
margin: 0 auto 20px;
font-size: 18px;
line-height: 1.3em;
background-color: #aaa;
border: 1px solid #efefef;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.selector a {
color: #bada55;
}
.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }
.selector {
box-shadow:
1px 1px 1px #000,
2px 2px 1px 1px #ccc inset;
background-image:
linear-gradient(#fff, #ccc),
linear-gradient(#f3c, #4ec);
}
.selector {
content
display
float
position
width
height
border
overflow
text-align
text-shadow
font
line-height
letter-spacing
color
opacity
background
box-shadow
animation
transition
transformation
cursor
}