武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：我沒(méi)有看過(guò)CSS模塊化的相關(guān)書籍，所以我下面說(shuō)的不一定正確，但是在工作中，我會(huì)用我理解的模塊化方式提高工作效率，我理解的模塊化，主要分為兩類。

在Twinsen Liang的博客上看到一篇名為語(yǔ)義化單單的限定在html么？的文章，文中主要是提及了CSS的命名規(guī)則，仔細(xì)閱讀后，我認(rèn)為這個(gè)其實(shí)就是模塊化思想。（作者也提了這一點(diǎn)）。

我沒(méi)有看過(guò)CSS模塊化的相關(guān)書籍，所以我下面說(shuō)的不一定正確，但是在工作中，我會(huì)用我理解的模塊化方式提高工作效率，我理解的模塊化，主要分為兩類。

1、將常見(jiàn)的樣式剝離出來(lái)，形成單獨(dú)的樣式，我叫他基礎(chǔ)樣式表或模塊樣式表，這個(gè)樣式表主要一些常見(jiàn)的基本結(jié)構(gòu)和形式，如CSS Reset、Blank、Font 等等。

例如下面這個(gè)樣式表，我認(rèn)為就是一個(gè)簡(jiǎn)單的基礎(chǔ)樣式表。（只是簡(jiǎn)單，不推薦用）

CSS

paddingborderoutline

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

XHTML

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

有一部分同學(xué)可能會(huì)這樣寫

CSS

h2 {...}

 XHTML

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

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

 CSS

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

XHTML

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

迫不得已的，我們?cè)黾恿撕芏鄮в胁煌瑯?biāo)記的樣式。可是1年后呢有人問(wèn)起你這些樣式所控制的對(duì)象是什么？
我可以肯定你會(huì)說(shuō)，“我很費(fèi)解”。
或者當(dāng)你自己又寫了一個(gè)“h2.XX”（命名重復(fù)的情況經(jīng)常出現(xiàn)），無(wú)意覆蓋了這個(gè)1年前的樣式，而你又不知道，又恰巧被你的老板發(fā)現(xiàn)了…….上帝只能說(shuō)，阿門，哥們，點(diǎn)被不能怨上帝。

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

CSS

h2, #wrap_con_01 h2 {...}

 XHTML

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

粗看是多了一些，但是當(dāng)我們?cè)俅斡鲆?jiàn)給h2增加不同樣式的時(shí)候，我們可以…

 CSS

h2h2h2h2.first {...}

 XHTML

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

看，這樣是不是好多了，這種格式在1年后，有人問(wèn)起的時(shí)候，我肯以肯定你會(huì)說(shuō)“我不費(fèi)解”。
上帝也不會(huì)找你麻煩了。