CSS div style - devrais-je utiliser class ou id?

Question

J'ai un répéteur de div de qui ressemble un peu à ceci:

<div class="header_div"> 
    <!-- Content --> 
</div> 

Je veux avoir la couleur de fond du changement divs basé sur une propriété dynamique du contenu du div (LETS appeler la category), mais je veux toujours que le style "header_div" soit utilisé dans les cas où je n'ai pas de classe css pour cette catégorie. Quelle est la meilleure façon de le faire? La meilleure façon que je peux penser est de rendre la catégorie comme "id" de la div et appliquer des styles basés sur l'ID, mais cela me semble vraiment désordonné - les normes dictent que l'ID doit identifier de façon unique l'élément sur la page et il y aura certainement des reprises de chaque catégorie.

Answer 1

La réponse simple serait d'utiliser plusieurs classes pour la <div> afin que

<div class="header_div header_red"> 
    <!-- Content --> 
</div> 

<div class="header_div header_green"> 
    <!-- Content --> 
</div> 

Answer 2

Sans en savoir plus sur votre contenu, ne pouvez-vous pas utiliser l'une des balises d'en-tête (<h1> etc.)?

Vous avez raison, les ID doivent être uniques et si vous souhaitez utiliser le même style plus d'une fois, utilisez une classe.

Answer 3

S'il doit être utilisé plusieurs fois sur la page, il doit s'agir d'une classe.

Si c'est unique sur la page, utilisez un identifiant.

Answer 4

Vous ne pouvez pas avoir d'ID en double, donc si vous aviez plusieurs divs de la même catégorie, vous auriez un problème. Les classes doivent être utilisées lorsque le style doit être appliqué pour 1 ou plusieurs éléments sur une seule page. Pourquoi ne pas affecter la classe sur la liaison de données de la div basée sur la catégorie? Lorsque votre répéteur est lié, trouvez votre div pour l'article que vous liez et attribuez-le.

Vous pouvez également substituer la div à un asp: Panel et utiliser sa méthode onDataBinding. Cela devrait ressembler exactement à votre div.

Answer 5

Vous avez raison sur la nécessité d'ID d'être unique. Rien ne vous empêche de spécifier plus d'un attribut de valeur par classe - il suffit de les séparer par un espace.

<div class="header_div category"> 
    <!-- Content --> 
</div> 

juste être prudent de vérifier ce qui se passe lorsque les deux classes spécifient des valeurs différentes pour le même style - Je ne peux pas dire si la première ou la deuxième primerait.

Answer 6

Vous pouvez fournir plusieurs styles pour la classe div:

<div class="header_div mystyle"> 
    <!-- Content --> 
</div> 

Je crois que les styles déclarés plus tard dans la déclaration remplacer les précédentes. Tant que vous assurez que vos styles personnalisés "ombrent" ceux des header-div, vous pouvez toujours inclure l'élément header-div, et cela n'aura d'effet que si un style secondaire est absent (ou vide).