div class vs id

Question

Quand utiliser divs, quand utiliser de préférence une classe ou un id?

Est-il préférable d'utiliser class, une variante de police ou des éléments dans le code HTML? Puis utilisez id pour la structure / les conteneurs?

C’est quelque chose sur lequel j’ai toujours été un peu incertain, toute aide serait formidable.

Answer 1

Utilisez id pour identifier les éléments pour lesquels il n'y aura qu'une seule instance sur une page. Par exemple, si vous ne placez qu'une seule barre de navigation à un emplacement spécifique, utilisez id="navigation".

Utilisez class pour regrouper des éléments qui se comportent tous d’une certaine manière. Par exemple, si vous souhaitez que le nom de votre société apparaisse en gras dans le corps du texte, vous pouvez utiliser <span class='company'>.

Answer 2

La chose la plus importante à comprendre est que les identifiants doivent être uniques: un seul élément avec un identifiant donné doit exister dans une page. Ainsi, si vous souhaitez faire référence à un élément de page spécifique, c'est souvent la meilleure chose à utiliser.

Si plusieurs éléments sont similaires, vous devez utiliser la classe elements pour les identifier.

Un fait très utile et étonnamment peu connu est que vous pouvez appliquer plusieurs classes à un seul élément en insérant des espaces entre les noms de classes. Ainsi, si vous avez posté une question qui a été écrite par l'utilisateur actuellement connecté, vous pouvez l'identifier par & Lt; div class = & "Question currentAuthor &"; & Gt; .

Answer 3

Pensez à l'université.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Les

cartes d'étudiant ID sont distinctes. Deux étudiants sur le campus n'auront la même carte d'étudiant ID . Cependant, de nombreux étudiants peuvent partager et partageront au moins un cours .

Il est correct de placer plusieurs étudiants sous un seul cours , Biologie 101. Mais il n'est jamais acceptable de placer plusieurs étudiants sous un seul ID . .

Lorsque vous donnez des règles sur le système d'interphone de l'école, vous pouvez attribuer des règles à une classe :

.

  

& "La classe de biologie voudrait-elle porter des chemises rouges demain? &";

.BiologyClass {
  shirt-color:red;
}

Vous pouvez également donner des règles à un étudiant spécifique en appelant son ID unique:

.

  

& "Jonathan Sampson voudrait-il porter une chemise verte demain? &";

#JonathanSampson {
  shirt-color:green;
}

Answer 4

Les identifiants doivent être uniques, mais en CSS, ils sont également prioritaires pour déterminer laquelle des deux instructions en conflit doit être suivie.

<div id="section" class="section">Text</div>

#section {font-color:#fff}
.section {font-color:#000}

Le texte serait en blanc.

Answer 5

Les classes

sont excellentes lorsque vous souhaitez appliquer des styles similaires à de nombreux éléments ou divs. Les identifiants sont utiles lorsque vous souhaitez adresser un élément spécifique à la mise en forme ou à la mise à jour avec javascript.

Answer 6

Un autre avantage de l'utilisation d'un identifiant est la possibilité de le cibler dans une balise d'ancrage:

<h2 id="CurrentSale">Product I'm selling</h2>

Vous permettra de créer un lien vers un autre endroit directement vers cet endroit de la page:

<a href="#CurrentSale">the Current Sale</a>

Une utilisation courante de ceci serait de donner à chaque titre sur un blog un identifiant de date (say id = & "; date20080408 &";)) qui vous permettrait de cibler spécifiquement cette section de la page du blog.

Il est également important de garder à l'esprit qu'il existe des règles de nommage plus restrictives pour les identifiants, notamment qu'ils ne peuvent pas commencer par un nombre. Voir une question SO similaire: Qu'est-ce qu'une valeur valide pour id attributs en HTML

Answer 7

Le standard HTML lui-même répond à votre question:

Deux objets ne peuvent pas avoir le même ID, mais une quantité arbitraire d'objets peut avoir la même classe.

Donc, si vous souhaitez appliquer certains attributs de style CSS à un seul DIV, ce sera un ID. Si vous souhaitez que certains attributs de style s’appliquent à plusieurs DIV, il doit s'agir d'une classe.

Notez que vous pouvez mélanger les deux. Vous pouvez faire appartenir deux DIV à la même classe, mais leur donner des identifiants différents. Vous pouvez ensuite appliquer à leur ID le style commun à la classe et les éléments spécifiques à l’un ou l’autre. Le navigateur appliquera d'abord le style de classe, puis le style d'ID, afin que les styles d'ID puissent remplacer ce que la classe a précédemment défini.

