首頁 > web前端 > css教學 > 主體

關於CSS 框架的論述

黄舟
發布: 2016-12-15 13:46:31
原創
1051 人瀏覽過

最近看到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/UserCt.css);

  〔import xxx/GroupCt.css);

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

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

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

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

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

以上就是關於CSS 框架的論述的內容,更多相關文章請關注PHP中文網(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!