CSS : Syntaxe de rigueur

Il y a 36 façons d'écrire une feuille de style CSS, autant d'organisations envisageables, mais une organisation générale « commune » est appréciable, notamment pour des travaux collectifs où plusieurs personnes ont la possibilité de s'occuper des styles CSS.

Il ne s'agit pas d'imposer sa façon de faire à tous, mais un minimum d'organisation logique permet assurement plus de facilité pour le travail en groupe.

Au delà du travail en groupe, sur le forum Alsacréations par exemple, lorsqu'un membre nous soumet son code CSS, un code organisé serait vraiment mieux, en effet, rien de plus énervant que de perdre son temps à déchiffrer la feuille de style de quelqu'un d'autre !
Le pire reste les déclarations de style sur une seule ligne, un vrai calvaire pour s'y retrouver ;) (sauf pour des déclarations uniques, où une seule propriété est indiquée, c'est pour ce cas assez lisible).

La cascade CSS et sa syntaxe

CSS signifie Cascading Style Sheet, soit feuille de style en cascade, où les mots importants sont style et cascade. Pour ce qui est de la partie style, les lecteurs réguliers d'Alsacréations sauront de quoi il s'agit, sinon se référer aux nombreux tutoriels, mais la partie cascade est peut être moins évidente pour certains, l'accent n'est pas souvent mis sur ce point pourtant fondamental dans la mise en forme CSS.
Il existe déjà des ressources et explications sur le sujet, je ne m'y attarderai donc pas, je me contente de vous les indiquer :

Pour ceux qui n'ont pas le courage de tout lire (il faudra y passer tout de même !), grosso modo, c'est le degré d'importance des différents sélecteurs en fonction de l'endroit où ils sont déclarés (feuille de style externe, interne, style en ligne, etc) et de la façon dont ils sont déclarés et c'est ce point qui nous interessera ici.
En effet, suivant la manière dont vous déclarez vos sélecteurs, ils n'ont pas le même poids, les deux articles pré-cités l'expliquent très bien, et c'est là qu'une rigueur de syntaxe est de mise et où au final, au delà du gain en clarté du code, vous gagnerez en précision et en efficacité dans vos déclarations de style.

Prenons un exemple pour bien comprendre

Soit la structure HTML suivante :

<body>
	<div id="conteneur">
		<p class="important">Un paragraphe, il a une classe <code>important</code>. Ce paragraphe est contenu dans la balise <code>&lt;div&gt;</code> nommée (via <code>id</code>) <code>conteneur</code>.</p>
		<p class="explication">Un autre paragraphe, celui-ci a une classe <code>explication</code>. Ce paragraphe est contenu dans la balise <code>&lt;div&gt;</code> nommée (via <code>id</code>) <code>conteneur</code>.</p>
		<p>Un dernier paragraphe neutre sans classe, mais dans lequel se trouve un élément isolé <strong class="important">important</strong> avec la classe <code>important</code> lui aussi et un élément isolé <span class="explication">d'explication</span> lui avec la classe <code>explication</code>. Ce paragraphe est contenu dans la balise <code>&lt;div&gt;</code> nommée (via <code>id</code>) <code>conteneur</code>.</p>
	</div>

	<p class="important">Un paragraphe, il a une classe <code>important</code>. Ce paragraphe est directement enfant de <code>&lt;body&gt;</code></p>
	<p class="explication">Un autre paragraphe, celui-ci a une classe <code>explication</code>. Ce paragraphe est directement enfant de <code>&lt;body&gt;</code></p>
	<p>Un dernier paragraphe neutre sans classe, mais dans lequel se trouve un élément isolé <strong class="important">important</strong> avec la classe <code>important</code> lui aussi et un élément isolé <span class="explication">d'explication</span> lui avec la classe <code>explication</code>. Ce paragraphe est directement enfant de <code>&lt;body&gt;</code>.</p>
</body>

La première partie est une division qui contient 3 paragraphes avec différentes classes ou pas de classe, cette division est nommée grâce à un id pour permettre une sélection plus fine. La seconde partie est sensiblement la même à ceci près que les paragraphes sont directement enfant du <body>.

