Class multiples VS id
Résolu
Ysabe_l
Messages postés
12714
Date d'inscription
Statut
Contributeur
Dernière intervention
-
Ysabe_l Messages postés 12714 Date d'inscription Statut Contributeur Dernière intervention -
Ysabe_l Messages postés 12714 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
et en CSS
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
et en CSS
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.
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.
A voir également:
- Class multiples VS id
- Udp vs tcp - Guide
- Id telephone - Guide
- Nvcontainer windows class - Forum Carte graphique
- Ddr3 vs ddr3l ✓ - Forum Matériel & Système
- Gate first id ✓ - Forum Navigateur
3 réponses
Salut
je dirais la 1ere solution plus facile en cas de changements ultérieurs dans le design du site
je dirais la 1ere solution plus facile en cas de changements ultérieurs dans le design du site
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 !
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 !
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 :
pour en html
pour en html
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)
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">ce qui sera plus propre et plus rapide que
<p class="p1">moncontenu</p>
<p class="p2">moncontenu</p>
<p class="p3">moncontenu</p>
</div>
#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)
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.
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.
" 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
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
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.
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.