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