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 {
#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;
}
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;
}
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;
}
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.
*/
* 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
*/
/**
* @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 */
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;
}
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 */
}
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;.
- Version imprimable
- 3604 lectures
-
Commentaires
Poster un nouveau commentaire