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

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

[[319146]]

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

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

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

[[319147]]

優(yōu)秀CSS框架

1. Bootstrap

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

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

2. Skeleton

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

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

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讓用戶能夠使用簡(jiǎn)單的方法及其入門模板，來快速生成產(chǎn)品原型。由于提交量不少于14,000次，而且貢獻(xiàn)者超過了940名，因此ZURB在GitHub上也有著大量的支持。目前，《華盛頓郵報(bào)》和《國(guó)家地理》等知名網(wǎng)站都使用的是該框架。

4. UI Kit

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

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

5. Bulma

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

6. Materialize

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

7. Semantic UI

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

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

8. Tailwind CSS

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

9. Picnic CSS

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

10. Ionic

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

11. Pure.css

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

12. mini.css

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

13. Base

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

14. Concise CSS

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

15. Mobi.css

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

總結(jié)

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

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

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