Class multiples VS id

Résolu
Ysabe_l Messages postés 12666 Date d'inscription   Statut Contributeur Dernière intervention   -  
Ysabe_l Messages postés 12666 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

Voilà je me pose la question de savoir si il est plus "propre" de mettre des class multiples ou des id pour définir mes règles CSS.

Imaginons un site sur lequel il y aura beaucoup de div de plusieurs tailles, plusieurs couleurs et plusieurs couleurs de polices.
Admettons que j'ai des largeurs de 100, 200 et 250px, que j'ai du fond bleu, vert, rouge et jaune et des polices noires, blanches et oranges.
Que la couleur de la police, du fond et la largeur ne soient pas liés.
(oui j'imagine que ça serait moche lol c'est pour l'exemple).

Solution 1 : mettre pour chaque div un ID et répéter plusieurs fois en CSS les couleurs de fond, de police et la largeur.

Ce qui donnerait en html

<div id="madiv1"></div>
<div id="madiv2"></div>
<div id="madiv3"></div>
<div id="madiv4"></div>
<div id="madiv5"></div>


et en CSS

#madiv1 {
width : 100px;
background-color : green;
color : black;
}

#madiv2 {
width : 200px;
background-color : blue;
color : black;
}

#madiv3 {
width : 100px;
background-color : red;
color : white;
}

#madiv4 {
width : 250px;
background-color : red;
color : orange;
}

#madiv5 {
width : 200px;
background-color : yellow;
color : white;
}


Solution 2 : créer en CSS une class pour chaque largeur, couleur de fond et couleur de police et mettre plusieurs class à chaque div.

Ce qui donnerait en html

<div class="w100 bggreen cblack"></div>
<div class="w200 bgblue cblack"></div>
<div class="w100 bgred cwhite"></div>
<div class="w250 bgred corange"></div>
<div class="w200 bgyellow cwhite"></div>


et en CSS

.w100 {
width : 100px
}
.w200 {
width : 200px
}
.w250 {
width : 250px;
}

.bggreen  {
background-color : green;
}
.bgblue   {
background-color : blue;
}
.bgred {
background-color : red;
}
.bgyellow {
background-color : yellow;
}

.cblack {
color: black;
}
.cwhite{
color: white;
}
.corange{
color: orange;
}


Et donc mes questions :
- Sur un exemple comme là avec peu de div quelle est la meilleure solution ?
- Sur un exemple avec peu de css comme là mais beaucoup de div quelle est la meilleure solution ?

Merci d'avance de votre réponse.

3 réponses

animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut

je dirais la 1ere solution plus facile en cas de changements ultérieurs dans le design du site
0
Ysabe_l Messages postés 12666 Date d'inscription   Statut Contributeur Dernière intervention   277
 
Bonjour,

Merci de cette réponse !

J'avoue que j'aurai aimé plus d'avis, au moins par des + sur la réponse donnée si elle est satisfaisante. Non que je mette cette réponse en doute (si j'avais ma propre réponse je n'aurai pas posé la question ^^) mais lisant un peu partout un coup une préférence, un coup une autre, j'aurai aimé une discussion là dessus.

En tout cas l'argument du changement de design me semble très pertinent !
0
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
Salut Ysabe_l,

En fait les id et les class sont prévu pour des utilisations différentes.
Premier point, un id doit etre unique sur une page alors qu'une class n'a pas de limite d'utilisation

les deux s'utilise en interaction. Imaginons que tu ais 3 <p> différent en couleur mais pas en design, tu feras :

 #monelement p {width:100px;height:50px;padding:15px 5px; margin:10px 20px; ...}
.p1 {color:red}
.p2 {color:green}
.p3 {color:gray}

pour en html

<div id="monelement">
<p class="p1">moncontenu</p>
<p class="p2">moncontenu</p>
<p class="p3">moncontenu</p>
</div>
ce qui sera plus propre et plus rapide que

 #p1 {width:100px;height:50px;padding:15px 5px; margin:10px 20px;color:red ...}
#p2 {width:100px;height:50px;padding:15px 5px; margin:10px 20px;color:green ...}
#p3 {width:100px;height:50px;padding:15px 5px; margin:10px 20px;color:gray ...}

pour en html

<p id="p1">moncontenu</p>
<p id="p2">moncontenu</p>
<p id="p3">moncontenu</p>

De plus les id sont utilisé pour pas mal d'intéraction avec du javascript, les points "ancre", ... pour leur valeur unique. Mais je ne vais pas tous détaillé car sinon ce post va ressembler à un cours d'OCR (ancien site du zero)
0
Ysabe_l Messages postés 12666 Date d'inscription   Statut Contributeur Dernière intervention   277
 
Bonjour,

Oui oui je sais à quoi servent les ID et les class.

Mais j'ai lu récemment que les ID ne devraient être utilisés QUE pour les ancres des liens et pas du tout pour le CSS ni le JavaScript, que là on devait utiliser les class et les sélecteurs, et du coup en relisant mes codes je me vois adepte des ID et je me demande si j'ai raison ou si je devrais revoir ma manière de faire.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
" j'ai lu récemment que les ID ne devraient être utilisés QUE pour les ancres des liens et pas du tout pour le CSS ni le JavaScript"
c'est entièrement faux, les id sont utilisés en javascript ex getElementByID aussi bien qu'en css
bien sur une ID doit être unique dans une page
pour ce qui est du html / CSS il faut toujours réflechir à avoir la capacité de modifier ultérieurement le désign en codant, sans avoir a modifier le html mais uniquement le css
0
Ysabe_l Messages postés 12666 Date d'inscription   Statut Contributeur Dernière intervention   277
 
En fait avant de lire cette personne j'ai eu en cours de JavaScript un prof qui ne nous donnait jamais d'ID dans les devoirs, pour nous obliger à réfléchir comment cibler l'élément qu'on voulait d'une autre manière, du coup en lisant cet article je m'étais dit que la raison était peut-être qu'en effet c'était mieux de procéder comme ça. Bon le prof je me doute que c'était pour nous obliger à utiliser différentes manières pour ne pas être coincés si un jour on ne pouvait pas modifier le html et qu'il n'y avait pas d'id.

Ok donc ma méthode de mettre des id "partout" serait donc la bonne, je ne vais donc pas m'embêter et continuer de cette manière.

Merci beaucoup.
0