說到 WEB 設(shè)計(jì)，不得不介紹介紹 CSS 工具，CSS 工具在這里面扮演很重要的角色，可以簡(jiǎn)化無數(shù)開發(fā)者和設(shè)計(jì)師的工作，寫出更好的 CSS 代碼。

而網(wǎng)上有非常多的 CSS 工具，幫助設(shè)計(jì)師和開發(fā)者高效的工作和進(jìn)行更多創(chuàng)新的創(chuàng)作，設(shè)計(jì)師和 web 開發(fā)者也把越來越多的 CSS 工具收入為自身的開發(fā)和設(shè)計(jì)利器。

在這篇文章中，我們羅列了 2014 年***的 20 款 CSS 工具，希望能幫助大家簡(jiǎn)化自己的開發(fā)工作，創(chuàng)作出更多更好的創(chuàng)新作品。Enjoy！

1. Enjoy CSS

EnjoyCSS 能創(chuàng)建活躍，超棒的實(shí)例，EnjoyCSS 生成器大大簡(jiǎn)化了自定義類聲明。EnjoyCSS 是眾多 CSS 工具中非常有用的，也是開發(fā)者和設(shè)計(jì)師工具箱必備的利器之一。它能加快工作流，簡(jiǎn)單易用，不需要編碼就能整合豐富的圖形樣式到簡(jiǎn)單的 UI。

2. Keyframer

Keyframer 是非常值得信賴的，簡(jiǎn)單易用的 CSS3 動(dòng)畫創(chuàng)建工具。用戶只需要點(diǎn)擊相應(yīng)的按鈕就可以添加動(dòng)畫效果，插入相應(yīng)的動(dòng)畫 CSS 代碼。點(diǎn)擊 X 按鈕就可以刪除掉當(dāng)前的效果，測(cè)試動(dòng)畫效果。

3. Wow.js

Wow.js 允許用戶滾動(dòng)頁面的時(shí)候展示 CSS 動(dòng)畫。默認(rèn)的，用戶可以使用它來出發(fā) animate.css 動(dòng)畫。但是用戶也可以非常容易修改設(shè)置喜歡的動(dòng)畫庫。Wow.js 比其他 JavaScript 視差插件小，類似 Scrollorama（這個(gè)非常華麗，但是也更繁雜）。Wow.js 非常容易安裝和使用。如果你使用 Wow.js，你可以非?？斓膯?dòng)，執(zhí)行代碼。

4. Jeet

Jeet 是市場(chǎng)上***進(jìn)的網(wǎng)格系統(tǒng)，可以把它當(dāng)作 Semantic.gs 的精神繼承者。使用這些強(qiáng)大的預(yù)處理器，我們可以通過分?jǐn)?shù)（浮點(diǎn)數(shù)）作為限制來生成基于百分比的寬度和網(wǎng)格槽，可以在維護(hù)無限循環(huán)槽的時(shí)候使用這個(gè)功能。 Jeet 允許用戶像人類描述頁面網(wǎng)格一樣表達(dá)頁面網(wǎng)格。使用 Jeet，不會(huì)有多余的嵌套元素，沒有十二列的規(guī)則，不需要多少代碼就能更快的綁定 Jeet，更靈活。

5. Gridlover

Gridlover 提供字體大小，行高和頁面空白的可調(diào)節(jié) CSS。默認(rèn) CSS 輸出是針對(duì) body，p 和 h1-h4 標(biāo)題，但是用戶可以通過編輯 CSS 來申請(qǐng)調(diào)節(jié)任意元素的可調(diào)節(jié)值。只需要簡(jiǎn)單的拖拽頂部工具欄左邊和右邊的數(shù)值來調(diào)節(jié)數(shù)值，Gridlover 的元素總是保持***像素基準(zhǔn)網(wǎng)格對(duì)齊。Gridlover 字體大小是通過調(diào)整標(biāo)題水平的比例因子來計(jì)算的。行高會(huì)自動(dòng)適應(yīng)字體的大小。

6. Magic CSS3 Animation

Magic CSS3 Animations 是 CSS3 動(dòng)畫的包，伴有特殊的效果，用戶可以自由的在 web 項(xiàng)目中使用。Magic CSS3 Animations 結(jié)構(gòu)非常簡(jiǎn)單，包括 CSS 樣式：magic.css 或者是 mynified 版本：magic.min.css。

7. Refills

Refills 中，Bourbon 提供 Sass 多態(tài)和消除特定前綴，為了更快的 CSS 編碼。Neat 提供一個(gè)輕量級(jí)的網(wǎng)格框架，Bitters 提供 Bourbon 或者 Neat 項(xiàng)目的架構(gòu)和基礎(chǔ)變量。Refills 是預(yù)先包裝好的模式和組件，在 Bourbon，Bitters 和 Neat 的基礎(chǔ)上建立的。

