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

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