DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS模塊化的理解
CSS模塊化的理解
編輯:CSS進階教程     

在Twinsen Liang的博客上看到一篇名為語義化單單的限定在html麼?的文章,文中主要是提及了CSS的命名規則,仔細閱讀後,我認為這個其實就是模塊化思想。(作者也提了這一點)。

我沒有看過CSS模塊化的相關書籍,所以我下面說的不一定正確,但是在工作中,我會用我理解的模塊化方式提高工作效率,我理解的模塊化,主要分為兩類。

1、將常見的樣式剝離出來,形成單獨的樣式,我叫他基礎樣式表或模塊樣式表,這個樣式表主要一些常見的基本結構和形式,如CSS Reset、Blank、Font 等等。

例如下面這個樣式表,我認為就是一個簡單的基礎樣式表。(只是簡單,不推薦用)

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

2、在頁面中按照結構模塊化書寫樣式表,避免樣式之間的干擾,並且方便浏覽。
例如下面的這個結構

XHTML
<!-- 左邊 -->
<div>
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 右邊 -->
<div>
  <h2>...</h2>
  <h2>...</h2>
</div>

有一部分同學可能會這樣寫

CSS
.wrap_content_box {float:left;}
.wrap_content_box h2 {...}
 XHTML
<!-- 左邊 -->
<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 右邊 -->
<div class="wrap_content_box">
  <h2>...</h2>
  <h2>...</h2>
</div>

剛剛看上去的時候效果很不錯,一切都很完美,代碼少,效果也實現了,但如果有一天,我們需要將所有h2的樣式變的各不相同時,情況仿佛不樂觀了。

 CSS
.wrap_content_box {float:left;}
h2.XX {...}
h2.YY {...}
h2.ZZ {...}
h2.XYZ {...}
XHTML
<!-- 左邊 -->
<div class="wrap_content_box">
  <h2 class="XX">...</h2>
  <h2 class="YY">...</h2>
</div>
<!-- 右邊 -->
<div class="wrap_content_box">
  <h2 class="ZZ">...</h2>
  <h2 calss="XYZ">...</h2>
</div>

迫不得已的,我們增加了很多帶有不同標記的樣式。可是1年後呢有人問起你這些樣式所控制的對象是什麼?
我可以肯定你會說,“我很費解”。
或者當你自己又寫了一個“h2.XX”(命名重復的情況經常出現),無意覆蓋了這個1年前的樣式,而你又不知道,又恰巧被你的老板發現了…….上帝只能說,阿門,哥們,點被不能怨上帝。

可如果在一開始我們用這種方法寫呢?

CSS
.wrap_content_box {float:left;}
#wrap_con_00 h2, #wrap_con_01 h2 {...}
 XHTML
<!-- 左邊 -->
<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>...</h2>
</div>

粗看是多了一些,但是當我們再次遇見給h2增加不同樣式的時候,我們可以…

 CSS
.wrap_content_box {float:left;}
#wrap_con_00 h2,{...}
#wrap_con_00 h2.first {...}
#wrap_con_01 h2,{...}
#wrap_con_01 h2.first {...}
 XHTML
<!-- 左邊 -->
<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">...</h2>
  <h2>...</h2>
</div>

看,這樣是不是好多了,這種格式在1年後,有人問起的時候,我肯以肯定你會說“我不費解”。
上帝也不會找你麻煩了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved