Utiliser les noms de balises HTML, les classes et les Id en CSS?

Cela dépend de l'intention de la sémantique, et, comme d'autres ont dit, être aussi précis que possible.

• #idName unique pour les éléments sur la page. De bons exemples sont #header et #footer
• TAGNAME pour usage général page style.
• TAG.classname et .classname pour les exceptions/remplace les règles ci-dessus.

Et n'oubliez pas l'utilisation de sélecteurs avancés. Un mauvais exemple:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    .in_the_menu { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1 class="in_the_menu">My Menu</h1>
</div>

La même chose pourrait être réalisé avec:

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    #mainMenu H1 { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1>My Menu</h1>
</div>

Le deuxième exemple se débarrasser du superflu attribut "class" sur l'élément H1 dans le "mainMenu" div. Cela a deux avantages importants:

1. Le code HTML est petit et plus propre
2. Vous êtes moins susceptibles d'oublier d'ajouter l'attribut de classe

Si vous prenez bien soin de vous CSS, et de faire usage de bon sélecteurs avancés, vous pouvez presque totalement quitter classes CSS. Et de les garder uniquement pour les exceptions et des dérogations.

Prendre cet exemple, qui attire des boîtes avec des en-têtes:

#content H2{
   border: 1px solid #008789;
   padding: 0em 1em;
   margin: 0.2em 0em;
   margin-bottom: 1em;
   font-size: 100%;
   background: #cccb79
}

#content H2 + DIV{
   margin-top: -1em;
   border-left: 1px solid #008789;
   border-right: 1px solid #008789;
   border-bottom: 1px solid #008789;
   margin-bottom: 1em;
}

Maintenant, dès que vous suivez un H2 avec un DIV dans le #content élément, vous avez une belle boîte. d'autres DIVs et H2s sont laissés seuls:

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

Si vous obtenez ces règles de droit, vous avez à peine jamais besoin de classes, et peut travailler avec les Identifiants et les noms de BALISE seul. Et comme un bonus supplémentaire, votre code HTML sera beaucoup plus agréable à lire et à maintenir.

Vous la préférence devrait être, dans l'ordre, du plus élevé au plus bas:

1. id

2. tag
3. tag.className
4. .className

Sélecteurs d'ID sont rapides. Sélecteurs de balise sont relativement rapides. Pure sélecteurs de classe sont lents parce que le navigateur a essentiellement pour interroger chaque élément et de voir si chacun a la classe. Obtenir des éléments en fonction de leur ID ou le nom de la balise sont des "natifs" des opérations à partir d'un navigateur contexte.

Aussi, je trouve ça bien pratique pour faire de votre sélecteurs CSS aussi restrictive que possible, sinon il transforme tout en désordre et vous obtenez toutes sortes de conséquences imprévues, où les règles CSS s'appliquent lorsque vous n'avez pas s'attendre à autre, ce qui oblige souvent de vous créer un similaire mais différent sélecteur seulement si aucune des règles concernant le premier ne s'appliquent pas (la traduction dans plus de dégâts).

Fondamentalement, si vous le savez si vous utilisez uniquement une classe sur les éléments div, puis faire ce

div.className

pas

.className

Si vous appliquer une classe à plusieurs éléments de la liste juste eux:

h1.selected, h2.selected, h3.selected

au lieu de

.selected

Dans la pratique, je trouve très peu de situations où vous avez besoin d'utiliser le "nu" sélecteurs de classe ou lorsqu'il est souhaitable de le faire.

De vos deux premiers sélectionneurs, le premier des deux va remplacer le deuxième, car il est plus spécifique. Vous pouvez calculer la spécificité d'un sélecteur.

Je sais que c'est une jolie vieille question, mais pour tous ceux qui sont la lecture de ce tout à l'heure...
Il y a 4 catégories de règles en général:
ID de Règles, les Règles de Classe, de marquer des Règles, des Règles Universelles.
Et il est important de mentionner que classe sélecteurs sont plus rapides que tag sélecteurs. Donc, vous devriez toujours utiliser dans l'ordre suivant

1. Sélecteur d'ID

2. Sélecteur De Classe

3. Sélecteur De Balise

4. Universel Sélecteurs

Dans votre cas, vous ne devez jamais utiliser le nom de la balise avant le nom de la classe.

Vous pouvez trouver plus d'informations ici: Écriture efficace en CSS

Il est de bonne pratique d'utiliser le moins de règles spécifiques pour chaque règle.

La façon dont vous structurez votre CSS dépendra des besoins particuliers de la conception.

Quand utiliser quoi dépend ce que vous voulez sélectionner. img.className (sélecteur de type de + sélecteur de classe) sélectionne seulement les éléments IMG, c'est dans la classe “className”, tandis que .className (juste sélecteur de classe) sélectionne tout élément qui est dans la classe et #idName (sélecteur d'id) tout élément avec l'ID “idName”.

Mais à côté de ça, le sélecteur de tous ont une differente la spécificité qui détermine l'ordre dans lequel les propriétés de règles de réécriture des autres.

Donc si vous avez une IMG élément avec l'ID “idName” c'est dans la classe “className”:

<img src="…" id="idName" class="className">

Les propriétés de l'application des règles appliquées dans l'ordre suivant (de la spécificité de la plus haute à la plus basse):

1. #idName
2. img.className
3. .className

Mais lorsque vous utilisez une classe spécifique pour un seul type d'éléments (par exemple “className” uniquement pour élément IMG), vous pouvez aller avec seulement .className.