Plusieur class par balise (xhtml) ou parametré plusieur class (css)

bonjours,
ma question est plus pour savoir en matière de performences et fiabilité que pour resoudre un problème compliqué,

je veut savoir es-que c'est mieux de :

1- faire plusieur class css chaque class definie des parametre pour définir une partie du style de plusieur balise xhtml pour d'attribué a chaque balise les class qui définie tous ces propriété voulu de sorte quel peut avoir 2,3 ou même plusieurs class en même temps

OU BIEN

2- faire définir pour chaque balise une class ou un identifiant (dans la partie html) et dans la partie css je détermine les parametre commune a plusieur class pour les determiner une seul fois pour déminué au maximum la repetition (car j'ai lu quelque par que moins il y aura du css plus la page sera légère sur le navigateur)

C'est bien évidant que je pourrez utiliser les deux technique, mais si j'avait le chois de favorisé l'une ou l'autre je favoriserait quel technique e pour quoi ?

merci

Bonjour,

Difficile de dire dans l'absolu quel principe appliquer. Tu as un exemple de code?

Pour ma part je connais deux pratiques «raisonnables» que je vais décrire ainsi:

1. Définir des styles par module

Le principe est de découper l'interface à intégrer en modules, de donner un id au DIV qui contient ce module, et plutôt des noms de classe (ou rien du tout) pour le contenu de ce module. Par exemple:

<div id="latest-news">
  <h2>Latest News</h2>
  <div class="item">
    <h3>Some News Item</h3>
    <p>Teaser text.</p>
  </div>
  <div class="item">
    <h3>Some News Item</h3>
    <p>Teaser text.</p>
  </div>
</div><!--#latest-news-->

Ensuite en CSS tu définis tous tes styles ainsi:

#latest-news {}
#latest-news h2 {}
#latest-news .item {}
#latest-news .item h3 {}
#latest-news .item p {}

Avantage de cette approche: très peu d'informations de mise en page dans le HTML, utilisation d'identitifants et classes minimale (à la rigueur on pourrait faire encore moins, par exemple la classe "item" n'est pas indispensable).
Inconvénient: si le bloc "Latest News" et le bloc "Editor Picks" partagent le même style graphique, faut-il créer un bloc <div id="editor-picks">...</div> avec la même structure et... dupliquer les styles CSS? Faut-il alors plutôt utiliser une classe avec un nom plus neutre, mettons "news-item-list"? Et aussi: si un autre bloc a une mise en forme proche mais assez différente, avec mettons 60% de styles en commun, est-ce qu'on duplique ces 60% de styles communs, ou est-ce qu'on essaie de les partager?

On voit que cette approche, qui est plutôt simple et saine pour de petits sites, commence à poser problème dès qu'on a beaucoup de contenus et donc beaucoup de modules plus ou moins proches (structure et style graphique) les uns des autres.

2. Atomiser les styles

On va utiliser un certain nombre de classes CSS pour définir: le style d'une boite (type de bordure et de couleur de fond, mettons qu'on en a trois ou quatre différents dans le site, donc ça fait trois ou quatre classes), les styles des titres, les principaux styles de paragraphes, etc. Ensuite, on va placer des classes (parfois des classes multiples) sur notre structure HTML, et on peut obtenir un code comme ceci:

<div id="latest-news" class="block block-style2">
  <h2 class="title title-style3">Latest News</h2>
  <div class="item item-style1">
    <h3 class="title title-style5">Some News Item</h3>
    <p class="para para-style5">Teaser text.</p>
  </div>
  <div class="item item-style2">
    <h3 class="title title-style5">Some News Item</h3>
    <p class="para para-style5">Teaser text.</p>
  </div>
</div><!--#latest-news-->

(Les noms de styles peuvent être un peu plus précis et pas numérotés, mais c'est pas toujours évident sans tomber dans les "texte gras en vert 14px"...)

Les styles CSS deviennent alors assez peu explicites, et on devra sans doute maintenir une documentation sous une forme ou une autre, par exemple une ou plusieurs pages qui recensent tous les styles disponibles.

Cette méthode de travail peut convenir à des sites de grande taille, avec un code CSS de base créé par des webdesigners et intégrateurs, et des templates HTML créés par des développeurs back office ou intégrateurs qui se contentent d'appliquer: «je dois avoir tel style graphique standard, je pioche dans notre bibliothèque de style pour trouver la classe correspondante, et je n'ai pas besoin d'écrire la moindre ligne de CSS».

Pour quelque chose qui se rapproche de cette méthode, on peut regarder du côté du projet/framework OOCSS créé par Nicole Sullivan.
Modifié par Florent V. (05 Nov 2010 - 17:07)