覆盖CSS.重写或调用所有属性更好吗

Question

这样做更好吗：

.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;
} 

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

Answer 1

我会使用类似于您在Twitter Bootstrap中看到的CSS子类策略。

CSS

/*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;
} 

HTML使用

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

Answer 2

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