Guide de style pour CSS

Ce document décrit quelques bonnes pratiques pour l’écriture des fichiers CSS.

Commençons par bien définir les termes:

Il s’agit d’une combinaison de noms de balises (sans les chevrons < >), de noms de classes (commençant par un point .), de noms d’id (commençant par une dièse #) et d’opérateurs. Ils permettent de cibler les éléments XHTML.

Il s’agit de couples nom-valeur indiquant un aspect à styler (graisse de la police, couleur de fond, etc.).

Elles sont composées de:

• un ou plusieurs sélecteur séparés par des virgules (,)
• suivi d’un bloc encadré par des accolades ({})
• dans lequel on trouve zéro ou plusieurs propriétés séparées par des points-virgules (;)

@import "style.css"; /* court et ne fonctionne pas dans IE4 (bonne chose) */

Comme dans n’importe quel source, l’indentation permet la hiérarchie des éléments. Prennons un exemple simple

<div class="article">
  <h2>Titre de mon article</h2>
  <p>Ceci est mon article.</p>
</div>

.article{
  border: 1px solid #CCC;
}
  .article h2{
    font-weight: bold;
  }
  .article p{
    color: #000;
    background: #FFF;
  }

Les deux dernières règles sont indentées pour rapport à la première pour montrer que les h2 et p se situent à l’intérieur d’un élément de classe “article”. Cela peut sembler redondant avec la composition du sélecteur (.article suivi de h2) mais en fait, cette convention est plutôt complémentaire, il faut penser notamment aux sélecteurs raccourcis (les id ou les sélecteurs omettant les éléments intérmédiaires de l’arborescence).

Les propriétés sont ensuite indentées par rapport au sélecteur.

Reste à définir le type d’indentation selon deux critères:

• espaces vs tabulations
  • les espaces permettent la même largeur d’indentation partout mais consomment n fois plus de caractères que la tabulation
  • les tabulations permettent de n’utiliser qu’un seul caractère mais la largeur est variable selon les éditeurs
• largeur de l’indentation (2, 4, 8 espaces ?)
  • elle permet d’ajuster le “contraste” de l’indentation, c’est-à-dire l’écart visuel entre les règles les moins et les plus indentées. Ce choix peut prendre en compte la lisibilité et d’autres contraintes comme la largeur de 80 caractères à ne pas dépasser.

L’accolade ouvrante se trouve sur le même ligne que le sélecteur. L’accolade fermante se trouve sur un nouvelle ligne.

table tr td{
  border: 1px solid;
  vertical-align: middle;
}

Le nom de la propriété est suivi du caractère deux point :, d’un espace, de la valeur et enfin d’un point virgule. Le point virgule est toujours mis, même pour la dernière propriété d’une règle. On est alors sûr de ne pas avoir d’erreur de syntaxe, notamment lorsqu’on veut ajouter une nouvelle propriété par la suite.

Les propriétés raccourcies remplacent avantageusement plusieurs propriétés. Par exemple:

• background regroupe:
  • background-color
  • background-image
  • background-repeat
  • background-position

On peut alors donner les valeurs à la chaîne:

background: #FFF url(img/background.png) no-repeat left center;

au lieu de

background-color: #FFF;
background-image: url(img/background.png);
background-repeat: no-repeat;
background-position: left center;

Vous noterez que l’url n’est pas délimitée par des guillemets (“) pour prendre en compte IE/Mac qui n’arrive à interpréter de telles URLs.

/**
 * $header
 *******************************/
 
/* ---[ $header ]------------------------ */

Il peut être intéressant d’ajouter des marques pages permettant de retrouver rapidement un morceau du fichier. Il suffit d’utiliser un caractère que l’on ne trouvera habituellement pas dans CSS comme & ou $. Il sera alors de retrouver rapidement les morceaux marqués avec la fonction recherche de l’éditeur.