【51CTO.com快譯】如今我們所瀏覽的網(wǎng)站，除了基本的信息展示之外，大多數(shù)具有生動的動畫、多樣的布局、以及誘人的互動元素，多要歸功于CSS創(chuàng)新技術(shù)的實現(xiàn)。截至到去年年底，F(xiàn)lexbox已經(jīng)被運用到了Google Chrome的83%加載頁面上(請參閱：https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)，人們從中能夠看到包括CSS寫入模式(Writing-Mode)、移動動畫、單頁面網(wǎng)站、可變字體、以及滾動捕捉等方面的新趨勢。

CSS框架是什么?使用它的好處在哪里?

[[319146]]

通常，業(yè)界將CSS定義為一種提供有效外觀的設(shè)計語言。它可以被用于格式化和描述以文檔標(biāo)記形式編寫的外觀。由于CSS可以與XUL和SVG等任何類型的XML一起使用，因此CSS框架就像帶有文件的現(xiàn)成軟件包一樣，可以用作網(wǎng)站的構(gòu)建基礎(chǔ)。

下面我們來看看使用CSS框架可以給網(wǎng)站帶來哪些具體的好處：

• 可以明顯節(jié)省時間：通過使用CSS框架，開發(fā)人員在構(gòu)建應(yīng)用或網(wǎng)站時無需從零開始。他們可以讓自己更專注于諸如：圖形設(shè)計、移動媒體優(yōu)化、以及目標(biāo)應(yīng)用的制作與測試等其他重要任務(wù)上。
• 可實現(xiàn)代碼的重用：如果您正在從事一個大型項目的開發(fā)，其中包含無數(shù)的頁面，并且每個頁面將處于持續(xù)活動與更新的話，那么代碼重用將顯得十分有用。可以說擁有強大重用特性的框架，可以縮短您項目的準(zhǔn)備周期。
• 消除了跨瀏覽器的問題：我們在網(wǎng)站與應(yīng)用的構(gòu)建過程中，最怕出現(xiàn)在某些瀏覽器上運行或顯示不正常的情況。然而，由于CSS框架可以在任何瀏覽器上無縫地運行，因此您將不必擔(dān)心此類問題的發(fā)生。
• 確保標(biāo)準(zhǔn)結(jié)構(gòu)的一致性：前端框架通常由CSS、HTML和JavaScript文件組成。這些文件有助于確保所有元素(如設(shè)計、表單等)在頁面中的一致性。

[[319147]]

優(yōu)秀CSS框架

1. Bootstrap

最初被稱為Twitter Blueprint的Bootstrap，是作為內(nèi)部團隊使用的工具而創(chuàng)建的。它是最著名的前端框架之一。自公開發(fā)布以來，Bootstrap的使用率逐年攀升。

Bootstrap提供了報警、按鈕、輪播、下拉式菜單、以及表單等設(shè)計模板。借助Bootstrap的移動優(yōu)先(mobile-first)功能，您可以輕松地創(chuàng)建響應(yīng)式布局，進而保證在橫跨多個設(shè)備上的設(shè)計一致性。

2. Skeleton

Skeleton號稱“簡單的響應(yīng)式樣板”。由于此框架只有大約400行代碼，因此它更適合于小型項目，以及開發(fā)人員需要創(chuàng)建輕量級內(nèi)容的應(yīng)用場景。

由于布局簡單，Skeleton對于那些剛開始使用前端框架的人來說，是一個不錯的選擇。當(dāng)然，也正是缺少CSS設(shè)計模板、預(yù)處理器、以及整體功能，受限的Skeleton不太適合大型的項目。

3. ZURB Foundation

如果您正在尋找一種響應(yīng)迅速的前端框架，那么ZURB Foundation就比較適合。該框架將允許您為所有的設(shè)備創(chuàng)建各種生產(chǎn)環(huán)境的代碼和原型。通過支持具有“準(zhǔn)系統(tǒng)結(jié)構(gòu)(barebone structure)”的流行框架，ZURB Foundation讓用戶能夠使用簡單的方法及其入門模板，來快速生成產(chǎn)品原型。由于提交量不少于14,000次，而且貢獻者超過了940名，因此ZURB在GitHub上也有著大量的支持。目前，《華盛頓郵報》和《國家地理》等知名網(wǎng)站都使用的是該框架。

4. UI Kit

UI Kit以具有高度可定制的輕量級元素而聞名。它的各種模板能夠讓您輕地松構(gòu)建各類Web界面。UI Kit的安裝包里包含了CSS、HTML和JavaScript文件、以及Sublime Text和Atom編輯器的軟件包。另外，它還提供了30多種模塊化的組件，用戶可以對其進行混合與匹配，以實現(xiàn)多種功能。也就是說，您不必反復(fù)搜索那些標(biāo)記和類名。

與Bootstrap和Foundation等其他框架不同，UI Kit并非使用12列網(wǎng)格設(shè)置，而是將其布局分為了彈性、網(wǎng)格和寬度三個部分。當(dāng)然，由于缺乏資源，該框架更適合于那些具有豐富經(jīng)驗的開發(fā)人員。