Appliquons ces diverses déclarations de style :

/*----------------------------------------------+
+ Styles généraux                               +
+----------------------------------------------*/

body { font: 0.9em "Trebuchet MS", helvetica, sans-serif }

p
{
	margin: 5px;
	padding: 5px;
	line-height: 1.3em;
	text-align: justify
}

/*----------------------------------------------+
+ Styles pour éléments importants et            +
+ d'explication de l'ensemble de la page        +
+----------------------------------------------*/


*.important { color: #f00 }

*.explication { color: #080 }

/*----------------------------------------------+
+ Styles pour le conteneur 1                    +
+----------------------------------------------*/

div#conteneur
{
	width: 33%;
	margin: 5px;
	border: 1px dotted #555
}

/*----------------------------------------------+
+ Elements importants du conteneur 1            +
+----------------------------------------------*/

div#conteneur p.important
{
	border-left: 2px solid #f00;
	background: #fee
}

div#conteneur strong.important
{
	font-variant: small-caps;
	font-size: 0.9em;
	letter-spacing: 0.05em
}

/*----------------------------------------------+
+ Elements d'explications du conteneur 1        +
+----------------------------------------------*/

div#conteneur p.explication
{
	border-left: 2px solid #080;
	background: #ded
}

div#conteneur span.explication { font-style: italic }

Vous pouvez voir le résultat dans cet exemple du code ci-dessus pour vous rendre compte de ce qu'est la cascade CSS. Vous pouvez ainsi vous rendre compte que .uneclass est différent de span.uneclass ou encore strong.uneclass qui sont 3 sélecteurs différents. A noter que .uneclass est en fait le sélecteur raccourci de *.uneclass qui sélectionne tous les éléments ayant pour classe uneclass. Vous voyez aussi que l'on peut mettre en forme 2 éléments de même classe différement en fonction de leur emplacement dans le code HTML, la distinction se faisant avec le sélecteur div#conteneur. Une classe peut aussi prendre différents styles en fonction de l'élément HTML auquel elle est attachée.

Voici pour les bases générales de ce qu'est la cascade CSS, vous vous rendez bien compte que la rigueur est de mise lorsque vous faites vos feuilles de style CSS.

Au delà de l'aspect technique des choses

Voilà pour le récapitulatif technique, mais je vous reconseille vivement la lecture des articles proposés au début. Ce qui va nous interesser pour aujourd'hui, c'est la façon rédiger ses feuilles de style tant au niveau de l'organisation qu'au niveau de la syntaxe.
Comme nous l'avons vu précédement, la syntaxe des sélecteurs joue un rôle important, écrire précisement les choses permet plus de précision et de « finesse » pour atteindre les éléments que l'on souhaite, au delà de ce point, c'est aussi une écriture qui, de par sa précision, permet de savoir plus facilement ce qui est mis en forme sans jongler avec le code HTML toutes les 2 minutes. En effet avec des syntaxes du type #monid ou .maclass, on ne sait pas à quel élément HTML correspond #monid ni .maclass, y a-t-il différentes balises qui ont la classe maclass et qui doivent être gérées différement, l'élément monid est-il une division, un titre, un paragraphe, une liste ?
Autant de questions qui trouvent réponses en regardant la source HTML ce qui est plutôt fastidieux, en effet imaginez que votre feuille de style soit faite pour l'ensemble de votre site, il y aura certaines déclarations qui ne serviront que pour certaines pages uniquement, alors si vous devez chercher la page en question pour voir à quoi correspond le code CSS qui vous interesse, vous n'êtes pas arrivé ! L'autre solution est d'écrire directement ses sélecteurs CSS de façon rigoureuse et précise en précisant que l'élément monid est une division par exemple, div#monid et que maclass doit être appliquée à tous les éléments de la page (*.maclass) ou avec certains éléments qui seront traités différement (monelement.maclass).

Cette façon de procéder vous fera gagner en lisibilité, en efficacité et les mises à jour de votre code CSS seront accelerées. Par ailleurs dans le cas d'un travail en groupe, imaginez qu'une première personne ait fait la partie HTML, à priori il n'y a plus à y toucher, cette même personne crée le code CSS avec des sélecteurs clairs et précis, il aura gagné en efficacité pour une éventuelle retouche du code, mais aussi et surtout son code CSS sera extrêmement facile à reprendre et à modifier par une tierse personne et cette dernière n'aura pas à se soucier du code HTML (ou pratiquement pas) puisque les éléments seront indiqués dans les sélecteurs, il saura que h1#titre est un titre de niveau 1 avec ses marges par défaut, sa graisse de police et sa taille de caractère alors qu'avec #titre il aurait été obligé d'aller voir la source HTML s'assurer que #titre n'est pas une division contenant un titre de niveau par exemple.

Vous pouvez aussi choisir une organisation générale de la feuille de style, un choix invariant pour vous (et votre équipe de codeurs CSS si vous travaillez à plusieurs), ce choix est totalement arbitraire, mais faites en un et respectez le, vous gagnerez du temps par la suite au moment de modifier une partie de votre code.
Vous pouvez par exemple choisir de mettre en forme les éléments dans l'ordre parent/enfant du code HTML, vous commencez par mettre en forme les éléments de plus haute parenté (<body>, enfant direct de <body> etc) puis les derniers éléments enfants. Toujours dans le même soucis d'organisation vous pouvez ajouter des commentaires dans votre code pour les différentes parties, un commentaire assez voyant histoire qu'il serve à quelque chose comme par exemple quelque chose de ce style :

/*-----------------------------------+
+ Votre commentaire                  +
+-----------------------------------*/

Ceci n'est qu'un exemple, vous pouvez faire comme bon vous semble, mais assurez vous de toujours utiliser le même ordre pour que cette organisation serve à quelque chose et si vous travaillez à plusieurs, choisissez une organisation commune. Certaines personnes indentent leur code pour séparer les zone par exemple, je n'aime pas cette méthode personnelement parcequ'elle étend le code sur la droite et ce n'est pas très pratique, mais c'est un choix personnel.
Dans le même ordre d'idée, au niveau des déclarations de style en elles mêmes, fixez vous un ordre, commencez par exemple par la mise en forme au niveau dimension, positionement, puis le choix des couleurs, images de fond, puis la mise en forme du texte etc. En utilisant cet ordre pour chacune des déclarations vous gagnerez encore en efficacité.

Récapitulatif

En choisissant une organisation précise et rigoureuse dans l'écriture de votre code CSS vous pourrez :

  • gagner en efficacité et en précision au niveau de vos sélecteurs (limitation du nombre de class et d'id et du balisage HTML inutile) ;
  • être plus rapide lors de la reprise de votre code ou du code de quelqu'un d'autre qui aurait utilisé les mêmes principes généraux ;
  • vous éviter quelques erreurs bêtes, en effet être un peu plus rigoureux au niveau de la syntaxe vous évite des petites erreurs ;
  • avoir la satisfaction d'un code bien écrit !

Lien complémentaire : Traduction de Pompage.net, CSS efficaces
L'idée expliquée dans cet article, c'est l'utilisation des propriétés raccourcies et groupées pour, encore une fois, avoir un code plus clair mais aussi gagner de la place.

Dernier point rapide, n'hésitez pas à utiliser les sélecteur avancé du type monelement[unattribut] comme par exemple pour les champs input[type=text] qui permet de s'occuper uniquement des champs de type texte, celà évite l'utilisation d'une class supplémentaire. Notez bien que ceci ne fonctionne pas sur Internet Explorer, à vous de voir où sont vos priorités ;).

Nota Bene : Le point virgule final des déclarations de style n'est pas obligatoire, il ne devrait en fait pas être indiqué !

Par Olivier PATRY - dimanche 10 juillet 2005 à 16:25

Standards et Accessibilité - #174 - Lu 11267 fois - Intérêt du billet: 3.16(25) - Fil RSS

Trackbacks

Le samedi 23 juillet 2005 à 14:43, de Tutoriels :: #

Conseils préalables

L'application d'une syntaxe claire est un point très simple à mettre en œuvre et qui permet une relecture, en vue de modifications, facilitée. Ce genre de rigueur peu contraignante vous fera gagner du temps...

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le lundi 11 juillet 2005 à 18:43, par Yazerty :: site :: #

Je vais bientôt clarifier ma feuille de style et ton billet va m'aider dans cette tache qui s'annonce fastidieuse (mais nécessaire). Merci !

Le lundi 11 juillet 2005 à 18:50, par Lisaraël :: site :: #

Merci pour cet article très bien fait.

Juste un truc, il me semble me souvenir que le point virgule en fin de déclaration est en passe de devenir obligatoire, et, tant qu'à faire, ne vaut-il pas mieux, à un débutant, lui dire de la mettre partout ?

Ca n'alourdi pas le code, ça permet de ne pas faire d'erreur de distraction si on rajoute des propriétés à la suite de propriétés existantes, et surtout, ça aide à bien structurer ses écrits...

Je peux me tromper, hein, mais je parle d'expérience, car lors de mon examen de Noël sur les css, où les trois quarts des étudiants de ma classe étaient de "grands débutants", une des question était celle-ci:

"Que manque-t-il dans la déclaration css suivante ?"

.blue_souligne {
color: 00f;
text-decoration: underline;
margin: 0
}

proposition de réponse:
- rajouter une nom de balise avant le .
- rajouter un # devant l'hexadécimal de couleur
- rajouter un ; après la dernière déclaration

La réponse est bien entendu la deuxième, et même si le prof pensait comme toi, Olivier, le prof de théorie avait bien précisé, par soucis de cohérence, que le point-virgule était obligatoire en fin de déclaration, y compris la dernière (comme expliqué plus haut).
Du coup, à Noël, la plupart des étudiants est tombé dans le panneau, tantle manque de ; leur semblait flagrant et erroné.

Voilà, beaucoup de bruit pour une toute petite phrase en fin d'un post vraiment bien, mais je trouve que pour une personne débutante, "pédagogiquement", autant lui signifier de mettre le ; tout le temps, tout en lui disant qu'il n'est pas forcément obligatoire pour une dernière propriété.

Le lundi 11 juillet 2005 à 19:00, par Olivier :: site :: #

Oui tu as raison Lisaraël, mais vu qu'en principe il ne faut pas le mettre, je ne le met pas, je n'ai rien lu sur le fait que c'était en passe de devenir obligatoire, tu as quelque chose à ce sujet ?

C'est vrai que pour les débutants, c'est mieux de le mettre pour les raisons que tu évoques, je prodigue d'ailleurs la même chose en général :)

Le lundi 11 juillet 2005 à 19:12, par Shemu :: site :: #

Personellement, je range aussi les propriétés et je crée une feuille externe séparée pour les styles généraux des formulaires.

Exemple :
.classe {
/* Dimensions & positionnement*/
width:100px;
height:200px;
position:absolute;
top:10px
left:20px;
z-index:2;
[...]

/* Marges */
margin:1px 2px 3px 4px;
padding:5px 6px 7px 8px;
[...]

/* Polices & Textes */
font:bold 10pt/1.2 Arial;
font-style:oblique;
text-align:right;
text-indent:20px;
[...]

/* Décoration */
border:1px solid #00F;
background:url(image.png) 0 0 no-repeat;
[...]
}

Ca n'a l'air de rien mais s'imposer une organisation précise aide énormement à la reprise du code par un autre. Et cela se vérifie dans tout les languages !

Le lundi 11 juillet 2005 à 21:01, par excargot :: site :: #

Perosnnellement, j'ai toujours structuré mes feuilles de styles de la manière suivante :
- en premier, les styles des balises de type a, p, h1, h3...j'en passe des vertes et des pas mures
- suivi des styles qui font ma structure
- puis les formatage spécifique de texte, d'image et de formulaire...

le tout en utilisant la technique des flags...
joshuaink.com/blog/287/cs...

Le lundi 11 juillet 2005 à 22:08, par Laurent Denis :: #

J'apporterais juste une remarque à cet excellent article, pour insister sur un point implicite : le choix d'écrire div.maClasse et non .maClasse n'est pas sans conséquence sur le poid du sélecteur CSS (accru d'un point par l'ajout d'un nom d'élément).

Ce n'est en rien problématique, dès lors :
- qu'on procède systématiquement ainsi (tous les sélecteurs sont accrus d'un point),
- ou qu'on s'en souvient si, un beau jour, le sélecteur div.maClasse1 l'emporte de façon inopinée sur le sélecteur .maClasse2 ;)

Bref, comme Raphaël y invite, rationnalisez vos CSS :)

Le lundi 11 juillet 2005 à 22:29, par Laurent Denis :: #

Ci-dessus, lire "Olivier", pas Raphaël. L'habitude...

Le lundi 11 juillet 2005 à 22:32, par Olivier :: site :: #

@ Laurent, oui c'est ce que je voulais souligner avant tout dans cet article, au delà de la structuration rigoureuse d'une feuille de style, il y a le poid des sélecteurs comme l'expliquent les 2 articles cités au début de l'article.

@ tous, au delà de l'aspect organisation des feuilles de style, c'est avant sur ce point que je voulais insister, balise#id est plus fort que #id et permet de fournir une information supplémentaire pour ne rien gacher de même pour les class :)

Un autre point (je suis pas certain qu'il ait été bien perçu) c'est la limitation de l'utilisation des classes, id et autres balisages superflux, les sélecteurs CSS sont très précis lorsqu'ils sont bien utilisés, de même utiliser un seul nom de class peut suffir pour distinguer bien des éléments en étant plus précis sur le sélecteur.

Le lundi 11 juillet 2005 à 22:57, par Pascal :: site :: #

J'aurai appris ce soir qu'on peut avantageusement remplacer #contenu par div#contenu, ou #titre par h1#titre. Bon à savoir. Et ça donne vraiment envie, 100 fois sur le métier...

Le mardi 12 juillet 2005 à 00:07, par panjhy :: #

salut, oui c'est tres interessant tout ca, merci pour toutes ces infos, c'est plutot clair.

Le mardi 12 juillet 2005 à 01:00, par neolao :: site :: #

moi je voudrais revenir sur le point "Le pire reste les déclarations de style sur une seule ligne"

en "autorisant" l'exception d'une seule propriété
moi je dirai même 3 propriétés

au début, je ne mettais jamais sur une ligne, je trouvais ca pas lisible
mais il m'est arrivé de tomber sur des longues feuilles CSS où on ne voit même pas les commentaires parce que la section est très étendu "en vertical"

en faisant 3 ou 4 fois ca:
div#conteneur
{
width: 33%;
margin: 5px;
border: 1px dotted #555
}

ca prend déjà pas mal de place
heureusement que mon éditeur a un résumé de la page

mais écrire
div#conteneur { width: 33%; margin: 5px; border: 1px dotted #555; }

je ne trouve pas que c'est illisible en fin de compte
et on voit assez rapidement les blocs du premier coup d'oeil

on fait parfois des "arrangements" en programmations pour que ce soit plus lisible, je pense que ca s'applique aussi ici, le plus important, c'est de bien commenter

vous en pensez quoi ?

Le mardi 12 juillet 2005 à 11:00, par Olivier :: site :: #

@ neolao > oui bien sûr, tant que ça reste lisible, moi même je n'hésite pas à mettre quelques propriétés sur une seule ligne, mais pas quand ça commence à en faire beaucoup, la lisibilité en prend un sacré coup dans la tronche sinon.

Encore une fois, chacun fais à sa sauce ;)

