覆盖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

我会说第二个更好。更少的代码，就像你说的那样，更具可读性。在功能上相同，所以重复的东西没什么意义。