CSS作為(wèi)網頁設計(jì)制作的一門(mén)基礎語言，在網頁設計(jì)中，它表現出了其獨特的優勢。例如更簡潔的語言，模塊化的結構。
對于頁面開(kāi)發而言是設計(jì)排版的改進、對于訪客用戶而言則是有(yǒu)助浏覽速度的提高(gāo)。而在開(kāi)發維護以及在做被搜索時(shí)的SEO，使用CSS都是目前最好的選擇。為(wèi)了更好的對CSS進行(xíng)開(kāi)發，我們可(kě)以選擇一些(xiē)有(yǒu)幫助的工具。
下面來(lái)看看有(yǒu)哪些(xiē)實用CSS工具：
Base
Base是一款輕量級CSS預處理(lǐ)工具，能夠将代碼編譯為(wèi)SASS(即Syntactically Awesome CSS)或者LESS(Leaner CSS)。盡管已經有(yǒu)很(hěn)多(duō)框架放棄了IE浏覽器(qì)的支持，Base仍然堅定扮演着IE擁護者的角色，Matthew Hartman表示——他設計(jì)Base的初衷在于幫助設計(jì)師(shī)們編寫出更為(wèi)簡潔且結構清晰的CSS代碼。
盡管目前的版本仍專注于面向桌面系統，但(dàn)Hartman已經開(kāi)始着手創建下一個(gè)版本、旨在利用經過修改的代碼庫将移動平台作為(wèi)首選環境。他指出，Base“在最初進行(xíng)開(kāi)發時(shí)隻具備非常基本的功能，但(dàn)随着其迅速發展、我開(kāi)始将其應用在更多(duō)不同類型的網站當中。雖然遇到過許多(duō)前所未有(yǒu)的情況以及令人(rén)沮喪的錯誤，但(dàn)這段學習經曆既可(kě)怕又充滿樂趣。”
Compass
Compass CSS驗證框架能夠為(wèi)設計(jì)師(shī)們帶來(lái)更為(wèi)簡潔的标記、可(kě)重複使用模式同時(shí)大(dà)大(dà)簡化了Sprite圖像——像這樣的優勢還(hái)有(yǒu)很(hěn)多(duō)。“它并不是一套難于上(shàng)手且需要預先定義的類名稱集合。Compass當中所包含的工具數(shù)量超過了其它任何CSS框架，”開(kāi)發人(rén)員Lorin Tackett表示，他利用這套框架創建出了一款網格計(jì)算(suàn)器(qì)。“Compass充分考慮到了那(nà)些(xiē)在未來(lái)可(kě)能出現的浏覽器(qì)支持沖突狀況，因此其中一部分功能可(kě)以有(yǒu)選擇地加以關閉。”
Tackett指出，Compass是維護複雜Web應用程序中樣式表格的最佳選擇。
Foundation
Foundation框架的專長在于響應式設計(jì)，這是一套專門(mén)用于創建網站與Web應用的策略方案，能夠自動與用戶設備上(shàng)的浏覽器(qì)環境進行(xíng)适配。
“Foundation是第一款專門(mén)幫助用戶創建能夠運行(xíng)在任何設備上(shàng)的響應式站點的CSS框架，”Web設計(jì)機構Zurb合作夥伴兼Foundation設計(jì)主管Jonathan Smiley指出。“我們自發布首個(gè)公共版本開(kāi)始就一直緻力于打造響應式站點，而且在經曆了五個(gè)版本的實踐研發過程後、我們已經親眼見證了衆多(duō)開(kāi)發者在創建多(duō)設備應用及站點方案時(shí)所遭遇的難題，因此有(yǒu)能力幫助他們順利度過難關。”
Foundation使用SCSS(即Sassy CSS)，提供內(nèi)置組件以簡化布局與原型設計(jì)，同時(shí)允許用戶以覆蓋方式使用自己的定制化前端。
Gumby
上(shàng)世紀七十年代出生(shēng)的朋友(yǒu)們可(kě)能還(hái)對Gumby這位活躍在兒童電(diàn)視節目上(shàng)的綠色黏土動畫(huà)人(rén)物留有(yǒu)印象，而如今同樣的名字則代表着一款CSS框架。
“Bumby這個(gè)名字來(lái)自定格動畫(huà)片中的人(rén)物，代表着能夠為(wèi)用戶帶來(lái)快速的原型設計(jì)體(tǐ)驗，”Gumby框架出品方Digital Surgeons公司執行(xíng)創意總監Peter Sena指出。
Gumby提供了多(duō)種網格與列式變化，其UI包中還(hái)包含按鈕、字體(tǐ)以及表單等等。Gumby旨在幫助業餘開(kāi)發人(rén)員編寫并維護成百上(shàng)千行(xíng)代碼，Sena表示。目前其版本号為(wèi)2.6，預計(jì)Gumby 3将新增更多(duō)目前尚不支持的屏幕尺寸與設備型号，例如某些(xiē)高(gāo)分辨率平闆設備與觸控式筆記本等。
Kube
Kube标榜自身是一款“專業級”CSS框架。盡管其它框架同樣能夠提供預定義樣式以構建起視覺效果相似的站點外觀，但(dàn)Kube的使用感受更加簡單，Kube項目首席開(kāi)發者之一Artem Rosnovskiy解釋稱。
“Kube并不會(huì)強制限定任何樣式規則或者形式，”Rosnovskiy表示，而這一特性使其在專業設計(jì)師(shī)與開(kāi)發人(rén)員群體(tǐ)當中獲得(de)了廣泛歡迎。“很(hěn)多(duō)初學者希望能夠在預定義創建流程之前獲取更多(duō)指導性意見——包括色彩、網格、按鈕以及樣式等等——但(dàn)Kube則為(wèi)設計(jì)師(shī)與開(kāi)發人(rén)員們帶來(lái)了徹底的自由空(kōng)間(jiān)……它要求使用者擁有(yǒu)老練的技(jì)能、經驗并透徹理(lǐ)解自己想要達成的效果。”
Responsive Grid System
Responsive Grid System既不屬于框架也不屬于樣闆，而是一種能夠“快速而簡單”的響應式網站創建方式，項目開(kāi)發者Graham Miller解釋道(dào)。Responsive Grid System能夠直接與現有(yǒu)HTML與CSS相對接。
“我發現一旦自己開(kāi)始着手創建響應式網站，最最需要的就是能夠快速切入到自己的現有(yǒu)代碼中并以高(gāo)度靈活的方式構建任何項目，”Miller表示。“我曾經使用過很(hěn)多(duō)不同類型的框架與樣闆，但(dàn)它們都傾向于讓我以其為(wèi)基礎設置網格體(tǐ)系、然後向其中填充內(nèi)容。我是那(nà)種‘內(nèi)容至上(shàng)’派的開(kāi)發人(rén)員，因此我建立了自己的響應式網格系統。”
