17款面向CSS開發(fā)人員的實(shí)用框架及工具
譯文幾乎每一天我們都以找到值得分享的實(shí)用工具，幫助大家在CSS開發(fā)這條探索之路上找到新的光明前景與幾乎無盡的可能性。遙想當(dāng)初，我們一路見證了CSS的成長，而如今我們能夠不容置疑地?cái)嘌?，CSS已經(jīng)成為Web開發(fā)領(lǐng)域的PhotoShop。
就在幾個(gè)月之前，我們曾經(jīng)列舉過一些能夠幫助大家簡化開發(fā)任務(wù)的出色CSS工具，而去年我們也發(fā)布過兩篇關(guān)于CSS的博文——其中主要探討了如何利用CSS繪圖工具以及對CSS框架及網(wǎng)格系統(tǒng)進(jìn)行最小化處理（以上各鏈接皆為英文原文）以創(chuàng)建出令人驚艷的彩色拼貼圖案。
在今天的文章中，我們將從其它角度著眼，繼續(xù)就CSS展開探討。如果大家打算投身于Web設(shè)計(jì)與開發(fā)工作當(dāng)中，并發(fā)現(xiàn)自己需要經(jīng)常使用CSS來處理日常任務(wù)，那么此份清單中所列舉的工具及框架將成為很好的立足根基。從這里出發(fā)，各位將一步步了解到業(yè)界大牛們是如何運(yùn)用此類工具完成杰作的。
最后提一句，也歡迎各位將自己最喜愛的方案選項(xiàng)通過評論分享給更多朋友。
SMACSS的惟一關(guān)注重點(diǎn)就是效率，特別是針對身處團(tuán)隊(duì)環(huán)境下的用戶朋友們。大家是否曾經(jīng)發(fā)現(xiàn)自己處在被動狀態(tài)，需要不斷編寫并重寫CSS代碼才能讓一切正常運(yùn)作？SMACSS正是為了此類希望在大型項(xiàng)目當(dāng)中編寫簡單代碼，而又不希望純粹依靠生成大量代碼的方式完成任務(wù)的朋友們所準(zhǔn)備。如果大家感興趣，請點(diǎn)擊此處查看來自Envato網(wǎng)站的一篇簡介文章，這也是最適合的SMACSS起步指南。
Unsemantic是一款流體網(wǎng)格系統(tǒng)，其屬于960 Grid System的繼任解決方案。它的工作方式與前輩差不多，但摒棄了原本的大量列數(shù)，其轉(zhuǎn)而以百分比作為基礎(chǔ)。Unsemantic看起來似乎將一部分注意力放在了搜索引擎功能方面，同時(shí)也考慮到了如何利用其改進(jìn)整體代碼對于機(jī)器人機(jī)制的可閱讀性。
就目前來看，市面上的大多數(shù)CSS框架仍然顯得不夠成熟，其中大部分仍然要求我們以特定方式編寫代碼，而這自然也就帶來了額外的學(xué)習(xí)與整合難度曲線。Susy則是一款出色的網(wǎng)格系統(tǒng)，允許大家以自己最為熟悉的方式完成代碼編寫工作，而用不著再學(xué)習(xí)諸多保證開發(fā)任務(wù)順暢實(shí)現(xiàn)的必要知識。感興趣的朋友可以點(diǎn)擊此處查看Zell-Weekeat.com網(wǎng)站上的文章，了解Susy如何幫助各位構(gòu)建出更為出色的Web設(shè)計(jì)成果。
大家是不是屬于需要頻繁訪問GitHub的?？停课也麓鸢付喟胧强隙ǖ?。不過各位可能還沒有意識到，GitHub其實(shí)是使用自己的一款內(nèi)部CSS工具包來支撐整套網(wǎng)站的。這意味著我們見到的幾乎一切都遵循著一種特定風(fēng)格，包括布局、按鈕樣式乃至字體選擇等等。就在今年，這款工具包已經(jīng)以開源姿態(tài)走到我們面前，這就是Primer。感興趣的朋友可以點(diǎn)擊此處在Markdotto.com網(wǎng)站上查看這款新型工具包的簡介文章。
#p#
時(shí)至今日，Web已經(jīng)成為一臺出產(chǎn)豐富的機(jī)器，我們單憑各類Web開發(fā)語言即可拿出令人眼花繚亂的成果。而在這方面，我們擁有Loaders.css助陣; 這是一款體積小巧的庫，能夠提供28款獨(dú)特的載入器，并允許大家直接拿來加以使用。
Jeet不僅是我個(gè)人長久以來所見過的最出色的網(wǎng)站，其同時(shí)也是我在整個(gè)工作經(jīng)歷當(dāng)中遇到過的最理想的網(wǎng)格系統(tǒng)——而且我敢肯定，我絕不是惟一一個(gè)作此論斷的用戶。Jeet事實(shí)上是一款CSS預(yù)處理工具。在它的幫助下，我們不再受到.col-6等類的局限; 相反，大家能夠?qū)⑷魏畏謹(jǐn)?shù)、小數(shù)或者兩者的結(jié)合添加進(jìn)去，從而創(chuàng)建出一套完全自定義而成的網(wǎng)格方案。
相信大家一定會愛上Transformicons，因?yàn)樗浞诛@示出JavaScript與CSS相結(jié)合后能夠創(chuàng)造出怎樣令人驚艷的成果。Transformicons是一套庫，旨在幫助大家將SCG與CSS圖標(biāo)轉(zhuǎn)化成不同形狀。
這套CSS3 Collection能夠幫助大家將懸停功能引入到各類鏈接、按鈕、標(biāo)志、SVG乃至特色圖像等對象之上。在它的支持下，我們可以輕松應(yīng)用自己的元素，修改或者直接使用自己的創(chuàng)意與靈感。Hover適用于CSS、Sass以及LESS。它也能夠?qū)崿F(xiàn)我們在iPhone應(yīng)用程序當(dāng)中常見的各種懸停效果，這也進(jìn)一步證明了在不久的將來，我們將有能力直接以Web方式開發(fā)移動應(yīng)用程序。
#p#
Bourboun原本曾被冠以多種不同的名頭，但不管名稱如何、它最引人注目的特性仍然在于作為Bootstrap可靠備選方案的重要作用。就本身而言，Bourbon屬于一套輕量級框架; 但在與其它有趣的軟件包相結(jié)合之后，它也能夠變身成一款強(qiáng)大而且簡潔的框架、幫助大家創(chuàng)建并編寫?yīng)毩⒋a。
Spritebox是一款適用于所有Sprites用戶的解決方案，它同時(shí)也是一款所見即所得類型的工具——因此我們沒必要針對它的功能另行贅言。需要強(qiáng)調(diào)的是，它可能是目前我們能夠找到的、可利用單一sprite圖像生成CSS的最便捷解決方案之一。
Font Awesome之所以能夠被納入此次榜單，理由非常簡單：它是目前面向CSS開發(fā)者群體的最具人氣的字體資源。沒有哪個(gè)項(xiàng)目能夠在不具備理想字體屬性的條件下順利完成，而這套資源則是大家所能獲得的最佳選擇。就在不久之前，我們還剛剛發(fā)布了一份SVG圖標(biāo)資源清單（點(diǎn)擊此處查看，英文原文），其中包含大量值得關(guān)注的方案。此外，各位可能還會對Font Awesome to PNG這一服務(wù)抱有興趣，其作用是將Font Awesome圖標(biāo)輕松快捷地轉(zhuǎn)換為獨(dú)立圖像。
Stitches是一款HTML 5 sprite表生成工具。對它，我們沒有太多需要贅述的，上傳圖像后即可輕松獲取到sprite表——就這么簡單。
#p#
如果大家打算像專業(yè)人士那樣編寫CSS，那么Sass絕對是各位的最佳選擇——或者至少是最佳選擇之一?？傮w而言，它能夠讓我們的CSS編碼工作改頭換面，從而使大家感受到如何使用真正的編程語言那樣的編寫過程。在這里，我們強(qiáng)烈推薦大家點(diǎn)擊此處查看Sass使用指南——它將為各位節(jié)約下大量用于摸索的時(shí)間！
Less又是另一款出色的CSS預(yù)處理工具，而且在過去幾個(gè)月當(dāng)中相關(guān)社區(qū)內(nèi)還針對Less能否繼續(xù)保持發(fā)展態(tài)勢而進(jìn)行了一番討論。一部分技術(shù)人員認(rèn)為現(xiàn)在是時(shí)候完全投入Sass的懷抱了，但也有一些持不同的觀點(diǎn)。值得一提的是，Chris Coyer也加入到了這場熱火朝天的討論當(dāng)中，感興趣的朋友可以點(diǎn)擊此處查看相關(guān)內(nèi)容（英文原文）。
PHP在預(yù)處理樣式表方面擁有著驚人的實(shí)力。PHP同樣有能力處理自己的內(nèi)部變量，并以實(shí)時(shí)方式在樣式表處理過程中同代碼進(jìn)行協(xié)作。這套動態(tài)環(huán)境允許大家完成各類具有深度且復(fù)雜性較高的設(shè)計(jì)。Turbine CSS在很大程度與Sass比較類似，其能夠利用各類獨(dú)立PHP插件的優(yōu)勢以實(shí)現(xiàn)多種功能，具體包括瀏覽器定位以及高級設(shè)計(jì)變量等等。感興趣的朋友可以點(diǎn)擊此處（英文原文），通過這篇文章了解Turbine的作用與能力。
我們在今天的文章中著力強(qiáng)調(diào)了各類預(yù)處理解決方案，但各款上榜工具都在努力通過獨(dú)具特色的方式提供不同的實(shí)現(xiàn)角度，Myth當(dāng)然也不例外。Myth最大的差異之處在于，它無法真正使用獨(dú)特的語法機(jī)制，而是根據(jù)每款瀏覽器的各自支持能力、起效規(guī)范以及參考建議給出彼此不同的解決途徑。就目前來看，隨著各類規(guī)范的不斷發(fā)展，我們的最終目標(biāo)將是不借助Myth的力量而將各種瀏覽器納入統(tǒng)一范疇。這有點(diǎn)像是以尚未真正到來的方式編寫CSS代碼。
Stylus是一種革命性的新型語言，其允許使用者以一種有效的、動態(tài)的表達(dá)方式來生成CSS代碼。此外，它還同時(shí)支持縮進(jìn)語法與常規(guī)CSS樣式。
原文標(biāo)題：17 Useful Frameworks and Tools for CSS Developers
