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

原创 2007年09月29日 09:49:00

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

      为什么要提高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;}这句无数多次。

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

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

       未完待续...

 

CSS垂直翻转/水平翻转提高web页面资源重用性

一、CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下: /*水平翻转*...

在android需要大量使用xml进行网络传输时,如何用面向对象的思路降低xml的耦合性并增加重用性

根据一个需求来就行分析。由于
  • jys1115
  • jys1115
  • 2014年10月10日 21:17
  • 523

SUI Mobile中解决分页js和css的一种思路

范例下载:SUI Mobile执行路由页面的JS和CSS范例 初次接触MSUI,对其ajax刷新页面的效果很满意。但是在团队开发中,却发现在使用路由时,却发现框架并不引入路由页面的css,更不执行页面...

CSS实现水平垂直同时居中的5种思路

水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路   思路一: text-align + line-height实现单行文本水平垂直居中 style> ...
  • whChina
  • whChina
  • 2016年04月28日 14:32
  • 1070

用css3画3d动画的思路

最近试了下css3动画,现在通过一个例子简单讲一讲我用css3画3d视图的思路。     任何时候敲代码前都要想清楚我要干什么,我要敲一个简单的3d旋转画册。 一、     1.首先用一个总容器包...

纯CSS实现table切换;lable+radio组合,仅供参考思路

纯css-label+radio组成tab切换 .main{     position: relative;     width: 1200px;     height: 80...

css知多少(2)——学习css的思路

两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程。现在初有成效,就开更吧。...

css知多少(2)——学习css的思路

两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程。现在初有成效,就开更吧。 1. 一个段子   开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的...
  • zwjweb
  • zwjweb
  • 2017年12月06日 22:35
  • 27

CSS(2)-学习css的思路

1. 一个段子   开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。        记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于如何提高CSS重用性的思路
举报原因:
原因补充:

(最多只允许输入30个字)