CSS : normes de programmation

Référence sur drupal.org : 30 Avril 2009 – 08h55 - http://drupal.org/node/302199

Cet article est une suggestion. Voir la discussion sur http://groups.drupal.org/node/14421

Remarque : les normes de codage CSS pour Drupal s’appliquent au code faisant partie du core ou des modules tiers. Ce document se base sur les normes initialement proposées par Nick Lewis. 

Les discussions sur ces normes se poursuivent ici :  http://groups.drupal.org/node/14421

Ecrire des CSS valides

Tout le code CSS  devrait être répondre aux normes, de préférence à la norme CSS 2.1, mais la norme CSS 3.0 est  acceptable à condition que son utilisation soit justifiée et qu’il puisse y être dérogé sans altération majeure de la présentations.

Sélecteurs

Les sélecteurs doivent être sur une seule ligne, avec une espace après le dernier sélecteur, suivi par une accolade. Un sélecteur doit se terminer par une accolade fermante, non indentée, sur une ligne séparée.

.book-navigation .page-previous {
}

Sélecteurs multiples

En cas de sélecteurs multiples, ils doivent figurer chacun sur une seule ligne, sans espaces après la virgule.

#forum td.posts,
#forum td.topics,
#forum td.replies,
#forum td.pager {

Propriétés

Toutes les propriétés doivent se trouver sur la ligne qui suit l’accolade.

Chaque propriété doit :

  • être sur sa propre ligne
  • être indentée avec deux espaces
  • avoir une espace après le nom de la propriété et un espace avant la valeur de la propriété
  • se terminer par un point-virgule
#forum .description {
  color: #EFEFEF;
  font-size: 0.9em;
  margin: 0.5em;
}

Ordre alphabétique des propriétés

Les propriétés doivent être classées par ordre alphabétique. Plutôt que d’avoir ceci

body {
  font-weight: normal;
  background: #000;
  font-family: helvetica, sans-serif;
  color: #FFF;
}

vous devriez avoir cela

body {
  background: #000;
  color: #FFF;
  font-family: helvetica, sans-serif;
  font-weight: normal;
}

Propriétés avec des valeurs multiples

Lorsque des propriétés peuvent avoir des valeurs multiples, chacune de ces valeurs doit être séparé par une espace :

  font-family: helvetica, sans-serif;

Commentaires

Les fichiers CSS devraient être annotés en utilisant la syntaxe CSSdoc. Comme pour les normes de codage PHP, un bloc de documentation doit être utilisé comme ci-dessous, pour décrire la section de code qui suit le commentaire :

/**
* Documentation here.
*/

Une balise CVS ID et un bloc CSSdoc de version de fichier devraient être placés au début du fichier pour décrire le contenu du fichier :

/* $Id$ */

/**
* @file
* Short description
*
* Long description
*/

La balise CVS ID sera complétée par le CVS avec les informations adéquates

/* $Id: style.css,v 1.15 2008/12/22 15:27:26 keithsmith Exp $ */

De brefs commentaires peuvent être ajoutés après une propriété, précédés par une espace :

  background-position: 2px 2px; /* LTR */
  padding-left: 25px; /* LTR */

RTL

Drupal supporte le chargement conditionnel des fichiers CSS comportant des règles pour les langues s’écrivant de droite à gauche.

Pour un module, la surcharge de la règle doit se trouver dans un fichier nommé MODULE-rtl.css, par exemple node-rtl.css.

Pour un thème, la règle qui est surchargée doit être commentée dans la règle CSS par défaut.

Dans node-rtl.css:

#node-admin-buttons {
  clear: left;
  float: right;
  margin-left: 0;
  margin-right: 0.5em;
}

La règle dans node.css sera surchargée si le fichier rtl.css est chargé :

#node-admin-buttons {
  clear: right; /* LTR */
  float: left; /* LTR */
  margin-left: 0.5em; /* LTR */
}

Voir aussi http://drupal.org/node/132442#language-rtl.

En règle générale, vous devriez ajouter un commentaire /* LTR */ dans votre feuille de style :

  • Lorsque vous utilisez les mots-clé left ou right dans une propriété, par exemple : float : left;
  • Quand vous utilisez des marges, paddings ou bordures non symétriques sur les côtés d’une boite, par exemple :
    margin-left: 1em;
    margin-right: 2em;
  • Quand vous indiquez le sens de lecture, par exemple direction: ltr;.