Nom des classes concrètes par rapport à la hiérarchie des classes

Question

Quelle est la meilleure pratique pour ces exemples?

1)

<style type="text/css"> 
.block .title {color:red} 
.anotherBlock .title {color:blue} 
</style> 
... 
<div class="block"> 
    <h3 class="title">SomeTitle</h3> 
</div> 
<div class="anotherBlock"> 
    <h3 class="title">anotherTitle</h3> 
</div> 
... 

2)

<style type="text/css"> 
.blockTitle {color:red} 
.anotherBlockTitle {color:blue} 
</style> 
... 
<div class="block"> 
    <h3 class="blockTitle">SomeTitle</h3> 
</div> 
<div class="anotherBlock"> 
    <h3 class="anotherBlockTitle">anotherTitle</h3> 
</div> 
... 

Le premier code semble plus propre, mais il peut laisser quelqu'un penser que les balises h3 auront les mêmes propriétés de style.

Answer 1

<style type="text/css"> 
.block h3 {color:red} 
.anotherBlock h3 {color:blue} 
</style> 
... 
<div class="block"> 
    <h3>SomeTitle</h3> 
</div> 
<div class="anotherBlock"> 
    <h3>anotherTitle</h3> 
</div> 

Pourquoi? Utilisez moins de code pour écrire = moins de temps pour écrire dans le navigateur de l'utilisateur

Answer 2

Utilisez uniquement des classes lorsque vous devez vous séparer du style par défaut des balises html (comme l'exemple d'Eugene). Utilisez l'héritage autant que possible car plus les sélecteurs sont spécifiques, moins vous aurez d'erreurs.