Le mardi 12 juillet 2005 à 11:47, par Ced :: site :: #

@Olivier :
>"Le pire reste les déclarations de style sur une seule ligne un vrai calvaire pour s'y retrouver"

Je m'y retrouve beaucoup plus facilement en mettant toute les propriétés d'un selecteur sur une seule ligne, sinon avec une propriété par ligne, on se retrouve vite avec des feuilles de style qui font des pages et des pages, on est toujours obligé de scroller pour trouver les sélecteurs.
Et si on utilise les propriétés raccourcies, on n'a pas de ligne très longue.

C'est mon avis perso à moi hein ;-)

Le mardi 12 juillet 2005 à 11:49, par Kurt :: #

Chouette chouette chouette ^_^
Je suis justement en ce moment sur un gros projet et je comptais clarifier ma feuille de style d'ici peu. Cet article tombe au bon moment :)

Le mardi 12 juillet 2005 à 13:04, par solo :: site :: #

Suite à un article sur un blog anglophone(lequel?...) j'avais testé l'indantation comme en programmation. On a ainsi une meilleure visualisation du conteneur et du contenu.

... ça apporte pas mal niveau clarté.

Le mardi 12 juillet 2005 à 15:35, par Vero :: #

Il est vrai que c'est un peu la prise de tête cette organisation de feuille de style ...

