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

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 (например, пример Евгения). Используйте наследование по возможности, потому что чем более конкретными являются селекторы, тем меньше вероятность того, что у вас будут ошибки.