現(xiàn)在的網(wǎng)站風格已經(jīng)與它們很早之前的樣子有了很大的不同。如果現(xiàn)在再回過頭去看有些公司最初的網(wǎng)站UI,我想大多數(shù)互聯(lián)網(wǎng)用戶都很難認得出來。所以也多虧了網(wǎng)頁設計技術的創(chuàng)新,現(xiàn)在網(wǎng)站不僅僅是只能顯示信息,它們同樣也可以擁有有趣的動畫、多樣的布局和互動的元素。而其中,這些大部分都是由CSS來實現(xiàn)的。
所以CSS的出現(xiàn)為原本平平無奇的網(wǎng)頁注入了活力。這也是網(wǎng)站的用戶體驗得到進一步進化的原因。這可能就是當今幾乎所有的網(wǎng)站或多或少都在使用CSS的原因之一。
今年,一些CSS技術正在掀起一場新的技術革新,例如:Flexbox,盡管在Google Chrome上83%的頁面加載使用了Flexbox,但另一個名為Grid的新競爭對手也正在慢慢流行起來。另外還有 CSS Writing-Mode、移動動畫、單頁網(wǎng)站、靈活字體和滾動捕捉等技術也可能產生一定影響。
但在本文里,不會討論不同CSS技術之間的異同,主要是以介紹CSS框架為主。因為過去的幾年里它們才開始流行起來,但已經(jīng)有越來越多的開發(fā)人員已經(jīng)開始接觸使用它們了。
CSS框架是什么?
我們將CSS定義為一種設計語言,它為HTML文檔的UI設計提供了幫助。通過CSS進行設計有很多優(yōu)勢,它可以與任何類型的XML一起使用,也包括XUL和SVG。CSS框架就像是一個現(xiàn)成的包,其中包含可以作為網(wǎng)站結構基礎的文件。
使用框架有很多好處。以下是其中一些:
- 節(jié)省時間:這是最突出的優(yōu)勢之一。使用CSS框架,開發(fā)人員在構建應用或網(wǎng)站時無需從零開始。他們可以空出學習的時間專注到其他重要工作上,例如UI設計,移動端化以及解決特定瀏覽器兼容問題。
- 代碼可重用:如果你的項目是一個擁有很多頁面的大型項目,并且后續(xù)仍在持續(xù)更新,那么框架的使用將對你將很有用的。可以說擁有強大重用特性的框架,能明顯縮短您項目的準備周期。
- 跨瀏覽器的問題:長久以來,處理各瀏覽器間的訪問差異,是廣大前端開發(fā)者最為頭疼的事情。 但CSS框架能提前為您發(fā)現(xiàn)并解決各瀏覽器間的差異,以保證您可以在任何瀏覽器中無差異的運行。
- 標準結構確保一致性:前端框架通常由CSS,HTML和JavaScript文件組成,這些文件有助于確保所有頁面中元素(如設計和表單等)的一致性。
優(yōu)秀的CSS框架
Bootstrap
Bootstrap最初是Twitter Blueprint作為供團隊內部使用的工具而創(chuàng)建的。但在它公開發(fā)布后,它受到了開發(fā)者廣泛使用,使用率增長不斷增長。
Bootstrap為警告窗、按鈕、輪播、下拉菜單、表單等元素提供了設計模板。通過Bootstrap移動優(yōu)先功能,可以為您輕松創(chuàng)建響應式布局,它能為您的應用在多個設備上實現(xiàn)一致的設計。
Skeleton
Skeleton以“簡單支持響應式樣板”的特點著稱。因為該框架只有大約400行代碼,它更適合于較小的項目或開發(fā)人員有著輕量化要求的情況。
對于那些剛剛開始使用前端框架的人來說,這也是一個不錯的選擇。但因為Skeleton缺乏了CSS設計模板、預處理器和