我沒(méi)有看過(guò)CSS模塊化的相關(guān)書(shū)籍，所以我下面說(shuō)的不一定正確，但是在工作中，我會(huì)用我理解的模塊化方式提高工作效率，我理解的模塊化，主要分為兩類。
在Twinsen Liang的博客上看到一篇名為語(yǔ)義化單單的限定在html么？的文章，文中主要是提及了CSS的命名規(guī)則，仔細(xì)閱讀后，我認(rèn)為這個(gè)其實(shí)就是模塊化思想。（作者也提了這一點(diǎn)）。
我沒(méi)有看過(guò)CSS模塊化的相關(guān)書(shū)籍，所以我下面說(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
* {margin:0;padding:0;border:none;outline:none;} .cb {clear:both;} .blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}
2、在頁(yè)面中按照結(jié)構(gòu)模塊化書(shū)寫樣式表，避免樣式之間的干擾，并且方便瀏覽。
例如下面的這個(gè)結(jié)構(gòu) XHTML
<!-- 左邊 --> <div> <h2>...</h2> <h2>...</h2> </div> <!-- 右邊 --> <div> <h2>...</h2> <h2>...</h2> </div>
有一部分同學(xué)可能會(huì)這樣寫 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>
剛剛看上去的時(shí)候效果很不錯(cuò)，一切都很完美，代碼少，效果也實(shí)現(xiàn)了，但如果有一天，我們需要將所有h2的樣式變的各不相同時(shí)，情況仿佛不樂(lè)觀了。 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>
迫不得已的，我們?cè)黾恿撕芏鄮в胁煌瑯?biāo)記的樣式?？墒?年后呢有人問(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)被不能怨上帝。
可如果在一開(kāi)始我們用這種方法寫呢？ 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>
粗看是多了一些，但是當(dāng)我們?cè)俅斡鲆?jiàn)給h2增加不同樣式的時(shí)候，我們可以… 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年后，有人問(wèn)起的時(shí)候，我肯以肯定你會(huì)說(shuō)“我不費(fèi)解”。
上帝也不會(huì)找你麻煩了。

最新評(píng)論