CSS : Structure de document

Une des grosses faiblesses des documents CSS, sont les structures internes.
Même si on à tendance à commenter un minimum le code, il s'agit de commentaire largement insuffisant.

Rappelez-vous que CSS est dédié à faciliter la maintenance de la mise en forme graphique, que vous ne serez sûrement pas le seul développeur à travailler sur le projet et que vous aurez tendance à revoir ou à léguer votre code à quelqu'un dans 6 mois.

Basons nous sur les idées avancées par Andy Budd dans son bouquin "CSS Mastery" pour améliorer tout ça...

1. Prévoyons un header d'informations
2. Améliorons la séparation des différents niveaux de développements.
3. Améliorons la lisibilité de 'bidouilles'

Prévoyons un header d'information
Dans beaucoup de langages les développeurs définissent la structure du document, le status de développement, l'auteur, le projet, etc ...
En CSS cela s'avère plus que nécessaire !

/*-----------------------------------------------------------
	CSS Document (Cascading Style Sheet)

	project:	foo bar
	released:	2008-02-13
	version:	1.0
	author:		John Doe
	email:		John@doe.name
	website:	http://doe.name
	info :		Just an example
	
	Summary :	RESET
			FONTS
			GENERIC RENDERINGS
				-FORMS
				-TABLES
---------------------------------------------------------- */

Cela donne un aperçu général de l'état et du contenu du document ainsi que des informations sur le développeur à qui se tourner en cas de questions.
Notez que la liste d'informations est non exhaustive, et que j'ai tendance à ajouter des sommaires bien détaillés pour faciliter la tâche à mes collègues.

Bien, prochaine étape !

Améliorons la séparation des différents niveaux de développements
On retrouve toujours des séparations plus ou moins futiles, tel que des lignes de commentaire /**********/
C'est bien sympa, mais ça ne suffit absolument pas.

En se basant sur le sommaire nous pouvons définir une structure bien plus explicite.
Exemple :

/* RESET
---------------------------------------------------------- */
* { margin:0; padding:0; }

/* FONTS
---------------------------------------------------------- */
h1 { color:red; }

Mais Andy Budd va plus loin, il place un caractère devant chaque titre pour éviter des résultats multiples, donnant :

/* =RESET
---------------------------------------------------------- */
* { margin:0; padding:0; }

/* =FONTS
---------------------------------------------------------- */
h1 { color:red; }

Pour trouver la section précise il vous suffira de faire une recherche sur "=FONTS".

Améliorons la lisibilité de 'bidouilles'
Il vous arrivera toujours de faire des bidouilles plus ou moins importantes, allant du simple bug de double-marge, au support de inline-block pour Firefox, passant par des filtre PNG pour IE, etc ...

Même si cela vous parait banal, les développeurs qui vont suivront n'auront pas forcément la même approche ni le même niveau que vous.
Il se poseront des questions, et vous passerez vos journées à répéter 20x les mêmes explications ...

Y remédier concrètement :

#foo-bar {
	float:left;
	margin:10px;
	display:inline; /* :TRICKY: IE 6 -> double-margin bug */
	background:url(foobar.png);
}

#foo-bar span {
	/*	
		:TRICKY: Readable by screen readers, text browsers, ... 
		hidden on modern graphic browsers 
	*/
	position:absolute;
	left:-9999%;
}

Il s'agit donc tout simplement de donner quelques informations à l'aide de mots-clefs tel que :TRICKY:, :INFO:, :TODO:, :BUG:, etc ...
Notez que j'ai tendance à toujours écrire en anglais, au niveau d'une communauté polyglottes et d'entreprise multinationale je me vois très mal documenter mes codes en français ...

Même si cela demande un petit moment d'adaptation, cela améliorera significativement la qualité de votre code, vous fera gagner énormément de temps par la suite, et facilitera la maintenance par qui qu'elle soit effectuée.

En espérant que cet article vous ai convaincu et vous aide, n'hésitez pas d'y apporter vos astuces, idées et critiques.