8. CSS Perf

CSS-perf 能簡(jiǎn)化一些超級(jí)不合理的 CSS 測(cè)試，使得這些測(cè)試更***。因?yàn)橐话闱闆r下，web 頁面的 CSS 測(cè)試都是圍繞確定有效的方法和技術(shù)。

9. Progre(c)ss

Progre(c)ss 能很方便的創(chuàng)建純 CSS 進(jìn)度條。用戶只需要包括樣式表，添加類到適當(dāng)?shù)脑刂?，再添加一個(gè)數(shù)據(jù)屬性就可以輕松創(chuàng)建進(jìn)度條。

10. Normalize.CSS

Normalize.css 是為 HTML5 準(zhǔn)備的，可以替代之前的進(jìn)行瀏覽器重置。它你呢個(gè)更精確的渲染所有元素，并且統(tǒng)一跨瀏覽器，只針對(duì)規(guī)范化風(fēng)格，通過檢測(cè)瀏覽器默認(rèn)設(shè)置來重置樣式。

#p#

11. iHOver

iHover 是使人印象非常深刻的懸停效果集合，是通過純 CSS3 實(shí)現(xiàn)的，沒有任何依賴，而且跟 Bootstrap3 結(jié)合的非常好。它隨著 Scss CSS 來構(gòu)建，使用變量，非常方便進(jìn)行修改。iHover 會(huì)提供模塊化代碼，不需要包括整個(gè)文件。

12. Sublime CSS Completions

Sublime CSS Completions 是 Sublime Text CSS 自動(dòng)完成庫，比 Sublime Text 標(biāo)準(zhǔn)的 CSS 完成功能更完整。目前只支持屬性自動(dòng)補(bǔ)齊，未來將會(huì)自動(dòng)補(bǔ)齊有效的參數(shù)值。

13. Decss

Decss 幾乎是 CSS 驅(qū)動(dòng)的演示框架，使用 CSS3 作為轉(zhuǎn)換。它提供響應(yīng)式布局，內(nèi)容布局 flexbox，甚至還支持演示者筆記。

14. Imacss

Imacss 是轉(zhuǎn)換圖像文件成為數(shù)據(jù) URIs 的庫和應(yīng)用，可以嵌入到單個(gè) CSS 文件作為背景圖片。最基礎(chǔ)的，它能讓你減少你設(shè)計(jì)（比如圖標(biāo)）的所有 HTTP 圖片請(qǐng)求。

15 Fluidity

Fluidity 是極小 CSS 庫，并且彌補(bǔ)了一部分 HTML 不是完全響應(yīng)式的缺點(diǎn)。它修改了圖片，表，格式化文本和 canvas 元素的方式，所以是完全響應(yīng)式的。

16. Zen Grids

Zen Grids 是響應(yīng)式網(wǎng)格系統(tǒng)，根據(jù) Sass 構(gòu)建。它能大大簡(jiǎn)化布局的創(chuàng)建，通過移除大部分復(fù)雜的標(biāo)記，使用純 CSS 和 HTML 來創(chuàng)建響應(yīng)式基于網(wǎng)格的設(shè)計(jì)。

17. Progress.js

ProgressJs 是 JavaScript 和 CSS3 庫，幫助開發(fā)者創(chuàng)建和管理頁面每個(gè)對(duì)象的進(jìn)度條。用戶可以設(shè)計(jì)自己的進(jìn)度條模板或者自定義進(jìn)度條。

18. Bootflat

BootFlat 是開源平滑 UI 工具包，基于 Bootstrap 3.1.0 CSS 框架。它提供給 web 開發(fā)者快速，簡(jiǎn)單，更少重復(fù)的方式創(chuàng)建優(yōu)雅的 web 應(yīng)用。它基于 Bootstrap 基礎(chǔ)來創(chuàng)建，使用平滑設(shè)計(jì)風(fēng)格。

19. Sculpt

Sculpt 是輕量級(jí)的，移動(dòng)端優(yōu)先的響應(yīng)式 HTML，CSS 和 SASS 框架。Sculpt 是專為屏幕比較小的設(shè)備準(zhǔn)備的，增加了許多復(fù)雜性，通過媒體查詢來增加不動(dòng)產(chǎn)。無論什么條件下提供三個(gè)大小 (732px, 960px 和 1140px) ，用戶需要確定內(nèi)容能適應(yīng)這三個(gè)屏幕大小。

20. Animo.js

Animo.js  是一個(gè)開源的、強(qiáng)大的CSS動(dòng)畫管理工具，你可以非常方便地管理Web應(yīng)用中的CSS動(dòng)畫，同時(shí)你也可以將它當(dāng)作一個(gè)動(dòng)畫庫來使用。

英文：codegeekz.com

譯文來自：http://www.oschina.net/news/52919/20-best-css-tools-for-2014