过度渲染CSS。覆盖或调用所有属性是否更好

这样做是否更好：

.message_bookmark {
  display: block; 
  height: 40px; 
  width: 40px; 
  position: relative; 
  left: 540px; 
  top: -168px;
  opacity: 0.5;
}

.message_delete {   
  display: block; 
  height: 40px; 
  width: 40px;  
  position: relative; 
  left: 600px; 
  top: -128px;
  opacity: 0.5;
}

或者这个：

.message_bookmark, .message_delete {
  display: block; 
  height: 40px; 
  width: 40px; 
  position: relative; 
  left: 540px; 
  top: -168px;
  opacity: 0.5;
}

.message_delete {   
  left: 600px; 
  top: -128px;
} 

---

就可读性而言，第二种方法更合适，而且使用的代码也更少，所以哪种方法实际上最好？

我认为第二种方法更好。代码越少，正如您所说，可读性越强。功能相同，因此重复内容没有什么意义。

我认为第二个更好。代码越少，正如您所说，可读性越强。功能上是一样的，所以重复这些东西并没有什么意义。

我会使用CSS子类策略，类似于你们在Twitter引导中看到的

CSS

HTML使用

---

我将使用CSS子类策略，类似于您在Twitter引导中看到的

CSS

HTML使用

---

虽然我自己更喜欢这样，但我总是告诉别人：不要像Bootstrap那样做，因为Bootstrap包含了很多乱七八糟的东西；保持它的干净和简单，它不会出错。此外，这还可以减少代码行数。@Daniel我喜欢这种风格，并从SMACSS手册中学习到：它似乎可以使事情变得简单，并帮助您处理一次性场景。尽管我自己更喜欢这种风格，但我总是告诉其他人：只是不要像Bootstrap那样做，因为它包含很多混乱的东西；保持它的干净和简单，它不会出错。此外，这还可以减少代码行数。@Daniel我喜欢这种风格，并从SMACSS手册中学习到：它似乎可以使事情变得简单，并帮助您处理一次性场景。

/*Base Class*/
.message{
  display: block; 
  height: 40px; 
  width: 40px; 
  position: relative;
  opacity: 0.5; 
}

/*Subclass*/
.message_bookmark{ 
  left: 540px; 
  top: -168px;
}

/*Subclass*/
.message_delete {   
  left: 600px; 
  top: -128px;
} 

<div class="message message_bookmark">BookMark</div>
<div class="message message_delete">BookMark</div>