5. Bulma

作為最常用的框架之一，Bulma得到了超過15萬名開發(fā)人員的支持。它是基于Flexbox的免費開源框架之一。由于Bulma框架僅完全能夠滿足開發(fā)響應(yīng)式網(wǎng)站的最低要求，因此它對于初學(xué)者來說十分容易上手。另外，得益于在GitHub上有著龐大的用戶社區(qū)，Bulma具有良好的技術(shù)支持。

6. Materialize

該前端CSS框架是根據(jù)Google的設(shè)計規(guī)范創(chuàng)建的。Materialize帶有易于使用的IZ列網(wǎng)格，以便很好地用于布局設(shè)計。它的程序包中包括有按鈕、卡片、表格、圖標(biāo)、以及許多其他可供按需使用的組件。此外，您還可能用到的功能包括：拖出式移動菜單、漣漪效果動畫、以及SASS mixins等。而且，Materialize可以在任何類型的設(shè)備上被使用。

7. Semantic UI

由于是一款較新的框架，因此Semantic UI在代碼中使用到了自然語言，而且備受初學(xué)者的鐘愛。它的繼承系統(tǒng)(inheritance system)帶有一個高級的主題變量，為您提供了設(shè)計時的完全自由度。

由于自帶有大量的第三方軟件庫，因此在使用Semantic UI時，您不必調(diào)用其他的庫，便可以讓W(xué)eb開發(fā)的過程更加便捷。這也是許多初學(xué)者和經(jīng)驗豐富的開發(fā)人員喜歡它的原因所在。

8. Tailwind CSS

Tailwind CSS與其他框架的不同之處在于，它的軟件包并沒有預(yù)建UI組件。該框架更關(guān)注于實用性。它包含有各種專注于顏色、大小和位置的CSS類。Tailwind適合于那些不滿足于預(yù)設(shè)組件，但希望能夠完全自由地定制Web設(shè)計的開發(fā)人員。

9. Picnic CSS

該框架非常輕巧，其壓縮后的代碼不到10KB。同時，Picnic CSS還帶有基于Flexbox的網(wǎng)格布局和許多UI元素。您可以使用它們來啟動自己的Web開發(fā)項目。另外，Picnic的模式窗口和導(dǎo)航欄，也對初學(xué)者非常友好。

10. Ionic

該開源的移動UI框架，可以讓用戶在不更改代碼庫的情況下，開發(fā)出適用于Android和iOS原生的，以及具有網(wǎng)絡(luò)高性能的應(yīng)用。Ionic帶有直觀的UI組件，可協(xié)助用戶加快網(wǎng)站或應(yīng)用程序的開發(fā)過程。由于提供了卓越的原生功能和速度，Ionic可以與社區(qū)、主流分析平臺、身份驗證服務(wù)、插件以及其他集成平臺，很好地配合使用。

11. Pure.css

該框架專注于移動優(yōu)先的理念。由于Pure.css是模塊化的，因此您可以輕松地按需導(dǎo)入元素包。同時，您還可以獲取它的各種可供下載與安裝的布局。以輕便聞名的Pure.css框架，在壓縮后只有3.8KB。

12. mini.css

mini.css同樣提供全面的功能和輕巧的框架。雖然它在壓縮后只有10KB，但仍然可以提供豐富的布局和UI元素。如果您想對它的工作原理做進一步了解，那么請查閱它的聯(lián)機文檔。

13. Base

如果您的主要任務(wù)是為所有的應(yīng)用程序和Web開發(fā)項目打下堅實的基礎(chǔ)，那么您應(yīng)該嘗試一下此模塊化的框架。作為號稱“堅如磐石”的響應(yīng)框架，Base基于Normalize.css提供了基本的可自定義樣式。您可以按需用它來實現(xiàn)簡單的應(yīng)用。

14. Concise CSS

Concise CSS也是一款簡單且實用的框架。該框架結(jié)構(gòu)緊湊、明快、且無需額外添加。當(dāng)然，如果您需要UI元素的話，也可以通過單獨的工具包來輕松地進行追加。

15. Mobi.css

壓縮后的Mobi.css僅為2.6KB，它是目前您可以找到的最小的框架之一。Mobi的優(yōu)勢在于速度，尤其是在針對移動設(shè)備的應(yīng)用場景中。由于Mobi.css內(nèi)置了主題和插件系統(tǒng)，而且可以按需擴展，因此用戶可以采用模塊化的方法，在其基礎(chǔ)上進行構(gòu)建。

總結(jié)

各類CSS框架為用戶提供了項目正常運行所需的基礎(chǔ)。開發(fā)人員可以更好地專注于應(yīng)用內(nèi)容和策略，并設(shè)計出具有快速響應(yīng)能力的網(wǎng)站。俗話說：工欲善其事，必先利其器。希望您能夠從上面的列表中，選擇出適合自己實際需求的框架。

原文標(biāo)題：How to Speed Up Your Design Process Using Modern CSS Frameworks，作者：Souvik Banerjee

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】