CSS技巧模块化编码

1、CSS技巧模块化编码来源: Mr.Think 发布时间: 2011-01-27 21:13 阅读: 611 次 原文链接 全屏阅读 收藏 编辑点评：本文仅限于CSS研究, 其实用性(过多的类名组合及原子类会导致后期维护非常难)有待商讨. 有许多同行朋友对本文的思想持反对意见, 包括我自己对本文的思想也一直是仅限于自己研究学习, 未曾真正的用于过商业项目中. 过于模块化有风险, 使用请慎重!原生JS因jQuery的”write less,do more”变得极简, HTML因语义化编码变得简明, 那么, 有没有一种方式让CSS也更加的高效精致呢? 当然有, 那便是模块化编码.CSS的模块化,我们

2、可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, “类”便是它的核心, OOP的多用组合少用继承一样是它的基本原则. CSS模块化是一个新颖高效的CSS编码方式, 若有接触过YUI CSS的朋友肯定对这种方式有所了解.如何CSS模块化, 我想这才是大家真正关心的. 我所理解的CSS模块化, 应该从两大块去区分. 第一大块, 从整站全局模块化. 这一点大家并不陌生, 时常用到的reset css便是模块化的一部分, 全局通用的字体样式, 链接样式, 以及通用头部底部及主体容器等等这些我们已经熟知, 另外诸如定义文字排版(如.f12font-size:12px)、

3、定位(如.tltext-align:left)、长度高度(如.w10width:10px)、边距(如.m10margin:10px)等页面中会常用到的样式，这一类，我们称之为CSS通用原子类(哈,与类扯上关系了,那就权当成类吧).通用原子类有两个特点: 通用性和原子性, 任何页面都可以随意使用它们, 且他们只表现最基础的样式, 一个通用原子类只设置一个样式,不可再分. 关于整站全局模块化不再详述, 本文后面我会贴出阿当的Web前端开发修炼之道 一书中常用通用原子类样式.第二大块, 是从视觉效果上模块化, 在视觉上样式和功能相对独立稳定的部分即可视为模块. 拆分这些模块, 应该尽量遵循一个原则:

4、 模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块.下图是我画的一个简易的页面视觉图:看到上图, 菜鸟的CSS编码一般是为14定义四个类名,为他们写各自的样式; 明智一点的写法是为14定义四个类名, 用.a .b .c .d方式定义共同样式, 然后再为各自定义不同部分的样式; 但是, 还有一种完美的方式, 那便是模块化. 下面我就以上图为例做个简单的模块化分析.第一步, 分析整个视觉共用部分. 可以看出,14中,标题背景,标题文字,内容文字这三个部分的样式都是相同的, 所以, 我们可以为这个四个区块定义一个类名, 将共同的样式写给这个类名:01 .02 div cl

5、ass="box"03 h2倒霉松鼠再出山/h204 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p05 /div06 div class="box"07 h2倒霉松鼠再出山/h208 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p09 /div10 div class="box"11 h2倒霉松鼠再出山/h212 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p13 /div14 div class=&q

6、uot;box"15 h2倒霉松鼠再出山/h216 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p17 /div18 .19 /div第二步, 分析出不同部分, 并权衡高效使用. 可以看出, 不同部分, 主要是内容背景色和区块宽度两部分. 先说背景色, 背景色有三种, 淡黄(1个), 白色(2个), 灰色(1个), 遵从”模块与模块之间尽量不要包含相同的部分, 若有相同部分就再拆出来独立成一个模块”的原则, 我们要把2个白底的样式提出来, 另两个单独定义, 而根据CSS优先原则, 我们可以把白底默认定义到第一步中的box样式中, 另两种背景

7、色可做重定义处理. 再来看看宽度与定位, 2,4宽度等同且都右浮动, 所以, 我们可以把这部分提出来模块化, 而浮动一般可以直接调用通用原子类, 所以, 我们仅仅需要定义一个宽度样式中(若这个宽度在通用原子类中也有就更好了). 如此以来, HTML可以这样写:01 .02 div class="box bg_y"03 h2倒霉松鼠再出山/h204 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p05 /div06 div class="box fr right_w"07 h2倒霉松鼠再出山/h208 p20世纪福

