摘要：一個(gè)叫的人用純重繪并模擬了種不同的移動(dòng)設(shè)備包括可以給你的網(wǎng)站添加不相關(guān)的獨(dú)立組件的一個(gè)庫(kù)。每一個(gè)組件都是針對(duì)移動(dòng)設(shè)備定制的，并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開(kāi)發(fā)移動(dòng)優(yōu)先的網(wǎng)站，并想要網(wǎng)站正常運(yùn)行在低版本的上，可以考慮。

眾所周知，CSS是非常棒的，它使網(wǎng)站看起來(lái)很漂亮，可以為網(wǎng)站添加動(dòng)畫(huà)，并讓呈現(xiàn)和內(nèi)容分離。去了解CSS的一切是非常難做到的，它只會(huì)變得更加困難,因?yàn)槲覀兿胱屛覀兊拇a跨瀏覽器兼容。
這里介紹了很多第三方工具，從簡(jiǎn)化工作流程到生成真正的CSS，這些工具都提供了我們需要的代碼，并且比我們自己寫(xiě)出的代碼運(yùn)行的更快。

Pure并不是一個(gè)框架。相反，它只是集成一些已經(jīng)應(yīng)用到模塊中的CSS代碼，方便我們使用。只需要為你的項(xiàng)目抓取你想要的那部分CSS代碼。當(dāng)然，所有組件都是可用的。Pure中包含了網(wǎng)格系統(tǒng)、按鈕、表格、表單和菜單，這些都是建立在normalize.css上的。

Magic Animations CSS3集成了 CSS3 Animations，可以被應(yīng)用在任何元素上，包含元素替換、滑出、變形和消褪等效果

Jeet和semantic.gs有點(diǎn)類似，是以SASS為基礎(chǔ)的網(wǎng)格系統(tǒng)。你可以在CSS中定義列（有時(shí)定義行），而不是為標(biāo)記元素添加Class。Jeet使響應(yīng)式布局更加容易，并進(jìn)一步分離了內(nèi)容和呈現(xiàn)。

一個(gè)叫Oleg的人用純CSS重繪并模擬了10種不同的移動(dòng)設(shè)備（包括iPhone 6, iPad Mini, Nexus 5, and Lumia 920）

可以給你的網(wǎng)站添加不相關(guān)的、獨(dú)立組件的一個(gè)庫(kù)。CodyHouse是用HTML、CSS和JavaScript建立的，你可以選擇各種各樣的導(dǎo)航、視差效果、分頁(yè)、模態(tài)窗口、頁(yè)面布局等等，每一個(gè)組件獨(dú)有讓你快速使用的教程。

如果你使用HTML、CSS和JavaScript是移動(dòng)APP，Ratchet應(yīng)該是一個(gè)不錯(cuò)的框架。每一個(gè)UI組件都是針對(duì)移動(dòng)設(shè)備定制的，并且它有很多你在傳統(tǒng)的HTML/CSS框架中看不到的功能。組件的默認(rèn)效果都是非常棒的。

Animo基于JQuery，能幫你更好的觸發(fā)CSS動(dòng)畫(huà)。你可以疊加動(dòng)畫(huà),或者第一次完成后觸發(fā)第二個(gè)動(dòng)畫(huà),并能同時(shí)利用CSS動(dòng)畫(huà)提供的硬件加速優(yōu)點(diǎn)。

將一個(gè)Photoshop圖層樣式文件轉(zhuǎn)換為CSS是一件很痛苦的事。幸運(yùn)的是,Adobe做了一個(gè)工具(運(yùn)行在瀏覽器中),允許你選擇某個(gè)圖層,將其屬性轉(zhuǎn)換為CSS代碼。您也可以選擇任何在線網(wǎng)站在PSD文件中使用的文本。

Sculpt基于SASS，是一個(gè)很好的框架。與其他已經(jīng)發(fā)布的框架相比，Sculpt支持被遺棄的低版本瀏覽器。如果你用SASS開(kāi)發(fā)移動(dòng)優(yōu)先的網(wǎng)站，并想要網(wǎng)站正常運(yùn)行在低版本的IE上，可以考慮Sculpt。

一個(gè)簡(jiǎn)單通用的CSS3屬性生成器。它不是很新，但是當(dāng)你忘了一些精確的語(yǔ)法時(shí)，它是非常有用的。

SASS的最愛(ài)了，Bourbon Neat是一個(gè)簡(jiǎn)單的語(yǔ)義網(wǎng)格系統(tǒng)，可以多帶帶使用，但它的設(shè)計(jì)是用 Bourbon mixin庫(kù)。

Enjoy CSS也是一個(gè)CSS3生成器，但有趣的是，它不僅僅是生成CSS3-related代碼,你還可以選擇你想要應(yīng)用的元素:一個(gè)div,文本輸入,一個(gè)按鈕,等等，用一種簡(jiǎn)單可視的方式得到你想要的確切效果。

從這里開(kāi)始創(chuàng)建你的keyframe-based CSS animations。只需要去這個(gè)網(wǎng)站學(xué)習(xí)一些教程。

Gumby是一個(gè)HTML/CSS框架，為那些喜歡在Ruby環(huán)境中工作的人設(shè)計(jì)的。你可以多帶帶下載它,當(dāng)然,但也打包為一個(gè)Ruby gem,Ruby gem是由那些這種技術(shù)的人創(chuàng)建的。

這有更多的CSS動(dòng)畫(huà),重點(diǎn)是做出一些改變（知道我說(shuō)什么嗎?），但是，他們?cè)陟乓麄兊脑诰€賺錢藝術(shù)（我不能容忍?。?/p> Bounce.JS

