Comment j’écris mon CSS ?

Il ne s’agit pas d’habitudes arbitraires et capricieuses, de fantaisies d’auteur. Ce sont des conventions d’écriture que j’ai adopté et affiné au fil du temps parce qu’elles m’évitent des erreurs et me permettent d’être plus efficace.

1. Quel usage faites-vous de la validation CSS ?

Je passe systématiquement mon code CSS au validateur du W3C, avant chaque mise en ligne. Mais c’est surtout pour me relire et vérifier que rien ne m’ait échappé, car mon but n’est pas que le code soit 100 % valide.

2. Comment utilisez-vous les commentaires en CSS ? Avez-vous des « styles » précis pour différents types de commentaires (capitales, étoiles ou autres symboles dans le commentaire, etc.) ?

J’écris mes commentaires le plus simplement possible, en caractères alphanumériques non accentués, entre slashes-étoiles. Ex. :

/* Listes d'articles et extraits introductifs */

Seule exception : les commentaires introduisant une importante portion de code sont distingués par une ou deux série de tirets, bien visibles, de façon à être rapidement repérés. Ex. :

/* ------------------------------------------
/* Disposition a l'ecran des blocs principaux
/* ------------------------------------------ */

3. Utilisez-vous des sélecteurs « verbeux » (le plus précis possibles et reprenant le contexte d’utilisation de l’élément), ou au contraire les plus courts possibles ? Ou bien une solution intermédiaire ?

Je m’efforce de trouver les termes les plus courts et le plus précis possibles, mais je n’hésite pas à écrire mes sélecteurs comme un chemin d’accès et à en utiliser plusieurs sur un même élément, car j’apprécie de pouvoir me relire longtemps après et y comprendre rapidement quelque chose sans devoir me replonger complètement dans le projet. La nomenclature est pour moi importante. Informative, elle doit se passer de commentaire.

Mais j’y gagne aussi beaucoup en souplesse : ainsi détaillés, ces sélecteurs permettent de cibler avec précision et de modifier plus facilement l’habillage sans devoir ré-éditer la structure HTML.

Par exemple : <div class="formulaire formulaire_editer formulaire_editer_article" id="formulaire_editer_article-299"> : ces sélecteurs me dévoilent/rappellent la structure du projet tout en m’y situant précisément. Dans la feuille de style, une définition de .formulaire concerne tous les formulaires du site, puis est surchargée par une définition de .formulaire_editer impactant seulement les formulaires d’édition, et ainsi de suite.

Je réserve les termes courts, en un mot, génériques, pour un emploi transversal.

4. Comment utilisez-vous les espaces, retours à la ligne, lignes vides et indentations ? Pouvez-vous fournir un exemple-type ?

• Espaces entre les propriétés et les valeurs, car les séparer comme les mots d’une phrase en facilite la compréhension.
• Pas d’indentation.
• Un sélecteur par ligne. Les déclarations qui le concernent sont alignées sur la même ligne.
• Retour à la ligne avant chaque nouveau bloc de définitions.

Exemple :

.selecteur { propriete: valeur; propriete: valeur; }
.selecteur { propriete: valeur; propriete: valeur; propriete: valeur; }
.selecteur { propriete: valeur; }

5. Regroupez-vous les blocs de déclarations (sélecteurs + leurs propriétés) de manière logique ou prévisible ? Quelle est la logique utilisée, et dans quel ordre les placez-vous ?

Oui, je regroupe les règles CSS en blocs et ceux-ci correspondent aux blocs de la mise en page. J’écris ensuite tous les sélecteurs enfants, méthodiquement, même s’ils ne sont pas stylés, de façon à refléter la structure HTML du bloc parent. Ex. :

#toto { }
#toto h2 { }
#toto ul { }
#toto ul li { }
#toto ul li strong { }
#toto ul li p { }
#toto ul li a { }

6. Utilisez-vous des indentations multiples (jusqu’à plusieurs niveaux d’indentation) pour, par exemple, refléter la structure du code HTML ?

