CSS模組化的理解

2022-09-25 19:00:14 字數 1356 閱讀 6975

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

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

1、將常見的樣式剝離出來,形成單獨的樣式,我叫他基礎樣式表或模組樣式表,這個樣式表主要一些常見的基本結構和形式,如css reset、blank、font 等等。

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

css

* .cb

.blank10

2、在頁面中按照結構模組化書寫樣式表,避免樣式之間的干擾,並且方便瀏覽。

例如下面的這個結構

xhtml

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

css

.wrap_content_box

.wrap_content_box h2

xhtml

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

css

.wrap_content_box

h2.xx

h2.yy

h2.zz

h2.xyz

xhtml

迫不得已的,我們增加了很多帶有不同標記的樣式。可是1年後呢有人問起你這些樣式所控制的物件程式設計客棧是什麼?

我可以肯定你會說,「我很費解」。

或者當你自己又寫了乙個「h2.xx」(命名重複的情況經常出現),無意覆蓋了這個1年前的樣式,而你又不知道,又恰巧被你的老闆發現了…….上帝只能說,阿門,哥們,點被不能怨上帝。

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

css

.wrap_content_box

#wrap_con_00 h2, #wrap_con_01 h2

程式設計客棧

xhtml

&lwww.cppcns.comt;h2>...

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

css

.wrap_content_box

#wrap_con_00 h2,

#wrap_con_00 h2.first

#wrap_con_01 h2,

#wrap_con_01 h2.first

xhtml

看,這樣是不是好多了,這種格式在1年後,有人問起的時候,我肯以肯定你會說「我不費解」。

上帝也不會找你麻煩了。

本文標題: css模組化的理解

本文位址:

模組化的理解,以及模組化的好處

先理解模組 在程式設計中,為完成某一功能所需的一段程式或子程式 或指能由編譯程式 裝配程式等處理的獨立程式單位 或指大型軟體系統的一部分。可以這樣理解每乙個頁面中的部分都可以看成乙個模組。模組化是指解決乙個複雜問題時自頂向下逐層把系統劃分成若干模組的過程,有多種屬性,分別反映其內部特性。是指將每乙個...

模組化程式設計理解

工作中在做客戶運營系統時,發現js和css的引用還處於最原始的狀態沒有更新。在上乙個專案中通過物件和其中的方法實現了簡單的模組化程式設計。但隨著工程專案的龐大程度增加,簡單的物件已經滿足不了模組化程式設計的需求了,所以接觸了requirejs,了解了amd程式設計規範。和amd對應的是cmd,在no...

理解JS 模組化

module.exports與exports,export與export default之間的關係和區別 js 模組化規範 最早是閉包的寫法,防止變數的汙染 多個js 用 defer 和 async amd 和 cmd 在es6 module 出現之後就退出歷史的舞台了 es6 module 瀏覽器...