CSS模塊化的理解

2024-07-11 08:21:51

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

1、將常見的樣式剝離出來，形成單獨(dú)的樣式，我叫他基礎(chǔ)樣式表或模塊樣式表，這個樣式表主要一些常見的基本結(jié)構(gòu)和形式，如css reset、blank、font 等等。

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

css

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

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

xhtml

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

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

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í)現(xiàn)了，但如果有一天，我們需要將所有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>

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

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

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)我們再次遇見給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>