[Résolu] CSS: id et class

Message par **Ymai** » 12 févr. 2006, 23:38

Bonjour
En CSS, un "id" sert à définir un élément unique sur une page.
Une "class" permet de définir un élément qui intervient éventuellement à plusieurs reprises.
Jusque là, tout va bien.
La question que je me pose est la suivante: quel avantage y a-t-il à disposer de ces "id"?
Si je définis une "class" que je n'utilise qu'une seule fois, j'obtiens le même effet.
Y aurait-il une raison triviale qui m'échapperait?
Merci pour toute information.
Ymai

Message par **pascal** » 13 févr. 2006, 00:39

1 document.getElementById
2 les ID ont plus de poids que les classes dans le calcul de la spécificité, elles ne sont donc pas strictement équivalentes

Message par **Ymai** » 13 févr. 2006, 00:43

Merci pour la réponse.
Mais document.getElementById concerne Javascript. Pas directement CSS.
Par contre, je retiens l'argument de la spécificité. M'en vais relire Meyer, à ce sujet.

Message par **pascal** » 13 févr. 2006, 01:36

Toutes les fonctions javascript permettant de manipuler les css sont par définition liées aux css ! Si un jour tu dois manipuler par script une section de ta page, ce sera plus facile si cette section a une ID plutôt qu'une classe.

Message par **Ymai** » 13 févr. 2006, 07:55

pascal a écrit :Toutes les fonctions javascript permettant de manipuler les css sont par définition liées aux css !

Jusque là, je peux suivre. Mais les leviers qui permettent la manipulation en Javascript ne sont pas forcément utiles en CSS. L'un n'a pas été conçu pour l'autre. Et réciproquement. Ou je me trompe?

Si un jour tu dois manipuler par script une section de ta page, ce sera plus facile si cette section a une ID plutôt qu'une classe.

Toutafé! Mais nous sommes à nouveau en JS.

Il reste donc l'argument de la spécificité qui est 100% CSS.

calimo · Message par **calimo** » 13 févr. 2006, 10:29

Ymai a écrit :En CSS, un "id" sert à définir un élément unique sur une page.

Non, id c'est du HTML

Cette nuance n'est pas si innocente que ça. Regarde dans la spécification HTML :

id = nom [CS]
Cet attribut assigne un nom à un élément. Ce nom doit être unique dans le document.

Avec ID, tu fais plus que juste permettre d'appliquer des propriétés CSS sur l'élément. Pascal t'a donné l'exemple de Javascript. Si un jour tu en as besoin, ça sera utile. Il faut toujours voir à long terme

Il y a d'autres avantages, en particulier la possibilité de l'utiliser comme ancre, le fait qu'il soit unique à travers tout le document tu donne un nom à une partie du document, tu lui donnes un sens, un rôle. Même si aujourd'hui tu ne les utilise pas, pense à l'avenir.

Avec un classe, tu donnes moins de sens à ton élément. Même si, avec un bon nom de classe, tu en donnes quand-même.

Bref, pour définir un conteneur qui sera de toutes façons unique dans la page, comme un menu, un bloc de pied de page ou de contenu (par exemple), je ne peux que te conseiller d'utiliser l'attribut HTML id plutôt que classe, ce dernier étant à réserver à des petits extras ponctuels

PS : je n'utilise pratiquement aucune classe dans mes CSS ça ne sert presque à rien

Mirovinben · Message par **Mirovinben** » 09 mars 2006, 12:48

Bonjour,
Je rebondis sur ce qui a été dit précédemment en vous posant une question ...

Préalable :
Je suis en train de retravailler mes pages perso. Je souhaite construire mes pages Html de façon à pouvoir intervenir beaucoup plus complètement sur le look en modifiant la CSS sans rien toucher au Html, une fois la structure mise en place.

Exemple :
J'affiche en page d'accueil plusieurs menus qui ont la même apparence pour l'instant (donc plutôt "class"). Comme je souhaite me donner la possibilité de les différencier ultérieurement via CSS sans toucher aux pages Html, il me faut les individualiser (donc "id").

Ce que j'ai commencé à faire :
pour certain bloc <div>, j'utilise une combinaison des 2 (class + id). comme ici <div class="menu" id="sites"> ou <div class="menu" id="apparences">. Cela me permet actuellement de les afficher à l'identique via "class". Je pourrais ultérieurement individualiser leur présentation en modifiant les CSS au niveau de l'Id en surchargeant toute ou partie des paramètres. Cela peut paraître étrange mais cela passe le valideur (4.01 strict) sans incident.

Ma question
Si cela semble ok au niveau validation (la Lettre)... est-ce conforme à l'esprit de la norme ?

Merci d'avance

Message par **Benoit** » 09 mars 2006, 13:08

Ça me parait être un très bon exemple de l'utilité des classes et des id

Une classe c'est un type de chose (dans ton exemple un menu), et un id permet d'identifier une chose particulière (un menu, oui, mais le menu "site").

À noter que les classes les plus universellement utilisées ont été recensées par un programme de recherche chez Google, ce qui pemettra d'en transformer certaines en balises "pures" dans le cadre de HTML5. Dans ton cas cela pourrait être l'élément nav ou menu selon les cas.

calimo · Message par **calimo** » 09 mars 2006, 14:11

À noter que tu peux englober tous ces menus dans un conteneur englobant, lui-même ayant un id.

Code : Tout sélectionner

<div id="touslesmenus">
	<div id="sites">
		
	</div>
	<div id="apparences">
		
	</div>
</div>

Ensuite, tu pourra appliquer toutes les propriétés de ".menu" sur "#touslesmenus > div"

Attention à ne pas sombrer dans la divite chronique non plus

Si chacun des menu est une seule et unique liste (type :

Code : Tout sélectionner

<div class="menu">
	<ul>
		<li>plusieurs éléments</li>
	</ul>
</div>[code]) n'oublie pas que tu peux simplifier la chose en ne laissant que la liste et en virant le div par exemple :wink: (je dis ça mais je n'ai pas vu le code donc j'en sais rien !)

Invité · Message par **Invité** » 09 mars 2006, 19:32

calimo a écrit :(...)n'oublie pas que tu peux simplifier la chose en ne laissant que la liste et en virant le div par exemple (je dis ça mais je n'ai pas vu le code donc j'en sais rien !)

Je souhaite me donner la possibilité de mettre autour d'un menu (dans l'exemple cité... mais ça vaut pour tous mes blocs...) un cadre qui ne soit pas une simple bordure (cf "border") donc avec des background-image.

Donc un truc du genre...

Code : Tout sélectionner

        
   <div class="bloctexte" id="zzzz">
      <div class="topbloc"><!-- haut du bloc --></div>
      <div class="midbloc">
        <div class="texte">
          <h3>titre blabla</h3>
          <p>blablabla</p>
        </div>
      </div>
      <div class="basbloc"><!-- bas du bloc --></div>
    </div>

Je sais que ça "div" à donf mais je ne sais pas comment faire autrement.

Toutefois les réponses de calimo et de Benoit me laissent à penser que je suis sur la bonne piste.

Bientôt du code en ligne... en lieu et place des pages existantes de mon site perso.

Mirovinben · Message par **Mirovinben** » 09 mars 2006, 19:35

heu... l'invité, c'est moi...

Message par **pascal** » 09 mars 2006, 19:37

si ça ne te dérange pas que la bordure jolie n'apparaisse pas sur IE, tu peux t'inspirer de nos boites arrondies sur mozilla europe crées avec une combinaison de backgrand-images et de "generated content" (:before, :after). le gros avantage est que tu n'as pas à modifier le html. L'inconvénient étant que IE ne sait pas le gérer et donc affiche des boites carrées.

Geckozone

[Résolu] CSS: id et class

[Résolu] CSS: id et class

Re: [Résolu] CSS: id et class

Qui est en ligne ?