您当前的位置是:首页-CSS+DIV教程

谈论DivCSS网页布局的模块化开发思想

【发表于】:2011/7/1 12:03:00  已被访问:189次

我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。

  一、将常见的样式剥离出来,形成单独的样式,我叫他基础样式表或模块样式表,这个样式表主要一些常见的基本结构和形式,如CSS Reset、Blank、Font 等等。
  例如下面这个样式表,我认为就是一个简单的基础样式表。(只是简单,不推荐用)


* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}

  二、在页面中按照结构模块化书写样式表,避免样式之间的干扰,并且方便浏览。
  例如下面的这个结构


<!-- 左边 -->
<div>
  <h2>...</h2>
  <h2>http://www.kuzau.com</h2>
</div>
<!-- 右边 -->
<div>
  <h2>...</h2>
  <h2>...</h2>
</div>

  有一部分同学可能会这样写


.wrap_content_box {float:left;}
.wrap_content_box h2 {...}


<!-- 左边 -->
<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 右边 -->
<div class="wrap_content_box">
  <h2>http://www.kuzau.com<h2>
  <h2>...</h2>
</div>

  刚刚看上去的时候效果很不错,一切都很完美,代码少,效果也实现了,但如果有一天,我们需要将所有h2的样式变的各不相同时,情况仿佛不乐观了。


.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}


<!-- 左边 -->
<div class="wrap_content_box">
  <h2 class="XX">...</h2>
  <h2 class="YY">...</h2>
</div>
<!-- 右边 -->
<div class="wrap_content_box">
  <h2 class="ZZ">http://www.kuzau.com</h2>
  <h2 calss="XYZ">...</h2>
</div>

  迫不得已的,我们增加了很多带有不同标记的样式。可是1年后呢有人问起你这些样式所控制的对象是什么?
  我可以肯定你会说,“我很费解”。
  或者当你自己又写了一个“h2.XX”(命名重复的情况经常出现),无意覆盖了这个1年前的样式,而你又不知道,又恰巧被你的老板发现了…….上帝只能说,阿门,哥们,点被不能怨上帝。
  可如果在一开始我们用这种方法写呢?


.wrap_content_box {float:left;}
#wrap_con_00 h2, #wrap_con_01 h2 {...}


<!-- 左边 -->
<div id="wrap_con_00" class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 右边 -->
<div id="wrap_con_01" class="wrap_content_box">
  <h2>...</h2>
  <h2>http://www.kuzau.com</h2>
</div>

  粗看是多了一些,但是当我们再次遇见给h2增加不同样式的时候,我们可以…


.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}


<!-- 左边 -->
<div id="wrap_con_00" class="wrap_content_box">
  <h2 class="first">...</h2>
  <h2>...</h2>
</div>
<!-- 右边 -->
<div id="wrap_con_01" class="wrap_content_box">
  <h2 class="first">http://www.kuzau.com</h2>
  <h2>...</h2>
</div>

 
上下篇: CSS模块化思想 更有效的管理CSS样式 不用float实现div模块居中布局

最新推荐信息