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标签的默认样式本身分开时才使用类（如Eugene的例子）。尽可能使用继承，因为选择器越具体，出错的可能性就越小。

具体类名称与类层次结构

2 个答案: