Css 模塊化編碼技巧

2024-07-11 08:47:23

字體：大中小

來源：轉載

供稿：網友

Css的模塊化,我們可以理解成(抑或本身就是)OOP思想, 重用性、靈活性、可擴展性便是它終極的目標, "類"便是它的核心, OOP的多用組合少用繼承一樣是它的基本原則. Css模塊化是一個新穎高效的Css編碼方式, 若有接觸過YUI Css的朋友肯定對這種方式有所了解. 如何Css模塊化, 我想這才是大家真正關心的. 我所理解的Css模塊化, 應該從兩大塊去區分. 第一大塊, 從整站全局模塊化. 這一點大家并不陌生, 時常用到的reset css便是模塊化的一部分, 全局通用的字體樣式, 鏈接樣式, 以及通用頭部底部及主體容器等等這些我們已經熟知, 另外諸如定義文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、長度高度(如.w10{width:10px})、邊距(如.m10{margin:10px})等頁面中會常用到的樣式，這一類，我們稱之為Css通用原子類(哈,與類扯上關系了,那就權當成類吧).通用原子類有兩個特點: 通用性和原子性, 任何頁面都可以隨意使用它們, 且他們只表現最基礎的樣式, 一個通用原子類只設置一個樣式,不可再分. 關于整站全局模塊化不再詳述, 本文后面我會貼出阿當的《Web前端開發修煉之道》一書中常用通用原子類樣式. 第二大塊, 是從視覺效果上模塊化, 在視覺上樣式和功能相對獨立穩定的部分即可視為模塊. 拆分這些模塊, 應該盡量遵循一個原則: 模塊與模塊之間盡量不要包含相同的部分, 若有相同部分就再拆出來獨立成一個模塊. 下圖是我畫的一個簡易的頁面視覺圖:
Css模塊化視覺樣例

看到上圖, 菜鳥的Css編碼一般是為1~4定義四個類名,為他們寫各自的樣式; 明智一點的寫法是為1~4定義四個類名, 用.a .b .c .d{...}方式定義共同樣式, 然后再為各自定義不同部分的樣式; 但是, 還有一種完美的方式, 那便是模塊化. 下面我就以上圖為例做個簡單的模塊化分析. 第一步, 分析整個視覺共用部分. 可以看出,1~4中,標題背景,標題文字,內容文字這三個部分的樣式都是相同的, 所以, 我們可以為這個四個區塊定義一個類名, 將共同的樣式寫給這個類名:

復制代碼

上一篇：CSS層疊與繼承的使用深入剖析

下一篇：CSS網頁布局中的最小高度問題的解決方法