首頁 web前端 css教學 關於CSS 框架的論述

關於CSS 框架的論述

Dec 15, 2016 pm 01:46 PM
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/UserCt.css);

  〔import xxx/GroupCt.css);

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

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

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

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

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

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


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1273
29
C# 教程
1256
24
靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語:“靜態表單提供商”。你帶上html

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom 每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom Apr 17, 2025 am 10:55 AM

在本週的平台新聞綜述中,Chrome引入了一個用於加載的新屬性,Web開發人員的可訪問性規範以及BBC Move

帶有HTML對話框元素的一些動手 帶有HTML對話框元素的一些動手 Apr 16, 2025 am 11:33 AM

這是我第一次查看HTML元素。我已經意識到了一段時間,但是尚未將其旋轉。它很酷,

紙張形式 紙張形式 Apr 16, 2025 am 11:24 AM

購買或建造是技術的經典辯論。自己構建東西可能會感覺更便宜,因為您的信用卡賬單上沒有訂單項,但是

'訂閱播客”鏈接應在哪裡? '訂閱播客”鏈接應在哪裡? Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

託管您自己的非JavaScript分析的選項 託管您自己的非JavaScript分析的選項 Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics(廣泛使用)

See all articles