Answer 8

Quelques autres points à garder à l’esprit:

• Lorsque vous utilisez ASP.Net, vous n'avez pas le contrôle total sur l'ID des éléments. Vous devez donc pratiquement utiliser class (notez que cela est moins vrai qu'auparavant).

• Il vaut mieux utiliser ni , si vous pouvez y contribuer. Spécifiez plutôt le type d'élément et le type du parent . Par exemple, une liste non ordonnée contenue dans div avec la classe navarea pourrait être distinguée de cette façon:

  div.NavArea ul { /* styles go here */ }
  

Vous pouvez maintenant définir la division logique pour une grande partie de votre navigation avec une seule application de classe.

Answer 9

Les identifiants doivent être uniques. Les classes doivent être partagées. Donc, si vous avez un formatage CSS qui sera appliqué à plusieurs DIV, utilisez une classe. Si un seul (par obligation, pas par hasard), utilisez un ID.

Answer 10

Je pense que nous savons tous ce qu’est la classe, mais si vous considérez les identifiants comme des identificateurs plutôt que comme des outils de style, vous ne vous tromperez pas. Vous avez besoin d'un identifiant lorsque vous essayez de cibler quelque chose et si vous avez plusieurs éléments avec le même identifiant, vous ne pouvez plus l'identifier ...

Quand il s’agit d’écrire vos css pour les identifiants et les classes, il est avantageux d’utiliser le moins possible de classes de CSS et d’essayer de ne pas trop peser sur les identifiants jusqu’à ce que vous deviez, sinon vous aurez constamment pour objectif d’écrire. déclarations plus fortes et bientôt un fichier css plein de! important.

Answer 11

Où utiliser un identifiant par rapport à une classe

La différence simple entre les deux réside dans le fait qu’une classe peut être utilisée de manière répétée sur une page mais qu’un identifiant ne doit être utilisé qu’une fois par page. Par conséquent, il est approprié d'utiliser un ID sur l'élément div qui marque le contenu principal de la page, car il n'y aura qu'une seule section de contenu principale. En revanche, vous devez utiliser une classe pour définir des couleurs de lignes alternées sur un tableau, car elles seront par définition utilisées plus d'une fois.

Les identifiants sont un outil incroyablement puissant. Un élément avec un ID peut être la cible d'un élément JavaScript qui manipule l'élément ou son contenu d'une manière ou d'une autre. L'attribut ID peut être utilisé comme cible d'un lien interne, en remplaçant les balises d'ancrage par des attributs de nom. Enfin, si vous définissez clairement et logiquement vos identifiants, ils peuvent constituer une sorte de & # 8220; auto-documentation & # 8221; dans le document. Par exemple, vous n'avez pas nécessairement besoin d'ajouter un commentaire avant un bloc indiquant qu'un bloc de code contiendra le contenu principal si la balise d'ouverture du bloc a un ID de, disons & "Principal &". ;, & "; entête &"; & "; pied de page &"; etc.

Answer 12

S'il s'agit d'un style que vous souhaitez utiliser à plusieurs endroits sur une page, utilisez une classe. Si vous souhaitez personnaliser un seul objet, par exemple une barre de navigation sur le côté de la page, il est préférable d'utiliser un identifiant, car vous n'aurez probablement pas besoin de cette combinaison de styles ailleurs.

Answer 13

id est censé être l'identifiant unique de l'élément sur la page, ce qui facilite sa manipulation. Tout style défini en CSS externe qui est supposé être utilisé dans plusieurs éléments doit aller à l'attribut de classe

.

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Answer 14

Utilisez un identifiant pour un élément unique de la page sur lequel vous souhaitez effectuer une tâche très spécifique et une classe pour un élément que vous pouvez réutiliser sur d'autres parties de la page.

Answer 15

L'attribut id est utilisé par les éléments pour les identifier de manière unique dans le document, alors que l'attribut classe peut avoir la même valeur partagée par de nombreux éléments dans le même document.

Donc, vraiment, s'il n'y a qu'un seul élément par document qui utilisera le style (par exemple, #title), utilisez alors id . Si plusieurs éléments peuvent utiliser le style, utilisez classe .

Answer 16

Je dirais qu'il est préférable d'utiliser une classe chaque fois que vous pensez qu'un élément de style va être répété sur une page. Des éléments tels que HeaderImage, FooterBar, etc., constituent bien un identifiant, car vous ne l'utiliserez qu'une seule fois. Cela vous évitera de le dupliquer accidentellement, car certains éditeurs vous préviendront lorsque vous aurez des identifiants en double.

Je pense également que cela peut être utile si vous souhaitez générer les éléments div de manière dynamique et si vous souhaitez cibler un élément spécifique pour le formatage; vous pouvez simplement lui donner l'ID correct lors de la génération, par opposition à la recherche de l'élément, puis à la mise à jour de sa classe.

Answer 17

Mon choix consiste à utiliser l'identification de classe lorsque les styles CSS sont appliqués à plusieurs divs de la même manière. Si la structure ou le conteneur est réellement appliqué une seule fois ou s'il peut hériter de son style par défaut, je ne vois aucune raison d'utiliser l'identification de classe.

Cela dépend donc de savoir si votre div est une parmi plusieurs; par exemple, une div représentant une question à une réponse sur le site Web stackoverflow. Ici, vous voudriez définir le style pour & "Répondre &"; classe et l'applique à chaque " Répondre " div.

Answer 18

Si vous utilisez des contrôles Web .Net, il est parfois beaucoup plus facile d’utiliser des classes car .Net modifie les identifiants de contrôle Web au moment de l’exécution (où ils utilisent runat = & "serveur &" ;).

L’utilisation des classes vous permet de créer facilement des styles avec des classes distinctes pour les polices, l’espacement, les bordures, etc. J’utilise généralement plusieurs fichiers pour stocker différents types d’informations de mise en forme, par exemple. basic_styles.css pour la mise en forme simple à l'échelle du site, ie6_styles.css pour les styles spécifiques au navigateur (dans ce cas, IE6), etc. et template_1.css pour les informations de présentation.

Quelle que soit la méthode choisie, essayez d’être cohérente pour faciliter la maintenance.

Answer 19

De même, un élément auquel vous donnez un identifiant spécifique peut être manipulé via des commandes JavaScript et DOM - GetElementById, par exemple.

En général, je trouve utile de donner un identifiant à toutes les divisions structurelles principales - même si au départ je n’ai pas de règles CSS spécifiques à appliquer, j’ai cette possibilité pour l’avenir. D'autre part, j'utilise des classes pour les éléments pouvant être utilisés plusieurs fois - par exemple, une div contenant une image et une légende - je pourrais avoir plusieurs classes, chacune avec des valeurs de style légèrement différentes.

N'oubliez pas, toutes choses étant égales par ailleurs, les règles de style d'une spécification id ont priorité sur celles d'une spécification de classe.

Answer 20

En plus des identifiants et des classes qui sont parfaits pour définir le style d'un élément individuel par rapport à un ensemble d'éléments similaire, il convient également de se rappeler. Cela dépend aussi de la langue dans une certaine mesure. Dans ASP.Net, vous pouvez ajouter Div et avoir un identifiant. Mais si vous utilisez un panneau au lieu de la div, vous perdrez l'identifiant.

Answer 21

Les classes concernent les styles que vous pouvez utiliser plusieurs fois sur une page. Les ID sont des identifiants uniques qui définissent des cas particuliers pour les éléments. Les normes stipulent que les identifiants ne doivent être utilisés qu'une seule fois dans une page. Vous devez donc utiliser des classes lorsque vous souhaitez utiliser un style sur plusieurs éléments d'une page et un ID lorsque vous ne souhaitez l'utiliser qu'une seule fois.

Un autre problème est que, pour les classes, vous pouvez utiliser plusieurs valeurs (en mettant des espaces entre chaque classe, par exemple, & "; class = 'blagh blah22 blah"). .

Les styles définis pour les ID remplacent les styles définis pour les classes. Par conséquent, les paramètres de style de #uniquething remplacent le style de.

Vous devriez donc probablement utiliser des identifiants pour des éléments tels que l'en-tête, votre "barre latérale" ou autre chose, etc., des éléments n'apparaissant qu'une fois par page.

Answer 22

Pour moi: si j'utilise des classes pour faire quelque chose en CSS ou pour ajouter un nom aux éléments et pouvoir les utiliser dans tous les éléments d'une page.

Donc, les identifiants que j'utilise pour un élément unique

Ex:

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}