8、克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p09 /div10 div class="box"11 h2倒霉松鼠再出山/h212 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p13 /div14 div class="box fr right_w bg_g"15 h2倒霉松鼠再出山/h216 p20世纪福克斯将为卖座动画片冰河世纪(Ice Age内地译做冰川时代)再次开拍续集./p17 /div18 .或许, 这样的结构对HTML页面来说, 会显的有些臃肿, 但CSS文件因为重

9、用性的提高而大大的减小了.CSS模块化是一个比较实用但也需要去领悟的思想, 实际使用中也需要全面的分析, 过多的模块也会导致维护性的降低, 如同OOP编程一样, 我们也要考虑”公有属性”与”私有属性”.本文通过一个简单的例子解析了CSS模块化的基本思想, 更多关于CSS模块化的知识, 可以看YUI CSS或者其他网络上的资源.do write, less moreCSS也可以做到.附: 阿当Web前端开发修炼之道一书中分享的通用原子类: 001 /*文字排版*/002 .f12font-size:12px003 .f13font-size:13px004 .f14font-size:14px0

10、05 .f16font-size:16px006 .f20font-size:20px007 .fbfont-weight:bold008 .fnfont-weight:normal009 .t2text-indent:2em010 .lh150line-height:150%011 .lh180line-height:180%012 .lh200line-height:200%013 .unltext-decoration:underline;014 .no_unltext-decoration:none;015 /*定位*/016 .tltext-align:left017 .tctext

11、-align:center018 .trtext-align:right019 .bcmargin-left:auto;margin-right:auto;020 .flfloat:left;display:inline021 .frfloat:right;display:inline022 .cbclear:both023 .clclear:left024 .crclear:right025 .clearfix:aftercontent:"."display:block;height:0;clear:both;visibility:hidden026 .clearfixd

12、isplay:inline-block* html .clearfixheight:1%.clearfixdisplay:block027 .vmvertical-align:middle028 .prposition:relative029 .paposition:absolute030 .abs-rightposition:absolute;right:0031 .zoomzoom:1032 .hiddenvisibility:hidden033 .nonedisplay:none034 /*长度高度*/035 .w10width:10px036 .w20width:20px037 .w3

13、0width:30px038 .w40width:40px039 .w50width:50px040 .w60width:60px 041 .w70width:70px 042 .w80width:80px 043 .w90width:90px 044 .w100width:100px 045 .w200width:200px 046 .w250width:250px 047 .w300width:300px 048 .w400width:400px 049 .w500width:500px 050 .w600width:600px 051 .w700width:700px 052 .w800

14、width:800px 053 .wwidth:100% 054 .h50height:50px 055 .h80height:80px 056 .h100height:100px 057 .h200height:200px 058 .hheight:100% 059 /*边距*/060 .m10margin:10px 061 .m15margin:15px 062 .m30margin:30px 063 .mt5margin-top:5px 064 .mt10margin-top:10px065 .mt15margin-top:15px 066 .mt20margin-top:20px 06

15、7 .mt30margin-top:30px 068 .mt50margin-top:50px 069 .mt100margin-top:100px 070 .mb10margin-bottom:10px 071 .mb15margin-bottom:15px 072 .mb20margin-bottom:20px 073 .mb30margin-bottom:30px 074 .mb50margin-bottom:50px 075 .mb100margin-bottom:100px 076 .ml5margin-left:5px 077 .ml10margin-left:10px 078 .

16、ml15margin-left:15px 079 .ml20margin-left:20px 080 .ml30margin-left:30px 081 .ml50margin-left:50px 082 .ml100margin-left:100px 083 .mr5margin-right:5px 084 .mr10margin-right:10px 085 .mr15margin-right:15px 086 .mr20margin-right:20px 087 .mr30margin-right:30px 088 .mr50margin-right:50px 089 .mr100mar

17、gin-right:100px090 .p10padding:10px;091 .p15padding:15px;092 .p30padding:30px;093 .pt5padding-top:5px 094 .pt10padding-top:10px 095 .pt15padding-top:15px 096 .pt20padding-top:20px 097 .pt30padding-top:30px 098 .pt50padding-top:50px 099 .pb5padding-bottom:5px 100 .pb10padding-bottom:10px 101 .pb15padding-bottom:15px 102 .pb20padding-bottom:20px 103 .pb30padding-bottom:30px 104 .pb50padding-bottom:50px 105 .pb100padding-bottom:100px 106 .pl5padding-left:5px 107 .pl10padding-left:10px 108 .pl15padding-left:15px 109 .pl20padding-left:20