关于如何提高CSS重用性的思路

    如何提高CSS的重用性呢？

      1、定义一些公有的全局样式，如html, body, hn等等。

      例如有如下两段CSS：

CODE1：

h1 {margin:0;color:#630;}
h2 {margin:0;color:#ff0;}
h3 { margin:0;color:#050;}
h4 {margin:0;color:#aaa;}
h5 {margin:0;color:#bbb;}
h6 { margin:0;color:#ccc;}

CODE2：

h1,h2,h3,h4,h5,h6 {margin:0;}
h1 {color:#630;}
h2 {color:#ff0;}
h3 {color:#050;}
h4 {color:#aaa;}
h5 {color:#bbb;}
h6 {color:#ccc;}

      显然以上两种写法，第二种会比第一种更简洁，单{margin:0;}这句就节省了5次之多，由此可见，CSS的写法也是需要优化的。

      2、在非特定情况下，“尽量”让每个样式可以随时随地使用。

      也举一简单例子看看：

CODE1：

#dyt_1 {width:200px;border:1px solid #ddd;background-color:#eee;}
#dyt_1 .scolor {color:#f00;}
.scolor_2 {color:#f00;}

CODE2：

#dyt_1 {width:200px;border:1px solid #ddd;background-color:#eee;}
.scolor {color:#f00;}

      明显的如果我写一段XHTML：

<div id="dyt_1">传说中的<span class="scolor">测试</span></div>

      那么其中的“测试”两个字将会被.scolor的样式渲染成红色。这时如果我要在该div外的某个地方再使用到如同.scolor的样式，本来最简单的就是直接用.scolor就好了，但我们这样写的话会有怎样的结果呢：

<div id="dyt_1">传说中的<span class="scolor">测试</span></div>
<div>传说中的<span class="scolor">测试</span></div>

      很显然，后面的这个div中的.scolor并未起作用，原因是在CODE1中定义了.scolor只是作为#dyt_1下的一个样式，意思就是说只有#dyt_1里才能使用.scolor样式。于是为了要得要相同的效果，只能又重新写一个样式.scolor_2。

<div>传说中的<span class="scolor_2">测试</span></div>

      对比CODE1中的CSS，我们再来看CODE2里面的CSS，如果要达到和前面一样的效果，只需要直接使用.scolor就行，而不需要再重新去写一个效果是一模一样的新样式。

      这样不仅提高了.scolor的重用性，而且也减少了代码冗余。

      3、把经常使用到的效果独立成为一个样式。

      可以拿上篇文章改改作为例子：

CODE1：

.tit {width:115px;white-space:nowrap;overflow:hidden;}
.list {width:200px;padding:0;margin:0;list-style:none;white-space:nowrap;overflow:hidden;}

<h3 class="tit">传说中的测试传说中的测试</h3>
<ul class="list">
 <li>传说中的单行字符溢出处理测试</li>
 <li>传说中的单行字符溢出处理测试</li>
</ul>

CODE2：

.tof {white-space:nowrap;overflow:hidden;}
.tit {width:115px;}
.list {width:200px;padding:0;margin:0;list-style:none;}

<h3 class="tit tof">传说中的测试传说中的测试</h3>
<ul class="list tof">
 <li>传说中的单行字符溢出处理测试</li>
 <li>传说中的单行字符溢出处理测试</li>
</ul>

      对比以上2段代码，会发现，第二段代码中将{white-space:nowrap;overflow:hidden;}独立成为了一个.tof样式，而第一段则是在每个样式中都重复这句。

      可以假想一下，如果有无数多个地方都需要用到.tof这个效果，如果不将该效果独立成一个样式，则需要重复建设{white-space:nowrap;overflow:hidden;}这句无数多次。

      在一个工程未结束时，我们可能连自己都不知道最终会有多少地方需要使用该效果，所以未雨绸缪是一个非常好的习惯。

      貌似这点和第一点差不多!- -不过还是有些许不同的