Pour ma part, j'ai fini par m'habituer aux raccourcis (question d'habitude) et j'ai opté pour le classement indiqué dans ce billet, en regroupant tous les styles affectés à une division.

Certains font plusieurs feuilles : je n'aime pas.

Mais là où j'hésite encore, c'est pour le choix des couleurs qui peuvent affecter plusieurs divisions. Car lorsqu'on travaille sur cet aspect, c'est pénible d'avoir à passer toute la feuille...

Le mardi 12 juillet 2005 à 20:07, par neolao :: site :: #

j'ai vu quelques sources où ils faisaient 2 feuilles:
- layout.css, pour positionner les grosses divisions
- design.css, pour le reste

j'ai vu la même séparation mais dans une seule feuille

par contre, si on fait ca, ca veut dire qu'on peut toucher à la même division à plusieurs endroits différents
ca doit etre pour ca que certains font plusieurs feuilles

Le mercredi 13 juillet 2005 à 09:16, par Thomas Mathey :: site :: #

Merci pour ce topo enrichissant, mais qu'en est-il des : div#contenu ? Il parrait (de source pas si sure) que l'on peut et doit les remplacer par #contenu dans notre exemple...
Vous en pensez-quoi ?

Le mercredi 13 juillet 2005 à 11:32, par Olivier :: site :: #

@ Thomas, justement NON ! pour toutes les raisons que j'évoque plus haut.

* 1 point de plus dans la cascade
* facilité de compréhension du code

Le mercredi 13 juillet 2005 à 21:06, par Laurent Denis :: #

Un détail, pour réconcilier partisans et adversaires des feuilles de styles avec une propriété à la ligne ou tout pleins : un simple passage du fichier au validateur CSS Ddu W3C vous donne une feuille avec une propriété à la ligne, parfaitement lisible pour ceux qui n'aiment pas la version compactée ;)

Sinon, Thomas : "on peut" ? "on DOIT" ?
On peut signfie que l'on choisit à sa convenance, ce que propose ici Olivier. Mais le seul "on doit" pertinent et crédible, c'est celui de la norme, c'est à dire la spécification, qui, sagement, n'en a rien à faire ;)

Le jeudi 14 juillet 2005 à 00:11, par Etienne :: #

Personnellement j'utilise une solution encore plus simple, mais malheuresement réservée à une toute petite population, j'utilise le soft CSSEdit (www.macrabbit.com/cssedit...) qui est le meilleur soft pour les CSS qui puisse exister. Il permet d'ogarniser ses feuilles de styles avec une simplicité impressionante, je vous laisse le découvrir sur l'adresse fournie.

Le mardi 19 juillet 2005 à 13:38, par Ced :: site :: #

Fred Cavazza parle aussi de ce sujet sur son blog www.fredcavazza.net/index...

Le mardi 19 juillet 2005 à 13:52, par Raphael :: site :: #

Ced > oui tiens, les nouvelles se propagent vite :)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.