Конкретные имена классов против иерархии классов

Question

Какова лучшая практика для этих примеров?

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> 
...

Первый код выглядит чище, но кто-то может подумать, что теги h3 будут иметь те же свойства стиля.

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> 

Почему? потому что он так же читабелен, как и ваши примеры, но требует меньше кода для написания = меньше времени для отображения в браузере пользователя

Answer 2

Используйте классы только тогда, когда вам нужно отделиться от стиля по умолчанию самих тегов html (как пример Евгения).По возможности используйте наследование, потому что чем конкретнее селекторы, тем меньше вероятность возникновения ошибок.