关于css-的打包、继承、多态
日期：2014-05-17 浏览次数：20686 次
关于css--的封装、继承、多态
第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上，当时我还想，“哈，CSS也有模块化，我没听错吧？”事实上，我没听错，你也没看错，早就有CSS模块化这个概念了。之所以我把这个拿出来讨论，是因为最近艾维的一个算是比较大的项目——聪明的油出现了一些重构上的危机，因此引发了我们对页面重构中的CSS进行模块化的思考。
首先，什么是CSS模块化？在谈CSS模块化之前我们先看一下百度百科对模块化的解释：
“模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的单元。”
我对上面一段话的理解是，模块化就像我们玩乐高积木一样，一个积木就是一个单元，可以通过组合不同的积木来搭建一个玩具模型。对于一个玩具模型，也可以更换部分积木而迅速变成另一个模型。而CSS模块化的关键，就是如何合适地构建这些单元，也就是一个一个的class，以及如何灵活运用这些单元来达到我们所要的呈现效果。
说了一堆繁杂的话，连我自己都觉得乏味。作为一个热爱编程的页面仔，我想借用面向对象的三大特性来说明CSS模块化——封装、继承、多态。
一、 封装
HTML代码
<div class=”module-a”>
<h3>标题1</h3>
<p>描述文字</p>
</div>
<div class=”module-b”>
<h3>标题2</h3>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</div>
CSS代码
.module-a{.....}
.module-a h3{.....}
.module-a p{.....}
.module-b{.....}
.module-b h3{.....}
.module-b ul{.....}
.module-b ul li{.....}
.module-b ul li{.....}
.module-b ul li{.....}
封装是实现CSS模块化的最基本要求，封装成的各个单元就是基本的CSS模块，可灵活用于组建页面的各种显示样式。
二、 继承
HTML代码
<div class=” module module-A module-A-a”></div>
<div class=” module module-A module-A-b”></div>
CSS代码
.module {.....}
.module-A {.....}
.module-A-a {.....}
.module-A-b {.....}
.module-B {.....}
.module-B-a {.....}
.module-B-b {.....}
继承可谓是CSS模块化的关键所在，由于html元素可以拥有多个类，而且根据优先级，后面定义的属性可以覆盖前面的，正因为这样，继承这个特性发挥了巨大的作用。对于某些多数样式属性相同，仅有几个不同样式属性的定义，可以用这个方法来实现。也可以在不改变某个通用样式类的同时，用HTML调用复合类，突出局部特例。
三、 多态
HTML代码
<div class=”module-A”></div>
<div class=”part-A ”>
<div class=”module-A”></div>
</div>
<div class=”part-B ”>
<div class=”module-A”></div>
</div>
<div class=”part-C ”>
<div class=”module-A”></div>
</div>
CSS代码
.module-A {.....}
.part-A .module-A {.....}
.part-B .module-A {.....}
.part-C .module-A {.....}
多态主要用于同一模块在页面的不同部分或者不同页面之间呈现出不同的样式。对于CSS的多态，一个很经典而且常用的例子就是导航栏。我们知道，导航栏往往需要标识出当前页面所在的导航链接。也就是说，对于导航栏的链接，通常有两种形态，一种是常态，一种是高亮态，比如处于主页时，主页的链接就是高亮态的，其他导航链接是常态的。这个时候，很多人喜欢在li上加上一个current类，用来把该导航链接设置为高亮态，但是我觉得这种方式并不理想。
为什么呢？因为对于结构一样的导航栏，后台人员在处理时，往往是抽出成一个公共结构，然后各个页面都引入这个结构。这对于后期的维护是相当有效的，因为涉及导航栏的修改仅需修改一次即可，如果不这么做，那么修改的次数将会等于页面的个数，而且容易出错。对于这种情况，多态就可以很好地解决，因为我们可以在每个页面的body（或者其他地方）加上一个类来标识不同的页面（此类可以不定义任何样式）。那么，根据多态的特性，我们就可以为不同页面的导航设置不同的形态，同时又保持了导航链接的结构一致性。举例如下：
HTML代码
主页：
<body class=”index”>
<ul class=”nav”>
<li class=”index”><a href=”#”>主页</a></li>
<li class=”page1”><a href=”#”>内页1</a></li>
<li class=”page2”><a href=”#”>内页2</a></li>
</ul>
</body>
内页1：
<body class=”page1”>
<ul class=”nav”>
<li class=”index”><a href=”#”>主页</a></li>
<li class=”page1”><a href=”#”>内页1</a></li>
<li class=”page2”><a href=”#”>内页2</a></li>
</ul>
</body>
CSS代码<
第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上，当时我还想，“哈，CSS也有模块化，我没听错吧？”事实上，我没听错，你也没看错，早就有CSS模块化这个概念了。之所以我把这个拿出来讨论，是因为最近艾维的一个算是比较大的项目——聪明的油出现了一些重构上的危机，因此引发了我们对页面重构中的CSS进行模块化的思考。
首先，什么是CSS模块化？在谈CSS模块化之前我们先看一下百度百科对模块化的解释：
“模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的单元。”
我对上面一段话的理解是，模块化就像我们玩乐高积木一样，一个积木就是一个单元，可以通过组合不同的积木来搭建一个玩具模型。对于一个玩具模型，也可以更换部分积木而迅速变成另一个模型。而CSS模块化的关键，就是如何合适地构建这些单元，也就是一个一个的class，以及如何灵活运用这些单元来达到我们所要的呈现效果。
说了一堆繁杂的话，连我自己都觉得乏味。作为一个热爱编程的页面仔，我想借用面向对象的三大特性来说明CSS模块化——封装、继承、多态。
一、 封装
HTML代码
<div class=”module-a”>
<h3>标题1</h3>
<p>描述文字</p>
</div>
<div class=”module-b”>
<h3>标题2</h3>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</div>
CSS代码
.module-a{.....}
.module-a h3{.....}
.module-a p{.....}
.module-b{.....}
.module-b h3{.....}
.module-b ul{.....}
.module-b ul li{.....}
.module-b ul li{.....}
.module-b ul li{.....}
封装是实现CSS模块化的最基本要求，封装成的各个单元就是基本的CSS模块，可灵活用于组建页面的各种显示样式。
二、 继承
HTML代码
<div class=” module module-A module-A-a”></div>
<div class=” module module-A module-A-b”></div>
CSS代码
.module {.....}
.module-A {.....}
.module-A-a {.....}
.module-A-b {.....}
.module-B {.....}
.module-B-a {.....}
.module-B-b {.....}
继承可谓是CSS模块化的关键所在，由于html元素可以拥有多个类，而且根据优先级，后面定义的属性可以覆盖前面的，正因为这样，继承这个特性发挥了巨大的作用。对于某些多数样式属性相同，仅有几个不同样式属性的定义，可以用这个方法来实现。也可以在不改变某个通用样式类的同时，用HTML调用复合类，突出局部特例。
三、 多态
HTML代码
<div class=”module-A”></div>
<div class=”part-A ”>
<div class=”module-A”></div>
</div>
<div class=”part-B ”>
<div class=”module-A”></div>
</div>
<div class=”part-C ”>
<div class=”module-A”></div>
</div>
CSS代码
.module-A {.....}
.part-A .module-A {.....}
.part-B .module-A {.....}
.part-C .module-A {.....}
多态主要用于同一模块在页面的不同部分或者不同页面之间呈现出不同的样式。对于CSS的多态，一个很经典而且常用的例子就是导航栏。我们知道，导航栏往往需要标识出当前页面所在的导航链接。也就是说，对于导航栏的链接，通常有两种形态，一种是常态，一种是高亮态，比如处于主页时，主页的链接就是高亮态的，其他导航链接是常态的。这个时候，很多人喜欢在li上加上一个current类，用来把该导航链接设置为高亮态，但是我觉得这种方式并不理想。
为什么呢？因为对于结构一样的导航栏，后台人员在处理时，往往是抽出成一个公共结构，然后各个页面都引入这个结构。这对于后期的维护是相当有效的，因为涉及导航栏的修改仅需修改一次即可，如果不这么做，那么修改的次数将会等于页面的个数，而且容易出错。对于这种情况，多态就可以很好地解决，因为我们可以在每个页面的body（或者其他地方）加上一个类来标识不同的页面（此类可以不定义任何样式）。那么，根据多态的特性，我们就可以为不同页面的导航设置不同的形态，同时又保持了导航链接的结构一致性。举例如下：
HTML代码
主页：
<body class=”index”>
<ul class=”nav”>
<li class=”index”><a href=”#”>主页</a></li>
<li class=”page1”><a href=”#”>内页1</a></li>
<li class=”page2”><a href=”#”>内页2</a></li>
</ul>
</body>
内页1：
<body class=”page1”>
<ul class=”nav”>
<li class=”index”><a href=”#”>主页</a></li>
<li class=”page1”><a href=”#”>内页1</a></li>
<li class=”page2”><a href=”#”>内页2</a></li>
</ul>
</body>
CSS代码<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