Non. Certainement pas ! Je n’indente pas du tout le code CSS. C’est inutile et ça n’améliore pas la lecture et la compréhension du code.

7. Utilisez-vous les propriétés de raccourcies ? Si oui, les utilisez-vous systématiquement et en priorité, ou seulement lorsque cela permet de gagner quelques déclarations (propriété + valeur) ?

J’utilise les raccourcis le plus souvent possible. Sauf en cas de surcharge (avérée ou possible) où je préfère cibler de façon très précise.

8. Respectez-vous un ordre précis pour les propriétés CSS (ordre alphabétique, ordre « logique », etc.) ? Si besoin, pouvez-vous le détailler ?

Je commence par les propriétés les plus impactantes et laisse les plus longues, les plus superflues et les plus esthétisantes en fin de déclaration. Dans l’ordre :

1. D’abord les propriétés de positionnement : clear, float, z-index, position, top, right, bottom et left ;
2. puis celles modifiant le type de bloc : display et overflow ;
3. puis celles concernant le modèle de boîte : width, height, margin, padding ;
4. suivies de l’habillage de la boîte : background et border ;
5. pour terminer par la typo : text-align, font, line-height, color, etc.

Le tout en respectant le sens de lecture sur une horloge : haut, droite, bas puis gauche, pour les valeurs comme pour les propriétés, soit width avant height et top avant left.

9. Dans une feuille de styles relativement longue (plus de quelques dizaines de ligne, et jusqu’à des centaines ou milliers de lignes), comment organisez-vous les différents styles ? Utilisez vous des commentaires introduisant différentes parties, une « table des matières », ou d’autres procédés.

Oui, je structure ma feuille de style et en ordonne les déclarations du générique au spécifique, de façon à tirer profit de la cascade. Je commence donc par un reset très léger, aussitôt suivi de la redéfinition de chaque balise HTML, comprenant la typo générale et le style générique des formulaires, avant la disposition des blocs principaux. Une fois que cette base est posée, j’attaque les détails et spécificités, gabarit par gabarit, les variantes et les cas particuliers.

Oui, je structure ma feuille de style et annonce chaque section par un titre.

10. Utilisez-vous plusieurs feuilles de styles pour un projet de « petit » site (moins de dix pages-type). Utilisez-vous plusieurs feuilles de styles pour des projets plus conséquents ? Comment séparez-vous les différents styles : par type de propriétés CSS, par type de page, etc.?

Je suis partisane de la feuille de style unique. C’est toujours plus simple à maintenir. Bien écrite, la feuille de style unique reste aisément manipulable même si elle est longue comme le bras.

Cependant, lorsque l’on brasse un gros volume de lignes CSS, mieux vaut parfois répartir en plusieurs fichiers :

• une feuille principale style.css (qui peut, si besoin, en appeller d’autres avec la règle @import) pour traiter à part les éléments communs à toutes les pages (typographie.css, formulaires.css, etc.) ;
• des feuilles spécifiques appelées en surcharge sur certaines pages particulières, comme accueil.css pour la page d’accueil ;
• sans oublier les feuilles alternatives par média, comme print.css pour l’impression.

11. Utilisez-vous des hacks CSS ? Lesquels en particulier ?

Très peu. Pour cibler IE6/Win, j’emploie * html mais le plus rarement possible. Pas d’autre hack.

12. Utilisez-vous les commentaires conditionnels pour Internet Explorer ? Si oui, comment procédez-vous ?

Très rarement. Si besoin : <!--[if IE]>ie <![endif]--><!--[if IE 6]>ie6 <![endif]--><!--[if IE 7]>ie7 <![endif]--> afin de poser un sélecteur homonyme et pouvoir styler distinguement .ie6 { } par exemple, mais sans jamais créer de feuille de style spécifique au navigateur.

Et vous, comment écrivez-vous votre CSS ?