在過(guò)去的幾年中，CSS已經(jīng)成為一大部分開(kāi)發(fā)者和設(shè)計(jì)者的最?lèi)?ài)，因?yàn)樗峁┝艘幌盗泄δ芎吞匦浴Ｃ總€(gè)月都有無(wú)數(shù)個(gè)圍繞CSS的工具被開(kāi)發(fā)者發(fā)布以簡(jiǎn)化WEB開(kāi)發(fā)。像CSS 庫(kù)，框架，應(yīng)用這樣的工具能夠?yàn)殚_(kāi)發(fā)者做很多事，而且可以使開(kāi)發(fā)者創(chuàng)造出創(chuàng)新立異的WEB應(yīng)用。

在這篇文件章中我們找到了一系列對(duì)開(kāi)發(fā)者有用的CSS庫(kù)，它們能幫助開(kāi)發(fā)者在一定的期限內(nèi)取得有創(chuàng)造性和創(chuàng)新性的成果。我們希望這個(gè)列表能有助于您的開(kāi)發(fā)并為您提供方便。盡情享受吧！

1. Kite

Kite是一個(gè)靈活的布局助手CSS庫(kù)。Kite使用`inline-block`而不是最新的CSS語(yǔ)法。它注重實(shí)際，易于理解且容易使用。Kite用法與flexbox相似：justify-content,等等。你可以很輕松地創(chuàng)建復(fù)雜的模塊。Kite是基于OOCSS 與 MindBEMding，它可以幫助您快速構(gòu)建自己的組件。Kite支持幾乎所有瀏覽器，它屬于MIT許可。

2. DynCSS

DynCSS 將您的CSS解析成-dyn-(attribute)規(guī)則。這些規(guī)則是模擬瀏覽器事件(如滾動(dòng)和縮放)的javascript表達(dá)式。其結(jié)果會(huì)應(yīng)用到上面指出的CSS屬性。你可以將任何CSS屬性設(shè)置為動(dòng)態(tài)--前提是它對(duì)于jQuery的css()方法是可寫(xiě)的。你可以通過(guò)附加-dyn-前綴并指定一個(gè)引用的javascript表達(dá)式來(lái)實(shí)現(xiàn)。

3. Progressjs

ProgressJs 是一個(gè) JavaScript 和CSS3庫(kù)，可以幫助開(kāi)發(fā)者創(chuàng)建和管理頁(yè)面上所有元素的進(jìn)度。你可以設(shè)計(jì)自己的進(jìn)度條模板并且可以輕松自定義它。你也可以用ProgressJs 來(lái)為用戶(hù)顯示內(nèi)容加載（圖片，視頻等）的進(jìn)度。它可以用在textbox，textarea 甚至整個(gè)body上。

4. Hover.CSS

Hover.CSS 是一個(gè)有用的CSS3懸停效果集合，可用于動(dòng)作調(diào)用，按鈕，商標(biāo)，特性圖片等。 自定或直接應(yīng)用到你自己的元素上都非常的簡(jiǎn)單。 hover.css可以用多種方式來(lái)使用; 可以復(fù)制粘貼你喜歡的效果到你自己的樣式表里，也可以引用樣式表。然后只需向你想要的元素需添加對(duì)應(yīng)效果的class名稱(chēng)即可。如果你只打算使用一個(gè)或幾個(gè)效果，最佳實(shí)踐是復(fù)制粘貼一個(gè)效果。

5. Spinkit

Spin kit是一個(gè)酷炫的加載動(dòng)畫(huà)CSS集合。 Spinkit使用CSS動(dòng)畫(huà)來(lái)創(chuàng)建吸引人的易于自定義的動(dòng)畫(huà)。該集合目標(biāo)不是提供所有瀏覽器的解決方案--如果你需要支持哪些還沒(méi)實(shí)現(xiàn)CSS動(dòng)畫(huà)屬性（像是IE9及之前的版本）的瀏覽器，你需要檢測(cè)下這些動(dòng)畫(huà)屬性并實(shí)現(xiàn)一個(gè)變通方案。

6. Magic CSS3 Animation

Magic CSS3 Animations 是一個(gè)特殊效果的CSS3動(dòng)畫(huà)庫(kù)，你可以免費(fèi)用于你的web項(xiàng)目。簡(jiǎn)單的引用CSS樣式：magic.css或精簡(jiǎn)版magic.min.css即可。

7.Bounce.js

Bounce.js是一個(gè)用來(lái)生成不錯(cuò)的CSS3驅(qū)動(dòng)關(guān)鍵幀動(dòng)畫(huà)的工具。用于生成動(dòng)態(tài)動(dòng)畫(huà)的JS庫(kù)是在該工具中投入使用。簡(jiǎn)單地添加一個(gè)組件，選擇預(yù)設(shè)，然后你就會(huì)得到一個(gè)短URL地址或者導(dǎo)出到CSS。

8. ImaCSS

