模組化可以讓**高度重用，顯著提高開發效率。關於模組化，比較成熟的是程式設計領域的「類」。在物件導向程式設計方式中，「類」是個非常核心的概念，可以說物件導向思想的基礎就是「類」。關於模組化，「類」有很多成熟的技巧，例如封裝、多用組合少用繼承原則等。css的模組化是個有趣的話題，它是個新的領域，很多人都有自己的見解。下面筆者談談自己的理解——借鑑程式設計中的「類」，將物件導向的程式設計思想引入到css的模組化裡。
從視覺上進行劃分，樣式和功能相對獨立且穩定的一部分就可以視為模組。舉個例子說明，對於圖1所示的設計圖，我們該如何劃分模組呢？
很明顯，除了第三列，前兩列的上下兩部分從視覺上來看結構相同。因此可以將設計圖按圖2所示的四種模組來編寫**。每個模組都要完整包含自己區域的內容，相同型別的模組可以重用。
但仔細觀察，會發現模組l和模組2有相似的部分，模組3和模組4也有相似的部分，這些相似的部分分別在兩個模組裡都寫了一遍。 一方面，增加了冗餘的**量，另一方面如果需要修改相似部分的**，兩個模組都需要修改，增加了修改的成本。
我們可以將這些相似的部分提取出來，再進一一步拆分成更小的模組。我們可以將設計圖拆成6個模組，如圖3所示。如此一來，每個模組都相對獨立，和其他模組沒有重複的地方，模組的重用率提高了。
圖4中框出的部分如果需要修改，按4種模組拆分的方式就需要在模組1和模組2中分別修改，而按6種模組拆分的話，只需要修改模組4就可以了。可見拆分成6個模組可以提高可維護性，方便修改。
至此，我們可以歸納出拆分模組的第乙個技巧：
模組與模組之間盡量不要包含相同的部分，如果有相同部分，應將它們提取出來，拆分成乙個獨立的模組。
按6種模組拆分的方式已經足夠好了嗎？雖然模組與模組之間已經不再有相同部分了，每個模組都相對獨立，但模組1和模組2包含的結構比較複雜，如果需要新增如下的模組會怎麼樣呢？
圖5中的設計是不是和圖1很像呢？我們能不能直接使用圖3中拆分的模組來拆分圖5呢？答案是不行！雖然圖5中的設計與圖3中的模組1和模組2很像，但並不一樣。圖3中的模組1和模組2除了標題和邊框之外，還包含其他內容。
將圖3中的模組1和模組2進一步拆分，得到如圖6所示的8個模組，其中的模組1和模組2就可以匹配圖5中的設計了，如圖7所示。
按照6種模組來拆分，其中模組1和模組2會因為結構複雜，而難以在相似的設計中重用。按照8種模組來拆分，模組的結構更加簡單，能重用在相似的設計中。我們在拆分模組時，應將模組拆得盡可能簡單，以提高彈性。模組功能越簡單其重用性越高，但數量也會相應增加，增加了維護難度。所以，拆分模組時應該在「數量少」和「結構簡單」之間取乙個最合適的平衡點。
這就是拆分模組的第二個技巧：
模組應在保證數量盡可能少的原則下，做到盡可能簡單，以提高重用性。
在物件導向程式設計中也有相似的思想，設計類的時候，為了保證重用性需遵守「單一職責」原則，一般情況下，類的功能應該相對簡單穩定，乙個類只具有乙個職責。乙個功能超複雜的擁有多個職責的大類，其重用性遠不如一群職責單一的簡單小類。
編寫高質量的CSS
我們應用css的能力應該分成兩部分 一部分是css的api，重點是如何用css控制頁面內元素的樣式 另一部分是css框架，重點是如何對css進行組織。base層 reset功能 通用類 common層 元件級別的css類 page層 頁面級別css樣式 舉個例子，有兩個列表，列表條目1字型14px紅...
高質量CSS編寫規範
id和class的命名在保持語義性的同時盡可能的短.可以縮寫單詞，但縮寫後務必能讓人明白其含義。比如author縮寫成atr就非常費解。屬性書寫順序,首先定義顯示屬性 推薦的寫法 selector 不推薦的寫法 selector 這樣，就可以從css 規則中靠前的定義獲得顯示版式。框架為先，細節次之...
css模組化策略
block element modifier 塊 元素 修飾封裝靠人為約定。繼承靠層疊特性。分治性強，復用性強。button button disabled button error button in progressprocessing.缺點 人為約定總是不靠譜，有人覆蓋了就呵呵噠。分治性強，復...