classe div vs id
Lors de l'utilisation de divs, quand est-il préférable d'utiliser une classe vs id?
Est-il préférable d'utiliser une classe, par exemple une variante de police ou des éléments dans le html? Ensuite, utilisez id pour la structure/conteneurs?
C'est quelque chose sur lequel j'ai toujours été un peu incertain, toute aide serait formidable.
Utilisez id pour identifier les éléments dont il n'y aura qu'une seule instance sur une page. Par exemple, si vous disposez d'une seule barre de navigation que vous placez à un emplacement spécifique, utilisez id="navigation".
Utilisez class pour regrouper les éléments qui se comportent tous d'une certaine manière. Par exemple, si vous souhaitez que le nom de votre entreprise apparaisse en gras dans le corps du texte, vous pouvez utiliser <span class='company'>.
La chose la plus importante à comprendre est que les ID doivent être uniques: un seul élément avec un ID 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 vous avez plusieurs éléments qui sont en quelque sorte similaires, vous devez utiliser la classe elements pour les identifier.
Un fait très utile et étonnamment peu connu est que vous pouvez réellement appliquer plusieurs classes à un seul élément en plaçant des espaces entre les noms de classe. Ainsi, si vous avez publié une question écrite par l'utilisateur actuellement connecté, vous pouvez l'identifier avec <div class = "question currentAuthor">.
Pensez à l'université.
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />
Étudiant ID les cartes sont distinctes. Deux étudiants sur le campus n'auront pas le même étudiant ID card. Cependant, de nombreux étudiants peuvent et partageront au moins un Classe les uns avec les autres.
Il est normal de mettre plusieurs étudiants sous un seul Classe titre, Biologie 101. Mais il n'est jamais acceptable de mettre plusieurs étudiants sous un seul étudiant ID .
Lorsque vous donnez Rules sur le système d'interphone de l'école, vous pouvez donner Rules à un Class:
"Est-ce que le cours de biologie pourrait porter des chemises rouges demain?"
.BiologyClass {
shirt-color:red;
}
Ou vous pouvez donner des règles à un étudiant spécifique, en appelant son unique ID :
"Est-ce que Jonathan Sampson pourrait porter une chemise verte demain?"
#JonathanSampson {
shirt-color:green;
}
Les identifiants doivent être uniques, mais en CSS, ils ont également la priorité pour déterminer laquelle des deux instructions contradictoires suivre.
<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}
Le texte serait blanc.
Un avantage supplémentaire à l'utilisation d'un ID est la possibilité de le cibler dans une balise d'ancrage:
<h2 id="CurrentSale">Product I'm selling</h2>
Vous permettra à un autre endroit de créer un lien direct vers cet endroit de la page:
<a href="#CurrentSale">the Current Sale</a>
Une utilisation courante serait de donner à chaque titre d'un blog un ID horodaté (disons id = "date20080408") qui vous permettrait de cibler spécifiquement cette section de la page du blog.
Il est également important de se rappeler qu'il existe des règles de dénomination plus restreintes pour les identifiants, principalement qu'ils ne peuvent pas commencer par un nombre. Voir similaire SO question: Quelle est une valeur valide pour les attributs id en html
les classes sont parfaites lorsque vous souhaitez appliquer des styles similaires à de nombreux divs ou éléments différents. les identifiants sont bons lorsque vous souhaitez adresser un élément spécifique pour le formatage ou pour la mise à jour avec javascript.
Quelques autres choses à garder à l'esprit:
- Lorsque vous utilisez ASP.Net, vous n'avez pas un contrôle complet sur l'ID des éléments, vous devez donc à peu près utiliser la classe (notez que cela est moins vrai qu'auparavant).
Il est préférable d'utiliser ni l'un ni l'autre, quand vous pouvez l'aider. À la place, spécifiez type d'élément et c'est 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 styliser la division logique pour une grande partie de votre zone de navigation entière avec une seule application de classe.
Le standard HTML lui-même répond à votre question:
Deux objets ne peuvent pas avoir le même ID, mais un nombre arbitraire d'objets peut avoir la même classe.
Donc, si vous souhaitez appliquer certains attributs de style CSS à une seule DIV uniquement, ce serait un ID. Si vous souhaitez que certains attributs de style s'appliquent à plusieurs DIV, cela doit être une classe.
Notez que vous pouvez mélanger les deux. Vous pouvez faire en sorte que deux DIV appartiennent à la même classe, mais leur donner des ID différents. Vous pouvez ensuite appliquer le style commun à la fois à la classe et les éléments spécifiques à l'une ou l'autre à leur ID. Le navigateur appliquera d'abord le style de classe, puis le style d'ID, afin que les styles d'ID puissent remplacer tout ce qu'une classe a défini auparavant.
Les identifiants doivent être uniques. Les CLASSES doivent être partagées. Donc, si vous avez une mise en forme CSS qui sera appliquée à plusieurs DIV, utilisez une classe. Si un seul (comme une exigence, pas comme un hasard), utilisez un ID.
Je pense que nous savons tous ce qu'est la classe, mais si vous considérez les identifiants comme des identifiants 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 plus d'un élément avec le même identifiant, vous ne pouvez plus l'identifier ...
En ce qui concerne l'écriture de vos CSS pour les ID et les classes, il est avantageux d'utiliser autant que possible des classes CSS minimales et essayez de ne pas trop vous occuper des ID jusqu'à ce que vous y soyez, sinon vous viserez constamment à écrire des déclarations plus solides et bientôt un fichier css plein de! important.
Où utiliser un ID par rapport à une classe
La différence simple entre les deux est que même si une classe peut être utilisée à plusieurs reprises sur une page, un ID ne doit être utilisé qu'une seule fois par page. Par conséquent, il convient 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 principal. En revanche, vous devez utiliser une classe pour configurer des couleurs de ligne alternées sur une table, 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 morceau de 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, remplaçant les balises d'ancrage par des attributs de nom. Enfin, si vous rendez vos identifiants clairs et logiques, ils peuvent servir comme une sorte de "self documentation" 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", "en-tête", "pied de page ", etc.
Si vous utilisez des contrôles Web .Net, il est parfois beaucoup plus facile d'utiliser des classes car .Net modifie les identifiants des contols Web lors de l'exécution (où ils utilisent runat = "server").
L'utilisation de 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 des types distincts d'informations de mise en forme, par exemple basic_styles.css pour un formatage 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 mise en page.
Quelle que soit la façon dont vous choisissez, essayez d'être cohérent pour faciliter la maintenance.
De plus, un élément auquel vous donnez un identifiant spécifique peut être manipulé via les commandes JavaScript et DOM - GetElementById, par exemple.
En général, je trouve utile de donner un identifiant à toutes les principales divisions structurelles - même si au départ, je n'ai pas de règles CSS spécifiques à appliquer, j'ai cette capacité là pour l'avenir. D'un autre côté, j'utilise des classes pour les éléments qui pourraient être utilisés plusieurs fois - par exemple, un div contenant une image et une légende - je pourrais avoir plusieurs classes, chacune avec des valeurs de style légèrement différentes.
Souvenez-vous cependant que, toutes choses étant égales par ailleurs, les règles de style dans une spécification id ont priorité sur celles d'une spécification de classe.
En plus des identifiants et des classes étant parfaits pour définir le style sur un élément individuel par rapport à un ensemble similaire d'éléments, il y a aussi une autre mise en garde à retenir. Cela dépend également de la langue dans une certaine mesure. Dans ASP.Net, vous pouvez ajouter des Div et avoir des identifiants. Mais, si vous utilisez un panneau au lieu de la div, vous perdrez l'identifiant.
Si c'est un style que vous souhaitez utiliser à plusieurs endroits sur une page, utilisez une classe. Si vous voulez beaucoup de personnalisation pour un seul objet, disons une barre de navigation sur le côté de la page, alors un identifiant est le meilleur, car vous n'aurez probablement pas besoin de cette combinaison de styles ailleurs.
id est censé être l'identifiant unique de l'élément sur la page, ce qui aide à le manipuler. Tout style défini en CSS externe qui est censé être utilisé dans plusieurs éléments doit aller sur l'attribut class
<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
Utilisez un identifiant pour un élément unique sur la page avec lequel vous voulez faire quelque chose de très spécifique, et une classe pour quelque chose que vous pourriez réutiliser sur d'autres parties de la page.
L'attribut id est utilisé pour que les éléments les identifient de manière unique dans le document, tandis que l'attribut class 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 va utiliser le style (par exemple, #title), alors allez avec id. Si plusieurs éléments peuvent utiliser le style, choisissez classe.
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 comme HeaderImage, FooterBar et autres vont bien comme identifiant puisque vous ne les utiliserez qu'une seule fois et cela vous évitera de les dupliquer accidentellement, car certains éditeurs vous avertiront lorsque vous avez des identifiants en double.
Je peux également le voir utile si vous allez générer les éléments div de manière dynamique et que vous souhaitez cibler un élément spécifique pour le formatage; vous pouvez simplement lui donner l'ID approprié lors de la génération au lieu de rechercher l'élément puis de mettre à jour sa classe.
Pour moi: Si j'utilise des classes quand je vais faire quelque chose en CSS ou ajouter un nom aux éléments et que je peux utiliser dans tous les éléments d'une page.
Donc, les ID 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;}
Les classes sont pour les styles que vous pouvez utiliser plusieurs fois sur une page, les ID sont des identifiants uniques qui définissent des cas spéciaux 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.
Une autre chose est que pour les classes, vous pouvez utiliser plusieurs valeurs (en mettant des espaces entre chaque classe, à la "class = 'blagh blah22 blah') alors qu'avec les ID, vous ne pouvez utiliser que des ID par élément.
Les styles définis pour les ID remplacent les styles définis pour les classes, donc dans, les paramètres de style de #uniquething remplaceront le style de.
Vous devriez donc probablement utiliser des identifiants pour des choses comme l'en-tête, votre "barre latérale" ou autre chose, etc. - des choses qui n'apparaissent qu'une fois par page.
Ma saveur de choix est d'utiliser l'identification de classe lorsque les styles CSS sont appliqués à plusieurs divisions de la même manière. Si la structure ou le conteneur n'est vraiment appliqué qu'une seule fois, ou peut hériter son style de la valeur par défaut, je ne vois aucune raison d'utiliser l'identification de classe.
Cela dépendrait donc de si votre div est l'un des nombreux; par exemple, un div représentant une question à une réponse sur le site Web stackoverflow. Ici, vous souhaitez définir le style de la classe "Réponse" et l'appliquer à chaque div "Réponse".