Top

CSS模块化开发

模块化开发，对于程序员来说已经是个恨熟悉的概念了，在php、jsp、c#等语言中，对于模块化开发都是相当的熟悉了，然而css模块化开发想必很多人还是第一次听到，不错，在如今复杂的web项目中，css是不可缺少的部分，甚至在整个项目中所占比例也越来越大，模块化的开发同样显得重要了，css模块化开发主要目的就是为了提高代码重用性及渲染效率。web项目一般都是一个长期的运营项目，维护的时间都比开发时间长，而此时css的重用性就显得很重要了。性能方面，这里所提的web性能主要是指前端的性能，在yslow的14条规则里面其中有一条就是合并压缩css代码，其原因是为了减少http请求数，还有就是减少css文件的大小。css模块化开发能够提高css的重用性、方便后期的维护、减少css文件大小、提高其渲染效率。因此 css模块化开发应该重视。

什么是模块化开发？在网上有过一个比较通俗的解释，也比较好理解。

在网上看过这样一个视频，视频的内容是一栋15层的宾馆大楼如何在7天 的时间里拔地而起的。这段视频曾经引起了国内外网友们的热议。在这段视频中，完整的看到这栋大楼如何一层一层的将架构搭起来，又一步一步的把内外填充好， 最终完成整栋建筑。对建筑行业大部分都是完全外行，但跟以前看到过的盖楼的方式上比较，从表面上也看到了一点区别：过去看到的盖楼过程是一点、一点建起来的，比如一块砖、一块砖的砌，一小块楼板、一小块楼板的灌注。在这个视频中看到这栋大楼则是一块、一块的建起来的，一大块墙、一大块墙的拼，一大块楼板、一大块楼板的拼。也许这个视频就可以作为一个让人们对模块化产生直接认知的很好的说明示例。

从这个视频来说，模块化并不只是软件开发领域独有的概念，这个概念在很多传统行业中有着更深远的历史，比如建筑业、汽车业、计算机硬件业等等。并且，无论有没有仔细想过模块化这个概念，人类自古以来做事的方式一直都是按照这种思路来进行的，只是在不同阶段、不同条件下执行的方式、程度等有所不同。

这里是对模块化这个名词的一个基本解释：构建标准化的灵活多用的单元。具体一点解释，是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的单元。在现在很多互联网项目都是这样的思想，将各个独立的功能做成一个独立的应用，让用户来选择所需要的应用。

从上面内容来看，模块化开发的关键就是如何构建可组合、分解和更换的单元，这也正是CSS模块化开发的关键，就是如何合适地构建这些单元，即class，以及如何灵活运用这些单元来达到所要的呈现效果。而为了更好的实现CSS的模块化开发，引入面向对象的思想是个不错的思路，及封装、继承、多态。

一、封装：

如图所示：

看下面的HTML代码，其中包括”module-a“及”module-b“两个模块，并且相互之间都是独立的两个模块。

  1. <div class="module-a"> 
  2.   <h3>标题1</h3> 
  3.   <p>描述文字</p> 
  4. </div> 
  5. <div class="module-b"> 
  6.   <h3>标题2</h3> 
  7.   <ul> 
  8.     <li>列表</li> 
  9.     <li>列表</li> 
  10.     <li>列表</li> 
  11.   </ul> 
  12. </div> 

对应的CSS代码：

  1. .module-a{.....} 
  2. .module-a h3{.....} 
  3. .module-a p{.....} 
  4. .module-b{.....} 
  5. .module-b h3{.....} 
  6. .module-b ul{.....} 
  7. .module-b ul li{.....} 
  8. .module-b ul li{.....} 
  9. .module-b ul li{.....} 

封装是实现CSS模块化的最基本要求，封装成的各个单元就是基本的CSS模块，可灵活用于组建页面的各种显示样式。

二、继承

下面是实现继承的一个实例，先看HTML代码：

  1. <div class="module module-A module-A-a"></div> 
  2. <div class="module module-A module-A-b"></div> 

CSS代码：

  1. .module {.....} 
  2.     .module-A {.....} 
  3.         .module-A-a {.....} 
  4.         .module-A-b {.....} 
  5.     .module-B {.....} 
  6.         .module-B-a {.....} 
  7.         .module-B-b {.....} 

继承可谓是CSS模块化的关键所在，由于html元素可以拥有多个类，而且根据优先级，后面定义的属性可以覆盖前面的，正因为这样，继承这个特性发挥了巨大的作用。对于某些多数样式属性相同，仅有几个不同样式属性的定义，可以用这个方法来实现。也可以在不改变某个通用样式类的同时，用HTML调用复合类，突出局部特例。

三、多态

同样先来看一个实例，HTML代码：

  1. <div class="module-A"></div> 
  2. <div class="part-A"> 
  3.     <div class="module-A"></div> 
  4. </div> 
  5. <div class="part-B"> 
  6.     <div class="module-A"></div> 
  7. </div> 
  8. <div class="part-C"> 
  9.     <div class="module-A"></div> 
  10. </div> 

CSS代码：

  1. .module-A {.....} 
  2. .part-A .module-A {.....} 
  3. .part-B .module-A {.....} 
  4. .part-C .module-A {.....} 

多态主要用于同一模块在页面的不同部分或者不同页面之间呈现出不同的样式。对于CSS的多态，一个很经典而且常用的例子就是导航栏。导航栏往往需要标识出当前页面所在的导航链接。也就是说，对于导航栏的链接，通常有两种形态，一种是常态，一种是当前状态，比如处于主页时，主页的链接就是当前状态，需要区别其他导航效果。这个时候，通常我们的做法是在li上加上一个current类，用来把该导航链接设置当前状态，而实际上我们可以使用多态来实现。及为每个页面都定义一个唯一的class，而这个页面上的导航可以设置其特殊性，这样做的好处有利于后期的维护及服务器端程序的开发，不再需要为某个导航设置其当前状态，只需在body中加入一个唯一的页面class，下面先看HTML代码：

主页：

  1. <body class="pageIndex">  
  2.     <ul class="nav">  
  3.         <li class="home"><a href="./">网站首页</a></li>  
  4.         <li class="about"><a title="关于站长" href="?about">关于站长</a</li>  
  5.     </ul>  
  6. </body>  

内页：

  1. <body class="pageAbout">   
  2.         <ul class="nav">   
  3.             <li class="home"><a href="./">网站首页</a></li>   
  4.             <li class="about"><a title="关于站长" href="?about">关于站长</a</li>   
  5.         </ul>   
  6.     </body>   

CSS代码：

  1. .nav li{……} 
  2. .pageIndex .nav .home{……}    
  3. .pageAbou .nav .about{……} 

这样就能够让导航在不同的页面有着独特的效果。

在我们开发的过程中，合理的利用这三种思想，是能够写出可维护性高、重用性高、渲染效率高的CSS代码，用最少的代码实现最佳的效果，这对于每个开发者来说都是一样的。

 

转自 http://www.lav.so/vskill.php?id=113

posted @ 2013-04-29 09:48  F-E  阅读(427)  评论(0)  编辑  收藏  举报