html - 具体类名与类层次结构

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> 

为什么？因为它与您的示例一样可读，但编写的代码更少 = 在用户浏览器中呈现的时间更少