具体类名称与类层次结构

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> 

为什么？因为它与您的示例一样可读,但写入的代码较少=在用户的浏览器中渲染时间较短