Imacss是用來(lái)將圖像文件轉(zhuǎn)換為數(shù)據(jù)地址的庫(kù)和應(yīng)用。該地址可以用來(lái)插入到CSS文件中作為背景圖片。本質(zhì)上來(lái)講，它能讓你減少所有你對(duì)你設(shè)計(jì)的圖片（如圖標(biāo)等）的HTTP請(qǐng)求，并使之能夠單個(gè)調(diào)用。

9.Buttons

Buttons是一個(gè)可以創(chuàng)建高度自定義、靈活和現(xiàn)代感十足的web按鈕的CSS庫(kù)。該庫(kù)由Sass+Compass構(gòu)建，支持正方形、圓角矩形或者圓形的按鈕，并且可選是否扁平以及其他自定義的效果（如發(fā)光）。所使用到的尺寸、顏色、效果和字體可以通過(guò)變量的幫助進(jìn)行修改，并且可以非常容易的進(jìn)行擴(kuò)展。

10.OdoMeter

OdeMeter是一個(gè)用來(lái)創(chuàng)建一些我們比較熟悉的如“汽車(chē)?yán)锍田@示，機(jī)場(chǎng)信息板或角子機(jī)”等效果或者面板的JavaScript-CSS庫(kù)。該庫(kù)是獨(dú)立式+輕量級(jí)（3kb）的，使用CSS為效果進(jìn)行轉(zhuǎn)換，所以效率極高（當(dāng)然也有回退設(shè)置）。它簡(jiǎn)單地將一個(gè)給定的元素轉(zhuǎn)換到另一個(gè)具有單行函數(shù)的預(yù)定義的值。

11. Single Element CSS Spinner

Single Element CSS Spinners是一個(gè)CSS螺旋動(dòng)畫(huà)加載的集合。每個(gè)旋轉(zhuǎn)包含一個(gè)使用‘loader’ class的div，其文本內(nèi)容為‘Loading…’。文本是為屏幕閱讀器使用的且可用作老瀏覽器的后退的狀態(tài)。

12. Ani.js

AniJS是一個(gè)CSS動(dòng)畫(huà)的聲明處理庫(kù)，它能夠使開(kāi)發(fā)更便利且能提高開(kāi)發(fā)速度。它文檔完善且易于上手。

13. Beautons

Beautons是一個(gè)用來(lái)創(chuàng)建漂亮、簡(jiǎn)潔按鈕的易用庫(kù)。你可以應(yīng)用各種樣式、函數(shù)已經(jīng)其他的更多內(nèi)容到按鍵上，包括改變它們的大小，設(shè)置它們的可用與否以及更多設(shè)置。

14. Saffron

Saffron是一系列Sass混合器和助手集，能夠使添加CSS3的動(dòng)畫(huà)和過(guò)渡非常簡(jiǎn)單。只需要包括一個(gè)mixin在SASS聲明中，然后使用變量和混合參數(shù)設(shè)置一些配置。使用Saffron，你能夠完全控制動(dòng)畫(huà)和過(guò)渡的行為。

15. CSS Shakes

這是一個(gè)能夠震動(dòng)和晃動(dòng)‘DOM’的CSS類(lèi)集合。

16. Typebase.css

Typebase.css是個(gè)最小化的、可定制的字體樣式表。它有l(wèi)ess和SASS版本，所以能夠很容易地修改融入現(xiàn)代的Web項(xiàng)目。它提供了所有排版所必要的基礎(chǔ)工具且不需添加其他任何設(shè)計(jì)內(nèi)容。它被創(chuàng)建用來(lái)完成項(xiàng)目發(fā)展和成長(zhǎng)期時(shí)的修改，能和normalize.css很好的工作。

17. Sassline

在web上使用Sass & rems設(shè)置文本到基線(xiàn)網(wǎng)格。Sassline可以用在博客、prototyping以及其他Web項(xiàng)目。它有建議的基礎(chǔ)字體樣式和混合比例已達(dá)到基線(xiàn)網(wǎng)格的良好配合。為每個(gè)斷點(diǎn)選擇一個(gè)modular-scale，其運(yùn)行響應(yīng)將會(huì)更好。

18. TypeSettings

一個(gè)Sass工具包，基于modular scale有Ems風(fēng)格，縱向風(fēng)格，響應(yīng)比基于headlines。

19. Type Rendering Mix

Type Rendering Mix是個(gè)小型的JavaScript庫(kù)，它允許只有使用核心文本時(shí)（在iOS和OS X上）才應(yīng)用樣式，在實(shí)現(xiàn)更一致的渲染同時(shí)保持高精度原態(tài)。

20. Hint.css

Hint.css是一個(gè)使用SASS構(gòu)建只使用CSS和HTML的提示庫(kù)。該庫(kù)使用數(shù)據(jù)屬性、內(nèi)容屬性、偽元素以及CSS3轉(zhuǎn)換。提示框簡(jiǎn)潔漂亮，有箭頭且可放置在父元素的任何一邊。

英文原文：20 Useful CSS Libraries for Web Development

譯文來(lái)自：http://www.oschina.net/translate/css-libraries-for-developers