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

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

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

1. Enjoy CSS

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

2. Keyframer

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

3. Wow.js

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

4. Jeet

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

5. Gridlover

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

6. Magic CSS3 Animation

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

7. Refills

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

8. CSS Perf

CSS-perf 能簡化一些超級不合理的 CSS 測試，使得這些測試更***。因為一般情況下，web 頁面的 CSS 測試都是圍繞確定有效的方法和技術(shù)。

9. Progre(c)ss

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

10. Normalize.CSS

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

#p#

11. iHOver

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

12. Sublime CSS Completions

Sublime CSS Completions 是 Sublime Text CSS 自動完成庫，比 Sublime Text 標準的 CSS 完成功能更完整。目前只支持屬性自動補齊，未來將會自動補齊有效的參數(shù)值。

13. Decss

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

14. Imacss

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

15 Fluidity

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

16. Zen Grids

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

17. Progress.js

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

18. Bootflat

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

19. Sculpt

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

20. Animo.js

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

英文：codegeekz.com

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