快速业务通道

Meta CSS框架发布

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26

Meta CSS是一个很简单的CSS框架。
在深入介绍之前,我们来考虑几个web开发者非常容易遇到的问题:
同样的一个款式的按钮,有些页面它要在左边,但是有些页面要在右边
同样作用的一段提示文字,有些地方字体要大号,有些却要小号
同样风格的一段文字,有些要红色,有些却要绿色
这样的状况是相当频繁的。对此,通常有4种解决方法:
1.每种不同款式,定义一个css。按钮A一个css,按钮B虽然长得跟A一样,但是在右边,那就copy下A的css代码,然后改成在右边。
a{/* 很多样式定义 */}
.b{/* 很多样式定义 */ text-align:center;}
.c{/* 很多样式定义 */ text-align:right;}
<div class="a">按钮A</div>
<div class="b">按钮B</div>
<div class="c">按钮C</div>

2.针对不同地方,利用css层级覆盖来实现。比如按钮A设定css,然后对于特别的页面,设定特别的css来覆盖
.a{/* 很多样式定义 */}
#s1 .a{text-align:center;}
#s2 .a{text-align:right;}
<div class="a">按钮A</div>
<div id="s1"><div class="a">按钮B</div></div>
<div id="s2"><div class="a">按钮C</div></div>
3.利用css组合来实现。如上面的代码片段,设定css基础类,然后进行组合。对于按钮A,它的class为x,在右边的按钮B,它的class为x tar,对于B来说,它的样式就是x与tar组合起来的。
a{/* 很多样式定义 */}
.tac{text-align:center;}
.tar{text-align:right;}
<div class="a">按钮A</div>
<div class="a tac">按钮B</div>
<div class="a tar">按钮C</div>
4.直接内嵌style来解决。
.a{/* 很多样式定义 */}
<div class="a">按钮A</div>
<div class="a" style="text-align:center">按钮B</div>
<div class="a" style="text-align:right">按钮C</div>
再来分析下4种方式各自的优缺点:
1.每种不同款式,定义一个css。随着代码量变大,css将会变得越来越难维护。当你需要修改一个按钮风格的时候,所有同样风格的按钮都要改过。你copy到那里,哪里就得改,很容易遗漏。并且代码量也会相对更大,很多可重复利用的资源没有利用起来。
2.利用css层级覆盖来实现。利用css选择符的优先级来覆盖是很好的做法,也是很常用的做法。不过在很多情况下,例如大量的动态页面,我们没有办法完全预知定义的css的id或者类名,而无法定义特别样式。在一些可以控制的情况下,定义太多特殊类名用来区分,又会造成大量后期维护的困难。
3.良好的运用css组合方式,可以比较妥善的解决上面的2个问题。首先,公用样式都被提取了,你修改一个按钮,只需要改公共的部分。其次,不需要绞 尽脑汁去想一个不会冲突的css类名,遵循组合的规则就可以了。当然,这种方法也有缺点,较为复杂的组合需要代码作者自己熟悉覆盖的规则,在css代码里 面并不知道html页面拿哪一些规则拿来进行组合,修改一个规则可能导致调用css的地方出问题。
4.内嵌style优点就是简单快速。缺点也很明显,不仅写起来有点麻烦,代码也难看,维护性也不好。很重要的一点,到处都是style会让人BS的,觉得你这前端div+css用得也忒不好了。所以代码洁癖的人往往宁可定义一个新样式,也不愿意页面有一个style。

我们来看看一些大型站点是如何来解决这个问题的:
/* 一段摘抄自开心网kaixin001.com的css代码 */
.l{float:left;}.r{float:right; clear:right;}.c{clear:both;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号