武林網(www.49028c.com)文章簡介：我沒有看過CSS模塊化的相關書籍，所以我下面說的不一定正確，但是在工作中，我會用我理解的模塊化方式提高工作效率，我理解的模塊化，主要分為兩類。

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

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

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

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

CSS

paddingborderoutline

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

XHTML

>...>...>>...>...>

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

CSS

h2 {...}

 XHTML

> >...>> >...>

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

 CSS

h2.XX {...}h2.YY {...}h2.ZZ {...}h2.XYZ {...}

XHTML

> >...>...>> >...calss></div>

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

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

CSS

h2, #wrap_con_01 h2 {...}

 XHTML

> >...>> >...>

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

 CSS

h2h2h2h2.first {...}

 XHTML

> >...>...>> >...>...>

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