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

而網上有非常多的 CSS 工具，幫助設計師和開發者高效的工作和進行更多創新的創作，設計師和 web 開發者也把越來越多的 CSS 工具收入為自身的開發和設計利器。

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

1. Enjoy CSS

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

2. Keyframer

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

3. Wow.js

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

4. Jeet

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

5. Gridlover

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

6. Magic CSS3 Animation

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

7. Refills

Refills 中，Bourbon 提供 Sass 多態和消除特定前綴，為了更快的 CSS 編碼。Neat 提供一個輕量級的網格框架，Bitters 提供 Bourbon 或者 Neat 項目的架構和基礎變量。Refills 是預先包裝好的模式和組件，在 Bourbon，Bitters 和 Neat 的基礎上建立的。

8. CSS Perf

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

9. Progre(c)ss

Progre(c)ss 能很方便的創建純 CSS 進度條。用戶只需要包括樣式表，添加類到適當的元素中，再添加一個數據屬性就可以輕松創建進度條。

10. Normalize.CSS

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

#p#

11. iHOver

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

12. Sublime CSS Completions

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

13. Decss

Decss 幾乎是 CSS 驅動的演示框架，使用 CSS3 作為轉換。它提供響應式布局，內容布局 flexbox，甚至還支持演示者筆記。

14. Imacss

Imacss 是轉換圖像文件成為數據 URIs 的庫和應用，可以嵌入到單個 CSS 文件作為背景圖片。最基礎的，它能讓你減少你設計（比如圖標）的所有 HTTP 圖片請求。

15 Fluidity

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

16. Zen Grids

Zen Grids 是響應式網格系統，根據 Sass 構建。它能大大簡化布局的創建，通過移除大部分復雜的標記，使用純 CSS 和 HTML 來創建響應式基于網格的設計。

17. Progress.js

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

18. Bootflat

BootFlat 是開源平滑 UI 工具包，基于 Bootstrap 3.1.0 CSS 框架。它提供給 web 開發者快速，簡單，更少重復的方式創建優雅的 web 應用。它基于 Bootstrap 基礎來創建，使用平滑設計風格。

19. Sculpt

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

20. Animo.js

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

英文：codegeekz.com

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