2010-10-12 3 views
19

J'ai appliqué un identifiant à l'étiquette de corps de mes documents HTML récemment to allow greater CSS control (#9). Récemment, il m'est apparu que je pouvais faire exactement la même chose en appliquant une classe à l'étiquette du corps. Je veux savoir les points positifs et négatifs de chaque choix. Si j'ai plusieurs pages où la balise body a le même identifiant, est-il préférable d'utiliser une classe? Qu'est-ce que tu penses? Pourquoi? MISE À JOUR: La classe/ID est essentiellement ce que j'ai l'intention d'utiliser pour identifier la feuille de style à quelle page ou quel type de page la feuille de style est appliquée. Par exemple, est-ce la page d'accueil, la page de contact, l'une des nombreuses pages de résultats de recherche, une page d'archives, etc.?Classe ou ID sur l'étiquette de corps

Répondre

18

L'utilisation d'une classe est parfaitement acceptable, peut-être plus que l'utilisation d'un identifiant. L'utilisation des identifiants devrait être limitée autant que possible, car ils peuvent entrer en conflit avec d'autres identifiants et casser des choses comme document.getElementById.

Un sélecteur d'identifiant est plus spécifique qu'un sélecteur de classe, ce qui en fait un meilleur choix pour votre cas d'utilisation. - David Dorward

Cependant, un haut "caractère spécifique" n'est pas toujours souhaitable. Considérez body#faq #col_b a {color:gray;} dans la feuille de style master, puis quelqu'un développe un plugin avec un fond gris qui va sur la page faq, maintenant ils doivent utiliser !important ou créer un autre attribut id pour donner plus de spécificité.

En outre, envisager l'utilisation de plusieurs classes dans un seul élément du corps:

<body class="faq two_column big_footer"> ... 
+0

Votre exemple de quelqu'un développer un plug-in où les styles peuvent tomber en panne est très susceptible de se produire dans cette situation. Pour moi, il semble que si quelqu'un a écrit le corps de la règle # faq #col_b a {color: grey;}, vous avez raison qu'un ID/classe devrait éventuellement être appliqué pour obtenir une spécificité plus élevée. Cependant, si vous aviez body.faq #col_b a {color: grey;} Il me semble qu'un ID/classe devrait également être appliqué pour obtenir une plus grande spécificité. Pouvez-vous expliquer plus quelle est la différence entre ces deux situations? –

+0

Il n'y a pas beaucoup de différence, vraiment ... Personnellement, je ne ferais pas un ID de col_b (pour une colonne de droite dans une mise en page, par exemple), j'utiliserais une classe. Entre 'body # faq .col_b a' et' body.faq .col_b a', le second devrait être beaucoup plus facile à remplacer par quelqu'un d'autre. En général, je pense que si vous créez des CSS sur lesquels d'autres peuvent s'appuyer, une haute spécificité (si c'est ce que l'on appelle) est une mauvaise chose quand une spécificité plus faible peut atteindre la même chose. –

+0

Bon raisonnement. Si d'autres s'appuient sur votre CSS, utilisez toujours la plus faible spécificité nécessaire pour atteindre les résultats souhaités. –

2

ID doit être unique par page (si vous voulez un balisage valide), ce qui signifie qu'une seule instance d'un ID particulier devrait exister sur une page.

Les classes, d'autre part, peuvent être appliquées à de nombreux éléments par page. Utilisez des classes pour les éléments qui réutilisent les mêmes styles et utilisent des ID pour des éléments uniques nécessitant leur propre style.

Idéalement, utilisez des classes autant que possible et limitez l'utilisation des identifiants. Pour plus d'informations sur l'ID, voir here, et plus sur les classes, voir here.

+0

Merci. J'ai déjà lu sur w3schools. Je pourrais utiliser la classe ou l'identité dans ma situation et ce serait acceptable. Cependant, j'essaie de faire un brainstorming tous les positifs/négatifs possibles d'employer un sur l'autre. –

+0

Dans ce cas, il n'y a vraiment aucun impact significatif tant que ce que vous utilisez pour est sémantiquement correct. –

+1

S'il vous plaît ne pas lier à W3Schools - [ils sont souvent inexacts et non affiliés avec le W3C] (http://w3fools.com/). – iono

1

Il est préférable d'utiliser une classe si vous envisagez de réutiliser un style dans des pages. Les ID sont bons si la feuille de style est conçue pour une page spécifique. Mais dépend toujours de votre application.

0

Vous pouvez (lire: devrait) utiliser uniquement l'ID sur l'étiquette du corps.

ID = usage unique par page

classe = multiple utilise

1 tag = 1 Body id tag. Cela peut être la même chose sur des pages différentes. Essentiellement, l'utilisation de la balise de classe est probablement excessive dans ce but.

4

Un sélecteur d'identifiant est plus specific qu'un sélecteur de classe, ce qui en fait généralement un meilleur choix pour votre cas d'utilisation.

0

En HTML5, l'attribut id peut être utilisé sur n'importe quel élément HTML (il sera validé sur n'importe quel élément HTML, mais ce n'est pas forcément utile).

Dans HTML 4.01, l'attribut id ne peut pas être utilisé avec: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Note: HTML 4.01 a plus de restrictions sur le contenu des valeurs id (par exemple, en valeurs id HTML 4.01 ne peuvent pas commencer par un chiffre).

Source: W3School

Questions connexes