【51CTO.com快譯】Web一直在不斷變化，而前端開發(fā)者們也一直在努力學(xué)習(xí)以適應(yīng)這股潮流中的種種現(xiàn)實(shí)要求。面向2017年，我們整理出35款最佳CSS工具，希望幫助大家在改進(jìn)前端開發(fā)流程的同時(shí)，讓您的日常工作更為輕松愉快。

1.CSS Reference

一份免費(fèi)視效指南，助您輕松掌握流行CSS屬性。

2.CSSPIN

其具備一組不同的交互式Pure CSS Loaders與Spinners，且建立于LESS Preprocessor基礎(chǔ)之上。各Pure CSS Loader與Spinner可輕松進(jìn)行定制，并被嵌入至開發(fā)項(xiàng)目中的單HTML元素當(dāng)中。

3.cssnano

可幫助大家輕松搞定CSS格式并引入多種優(yōu)化因素，從而確保最終成果盡可能滿足生產(chǎn)環(huán)境需求。

4.Pavilion

面向前端開發(fā)者，可從零開始實(shí)現(xiàn)多種創(chuàng)造性、探索性UI組件，從而為后續(xù)功能建立堅(jiān)實(shí)的實(shí)現(xiàn)基礎(chǔ)。

5.CSS Protips

一組提示集合，幫助大家快速成為CSS專家。

6.Picnic

一套助力項(xiàng)目起飛的出色CSS庫。

7.Micon

Micon圖標(biāo)提取自Windows 10并基于Font Awesome進(jìn)行了轉(zhuǎn)換，允許大家對其尺寸、色彩、投影及其它各類因素進(jìn)行定制。

8.Wing

提供一套樣式基礎(chǔ)，大家無需學(xué)習(xí)大量類名稱即可自動(dòng)建立起統(tǒng)一的元素樣式。

9.Brand-colors

一套適用于sass、less、stylus與css的色彩集合。

10.google-type

其中包含超過800種免費(fèi)谷歌字體，不過進(jìn)行字體配對并不輕松，且部分字體并不適用于典型網(wǎng)站。大家可以將其作為在當(dāng)前項(xiàng)目中使用谷歌字體庫的啟發(fā)性資源。

11.Mobi

一套專注于移動(dòng)端的輕量化靈活css框架。

12.minireset.css

一套小巧的現(xiàn)代CSS重置版。

13.Scrollanim

一套CSS3與JavaScript庫，可創(chuàng)建適用于各類環(huán)境的滾動(dòng)動(dòng)畫。

14.Materialette

輕松在桌面上訪問谷歌Material設(shè)計(jì)調(diào)色板中的各種顏色。

15.Starability

Starability評級機(jī)制完全通過HTML與CSS實(shí)現(xiàn)，可通過鍵盤使用，因此使用屏幕閱讀器的用戶亦可享受其便利。

16.Radiobox

小型CSS3動(dòng)畫集合，適用于表現(xiàn)無線電輸入內(nèi)容。

17.SpinThatShit

面向單一元素加載器與運(yùn)行器的SCSS集合。

18.Tootik

一套純CSS/SCSS/LESS工具提示庫，易于使用且無需JavaScript。

19.Family

包含26種出色的Sass mixins，以簡單而優(yōu)雅的方式對nth-child式元素進(jìn)行樣式管理。

20.Sprite Spirit

SCSS Mixin，具備出色的圖像處理能力。

21.Flex Layout Attribute

基于CSS flexbox規(guī)格的布局助手，利用兩項(xiàng)定制化html屬性——layout與self——快速實(shí)現(xiàn)flexbox效果。

22.tipograf

輕量化印刷庫。其適用于純CSS或者LESS。受到Medium的啟發(fā)，其能夠?qū)崿F(xiàn)良好的垂直排版效果。

23.Auroral

一組動(dòng)畫型背景梯度集合，幾乎適用于一切環(huán)境。

24.iconoo

有了它，您將不再需要外部圖標(biāo)資源。

25.text-spinners

純文本、純CSS、獨(dú)立字體、內(nèi)聯(lián)加載指示器。

26.Cutestrap

如果大家需要介于normalize.css與完整成熟框架之間的過渡性方案，那么體積僅為8kb CSS的Cutestrap絕對值得一試。

27.universal.css

一旦擁有，別無所求的CSS。

28.Kickoff

這是一套強(qiáng)大的CSS框架，提供大量合理的默認(rèn)設(shè)置以幫助大家在最短時(shí)間內(nèi)完成項(xiàng)目設(shè)計(jì)與運(yùn)行。

29.Stylecow

適用于所有瀏覽器的現(xiàn)代CSS。

30.SourceJS

SourceJS是一套動(dòng)態(tài)樣式指導(dǎo)平臺(tái)，允許用戶基于任意技術(shù)將多種項(xiàng)目UI組件加以結(jié)合。

31.CSSTree

對CSS語法有效性進(jìn)行快速詳盡解析。

32.Emmet

利用Emmet，您能夠輸入可動(dòng)態(tài)解析的CSS類表達(dá)式，并根據(jù)所輸入的縮寫生成輸出結(jié)果。Emmet面向大量使用HTML/XML與CSS的Web開發(fā)工作流進(jìn)行開發(fā)與優(yōu)化，但也可配合其它編程語言使用。

33.Easing Functions Cheat Sheet

簡單的備忘單，幫助開發(fā)者選擇正確功能。

34.Browserdiet

終極前端性能指南。

35.Awesome search

此網(wǎng)站能夠讓您更快獲取各類優(yōu)秀資源。

原文鏈接：http://bashooka.com/coding/35-best-css-tools-for-2017/

原文標(biāo)題：35 Best CSS Tools For 2017

原文作者：HENRI WIJAYA

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