Peu importe le document, il faut toujours essayer de garder un formatage commun. Cela signifie une cohérence des commentaires, de la syntaxe et des règles de nommage.
Limitez vos feuilles de style avec un maximum de 80 caractères de longueur lorsque cela est possible. Des exceptions peuvent être la syntaxe des dégradés ainsi que les URL dans les commentaires. Il n'y a rien que nous puissions faire à ce sujet.
Concernant l'indentation je préfère 2 espaces au lieu des tabulations et écrire sur plusieurs lignes CSS.
Certaines personnes préfèrent travailler avec de simples fichiers volumineux. Cela fonctionne très bien pour les petits projets mais avec les directives suivantes vous aller très vite rencontrer des problèmes. Depuis l'arrivée de sass, j'ai commencé à séparer mes feuilles de styles en petits fichiers. Cette méthode est aussi très bonne. Quelle que soit la méthode que vous choisissez, les règles suivantes et les lignes directrices s'appliquent. La seule différence notable est en ce qui concerne notre table des matières et nos titres de section. Lisez la suite pour plus d'explications…
Au sommet des feuilles de style, je maintiens une table des matières qui détaillera les sections contenues dans le document, par exemple :
/*------------------------------------*\
$CONTENU
\*------------------------------------*/
/**
* CONTENU.............Vous êtes en train de le lire
* RESET...............Réinitialisation des styles par défaut
* FONT................Les polices de caractère
*/
Ceci va permettre au prochain développeur de savoir exactement ce qu'il va trouver dans ce fichier. Chaque élément de la table des matières correspond directement à un titre de section.
Si vous travaillez sur une grande feuille de style, la section correspondante sera également dans ce fichier. Si vous travaillez sur plusieurs fichiers, chaque élément de la table des matières correspondra à une inclusion.
La table des matières n'est d'aucune utilité si elle ne possède pas de section correspondante. Les sections sont désignées ainsi :
/*------------------------------------*\
$RESET
\*------------------------------------*/
Le préfixe $ dans une section permet de faire une recherche rapide ( Cmd / Ctrl + F ou Ctrl / Shift + F )
Si vous travaillez dans une grande feuille de style, laissez cinq (5) retours chariot entre chaque section, comme ceci :
/*------------------------------------*\
$RESET
\*------------------------------------*/
[Vos
styles
par défaut]
/*------------------------------------*\
$FONT
\*------------------------------------*/
Ce gros morceau d'espaces est rapidement perceptible lorsque vous faites défiler des fichiers plus volumineux.
Si vous travaillez sur plusieurs feuilles de styles, démarrez chacun de ces fichiers avec un titre de section. Il n'est pas nécessaire d'inclure des retours chariot.
Liste des conseils →