關於CSS 架構的論述

最近看到N多介紹CSS架構，前些天我說過一句話：“在我有限的視野裡，還沒見到可以真正可以稱得上css架構的東東~”，當然也可能是我的視野太小了，或者是說世界太大了，我自己還是感覺還有一大堆我看不到的東西。

　　先來看一下一個我比較認同的概念：

　　架構可分為白盒(White-Box)與黑盒(Black-Box)兩種架構。

　　基於繼承的架構被稱為白盒架構。所謂白盒即具備可視性，被繼承的父類的內部實現細節對子類而言都是可知的。利用白盒架構的應用開發人員通過衍生子類或重寫父類的成員方法來開發系統。子類的實現很大程度上依賴於父類的實現，這種依賴性限制了重用的靈活性和完全性。但解決這種局限性的方法可以是只繼承抽象父類，因為抽象類別基本上不提供具體的實現。白盒架構是一個程式骨架，而使用者衍生出的子類是這個骨架上的附屬品。

　　基於對象構件組裝的架構就是黑盒架構。應用開發人員通過整理、組裝對象來獲得系統的實現。使用者只須瞭解構件的外部介面，無須瞭解內部的具體實現。另外，組裝比繼承更為靈活，它能動態地改變，繼承只是一個靜態編譯時間的概念。

　　在理想情況下，任何所需的功能都可通過組裝已有的構件得到，事實上可獲得的構件遠遠不能滿足需求，有時通過繼承獲得新的構件比利用已有構件組裝新構件更容易，因此白盒和黑盒將同時應用於系統的開發中。不過白盒架構趨向於向黑盒架構發展，黑盒架構也是系統開發希望達到的理想目標。

　　再回頭看一下現在網上那樣多CSS架構（YUI是叫“YUI Library CSS Tools” 並非是“YUI CSS Frameworks”），有多少是真正以架構的概念在寫，有多少只是定義樣式基類的。當然，每個人對架構的理解不一定，你可能不認同我的說法。

　　再談一下CSS 架構，並不非我不認可這個東西的存在，我從一兩年前也就一直在嘗試這樣的東西。對於大型網站，前端的開發需要一個解決方案。架構自然是首選的。可惜距離我太遠了，我太弱了T_T，我只要要求兩點：

　　管理下面的內容的東西
　　類/組件
　　很明顯，第一點，CSS做不到，第二點，相對其它語言很弱的說。

　　大約在一年前做一個中型網站時，我為了偷懶，我想到內容模組化，讓程式員拼頁面。大約方向也就是封裝了一個又一個的功能塊，程式員在要用到哪一塊內容時就只要使用相應的HTML與CSS，大家都方便，我不要拼頁面，他不用重複套代碼，大家好才是真的好。

　　在同一個網站，差不多的內容塊，多次使用是很正常的事，這也是就讓模組化成為可能，比如一個圖片列表，可能是帳戶圖片列表，或者群組的表徵圖列表，這時你會怎樣寫呢？相同的用這樣嗎？

　　.photoListUesr,.photoListGroup{ /*_*/ }

　　這樣不是說不行，但如果突然說要再加一個相似的呢？這時可能就要調整樣式。而我呢？嘗試過這樣的使用方式：

　　這樣的話，我們一開始就分離出共同表現的東西，把.photoList當成原型，通處額外的class再去處理細節。前些天，我寫了 物件導向的XHTML與CSS編程 ，其實唯寫了一半，另一半是詳細的例子，不過介於要做太多的例子跟核心已經寫出來就沒寫完，^^ 當然，這樣也存在一定的問題，就是最初的原型的定義要很謹慎，要盡量做到以後就算是改版也可能不用修改。CSS這東西，基本上一個架構最多隻能適合一個站，當然，如果這個站足夠大的話，這樣使用才是有意義滴。

　　HTML與CSS越是模組化，檔案越分散這個問題就越嚴重。HTML倒是好辦，反正是應用程式最終要合并輸出一份，但CSS一般會給拋棄直接使用。如果在剛才的例子中，在網頁匯入CSS的方式是這樣的話：

　　@import url(/xxx/photoList.css);
　　@import url(/xxx/UserCt.css);
　　@import url(/xxx/GroupCt.css);

　　那甚至可以考慮用程式來拼頁面，但是使用方便，請求數也成正比，一般情況大家都會選擇手動合并檔案。雖然人腦比電腦更智能，但很多時候，人腦的計算能力是比不上電腦滴。我曾經有這樣的想法，就是使用服務端程式來處理CSS的發布機制，大約方向就是通過網站訪問日誌來分析出整個站各種頁面的使用量，通過程式來計算哪些公用使用的要合并，合并的順序（CSS的檔案順序會影響到優先權），等等各種計算並壓縮輸出。

　　可惜的是，這樣一套複雜的程式可能只適合一個站，或者同系列的站群。雖然說做起來有點折騰，但我相信門戶層級網站使用這樣的方式是有必要滴，當然前提還要整個團隊都要使用相同的設計模式。

　　PS:以上CSS發布程式，只是我的幻想，還沒嘗試過，有興趣的朋友可以嘗試一下，如有意外，概不負責。

　　當然，就以上這些還是不能稱得上CSS Frameworks，或許只能叫成一個系統級解決方案，畢竟，CSS只是描述性語言。

　　前晚跟月影一起吃烤鴨時，有聊到這個，他問我有沒有前端一體化的解決方案。JS組件化時也會面臨同樣的問題，差不多的發布機制應該也可以適用JS。不過完全的一體化解決方案我還沒想好，也許月影多請我吃幾次烤鴨我就能想好。

以上就是關於CSS 架構的論述的內容，更多相關文章請關注topic.alibabacloud.com（www.php.cn）！

