关闭

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

标签: css测试classdivxhtmllist
608人阅读 评论(0) 收藏 举报
分类:

      * 本文只提供一个思路,具体如何操作还需要大家自己去发现和体会。

      为什么要提高CSS的重用性呢?

      因为具有高重用性的CSS不仅可以减少冗余和节省工程时间,而且能加快页面展现速度,所以提高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;}这句无数多次。

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

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

       未完待续...

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47786次
    • 积分:990
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接