Bounce.JS結(jié)合了可視化（用于設(shè)計(jì)CSS3 動(dòng)畫(huà)）和JS庫(kù)（用于實(shí)現(xiàn)），對(duì)于那些喜歡視覺(jué)設(shè)計(jì)的人來(lái)說(shuō)，它的使用是非常簡(jiǎn)單的。

需要一個(gè)簡(jiǎn)單、可視化的方式去調(diào)整字體大小嗎？GridLover提供了一種簡(jiǎn)單的方式來(lái)預(yù)覽排版、設(shè)置勻稱的垂直和抓取CSS。你可以抓取CSS中字體的像素值、EMs, or REMs, 這些值會(huì)被格式成普通的CSS, SASS, LESS或其他代碼風(fēng)格。

想要快速設(shè)置CSS文件？一種方式是首先寫(xiě)HTML，然后設(shè)置ID、class等，將HTML代碼粘貼到ExtractCSS,Web APP會(huì)列出所有的選擇器，最后將它們放入CSS文件就行就可以了。

Kite是一個(gè)用于布局的CSS庫(kù)，其設(shè)計(jì)用到了CSS Flex模塊，但并不是完全使用Flex。Kite兼容IE8+。

需要確切地找出你的布局發(fā)生了什么?添加PesticideCSS文件。它將給頁(yè)面上的每個(gè)元素添加邊框,當(dāng)元素作為子層次結(jié)構(gòu)時(shí)，會(huì)巧妙地改變邊框顏色。簡(jiǎn)單,但讓人印象深刻。

疲憊的尋找不同的工具來(lái)對(duì)CSS進(jìn)行預(yù)處理,添加特定的前綴,包括IE過(guò)濾器?不介意使用命令行嗎?這是給你的。兼容SASS,LESS和Stylus

CSS友好的顏色名稱列表，包含了十六進(jìn)制和rgba格式。

一個(gè)小應(yīng)用程序,提供了一個(gè)方便的css相關(guān)的術(shù)語(yǔ)列表。選擇其中一個(gè),它將通過(guò)高亮一些示例代碼來(lái)說(shuō)明這個(gè)術(shù)語(yǔ)。

用純CSS建立復(fù)雜的三維模型。

用SASS和Compass建立CSS按鈕庫(kù)

CSS Menu Maker能幫助你建立簡(jiǎn)單、響應(yīng)式的導(dǎo)航

One% CSS Grid是一個(gè)12列的流布局網(wǎng)格系統(tǒng)，它是為構(gòu)建更快、成本更低的響應(yīng)式布局而設(shè)計(jì)的。

Simptip是由SASS制作的CSS提示框工具。不僅可以設(shè)置提示框的方向（上、右、下、左），還可以設(shè)置不同的顏色，例如成功色、信息色、警告色和危險(xiǎn)色。

Myth是一個(gè)CSS預(yù)處理器，這樣你只需要寫(xiě)CSS，不用去擔(dān)心低版本瀏覽器的支持，甚至低版本規(guī)范的改進(jìn)。

集成了CSS懸浮效果的代碼，可被用在鏈接、按鈕、logos、SVG和特色圖片等等。

CSS Animation Cheat Sheet是一組預(yù)設(shè)、即插即用的動(dòng)畫(huà)CSS庫(kù).你只需要將樣式表導(dǎo)入到你的網(wǎng)站，然后給你想要添加動(dòng)畫(huà)的元素添加類就行。

Spinkit包含了一些簡(jiǎn)單但非常棒的CSS動(dòng)畫(huà)加載效果

Typebase.CSS是一個(gè)很小的、可定制的排版樣式表。它同時(shí)又less和sass版本,因此可以很容易地修改和合并到現(xiàn)代web項(xiàng)目。

使你的CSS imager sprites變成可拖放的編輯器，并讓它為你寫(xiě)代碼。

CSS Ratiocinator是一個(gè)命令行工具，通過(guò)檢查實(shí)際的呈現(xiàn)效果，會(huì)清除掉沒(méi)用的CSS代碼。它非常適合應(yīng)用在一些CSS文件已經(jīng)超出控制的大項(xiàng)目。

美化CSS，如果你已經(jīng)得到了一個(gè)縮小的文件但不能找到原始(或你只是有點(diǎn)混亂的代碼)文件時(shí),代碼的美化可以通過(guò)適當(dāng)?shù)母袷交涂s進(jìn)修復(fù)。

在使用CSS Beautifier讓你的代碼變得可讀之后，你可以使用CSScomb運(yùn)行代碼，確保所有的屬性都按照字母表有規(guī)則的排序。記住，不是選擇器，而是屬性，例如寬度總是在字體聲明之后等等

一個(gè)動(dòng)畫(huà)庫(kù),為了擴(kuò)展CSS動(dòng)畫(huà)的功能而設(shè)計(jì)的，并且能同時(shí)為100個(gè)元素設(shè)置動(dòng)畫(huà)。

Recess是一個(gè)剝絨機(jī)程序,也可以作為一個(gè)編譯器運(yùn)行，目的是確保你的CSS符合一組規(guī)則并保持精簡(jiǎn)。每個(gè)規(guī)則可以多帶帶禁以滿足你的編碼風(fēng)格。

Bonus: A to Z CSS不是一個(gè)工具，但是對(duì)于初學(xué)者來(lái)說(shuō)是一個(gè)很好的資源。在A to Z，Guy Routledge為每一個(gè)CSS基本規(guī)則，如盒子模型及最常用的CSS屬性，提供了堅(jiān)實(shí)的課程。

譯文出處：http://www.ido321.com/1545.html
英文原文：40 tools for writing better CSS