Concrete class names vs classes hierarchy

What is the best-practice for those examples?

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</h开发者_开发问答3>
</div>
<div class="anotherBlock">
   <h3 class="anotherBlockTitle">anotherTitle</h3> 
</div> 
...

The first code looks cleaner but it can let someone think that h3 tags will have the same style properties.

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

Why ? because it is as readable as your examples but takes less code to write = less time to render in user's browser

Only use classes when you need to separate from the default style of the html tags themselves (like Eugene's example). Use inheritance whenever possible because the more specific the selectors are, the less likelihood you will have errors.