日期:2014-05-17  浏览次数:20714 次

关于CSS效率的问题
二话不说先上代码

.bar {
  width: 960px;
  line-height: 30px;
  background: blue;
  color: white;
  font-weight: bold;
}
.navi {
  width: 960px;
  padding: 5px;
  background: green;
  color: white;
  font-weight: bold;
}
.style1 {color: white; width: 500px;}
.style2 {font-weight: bold; line-height:30px;}


<div class="bar">Here is some text</div>
<div class="style1">这个DIV的class中的XXX无关紧要</div>
<div class="style2">这个DIV的class中的XXX无关紧要</div>
<div class="navi">Here is some text</div>

再看一段代码:

.text_white {color:white;} .text_bold {font-weight: bold;} .width_960 {width: 960px;}
.bar {
  line-height: 30px;
  background: blue;
}
.navi {
  padding: 5px;
  background: green;
}
.style1 {width: 500px;}
.style2 {line-height:30px;}


<div class="bar text_white text_bold width_960">Here is some text</div>
<div class="style1 text_white">这个DIV的class中的XXX无关紧要</div>
<div class="style2 text_bold">这个DIV的class中的XXX无关紧要</div>
<div class="navi text_white text_bold width_960">Here is some text</div>

这两段代码中,第一种是我经常用的方法,但是最近看一个朋友写的代码(也就是第二种代码),就把一些公共属性提取出来了。而对于这种方法我很疑惑,因为如果把一些属性都提出来当做一个样式去管理,那么如果公共样式多的话,一个DIV就可能继承七八个CLASS,这样好么?效率会不会有所下降?会不会违背了CSS的初衷?因为我觉得如果继承的CLASS多了就和在HTML里面用STYLES属性来控制元素样式无异了。。。
CSS HTML

------解决方案--------------------
你朋友做的很对 这样才是css的本意