Charte CSS

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.

Structure

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.

  1. reset
  2. fonts
  3. normalize
  4. forms
  5. layout
  6. header
  7. footer
  8. objets
  9. pages
  10. animation
  11. mediaqueries

À 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 */

            

Nommage

É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).

Format


.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;
}
                

Exceptions


.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);
}
                    

Ordre de déclaration


.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
}
                    

Inspirations et Références