您當(dāng)前的位置是：首頁(yè)>>新聞資訊>>建站知識(shí)

建站前端必備：讓代碼活起來(lái)的CSS工具

發(fā)布時(shí)間：2018-08-20 22:38:18 丨 文章來(lái)源：本站 丨 瀏覽次數(shù)：2996

CSS作為網(wǎng)頁(yè)設(shè)計(jì)制作的一門(mén)基礎(chǔ)語(yǔ)言，在網(wǎng)頁(yè)設(shè)計(jì)中，它表現(xiàn)出了其獨(dú)特的優(yōu)勢(shì)。例如更簡(jiǎn)潔的語(yǔ)言，模塊化的結(jié)構(gòu)。

對(duì)于頁(yè)面開(kāi)發(fā)而言是設(shè)計(jì)排版的改進(jìn)、對(duì)于訪客用戶(hù)而言則是有助瀏覽速度的提高。而在開(kāi)發(fā)維護(hù)以及在做被搜索時(shí)的SEO，使用CSS都是目前最好的選擇。為了更好的對(duì)CSS進(jìn)行開(kāi)發(fā)，我們可以選擇一些有幫助的工具。
下面來(lái)看看有哪些實(shí)用CSS工具：

Base
　　Base是一款輕量級(jí)CSS預(yù)處理工具，能夠?qū)⒋a編譯為SASS(即Syntactically Awesome CSS)或者LESS(Leaner CSS)。盡管已經(jīng)有很多框架放棄了IE瀏覽器的支持，Base仍然堅(jiān)定扮演著IE擁護(hù)者的角色，Matthew Hartman表示——他設(shè)計(jì)Base的初衷在于幫助設(shè)計(jì)師們編寫(xiě)出更為簡(jiǎn)潔且結(jié)構(gòu)清晰的CSS代碼。

　　盡管目前的版本仍專(zhuān)注于面向桌面系統(tǒng)，但Hartman已經(jīng)開(kāi)始著手創(chuàng)建下一個(gè)版本、旨在利用經(jīng)過(guò)修改的代碼庫(kù)將移動(dòng)平臺(tái)作為首選環(huán)境。他指出，Base“在最初進(jìn)行開(kāi)發(fā)時(shí)只具備非常基本的功能，但隨著其迅速發(fā)展、我開(kāi)始將其應(yīng)用在更多不同類(lèi)型的網(wǎng)站當(dāng)中。雖然遇到過(guò)許多前所未有的情況以及令人沮喪的錯(cuò)誤，但這段學(xué)習(xí)經(jīng)歷既可怕又充滿(mǎn)樂(lè)趣?！?/span>

Compass
　　Compass CSS驗(yàn)證框架能夠?yàn)樵O(shè)計(jì)師們帶來(lái)更為簡(jiǎn)潔的標(biāo)記、可重復(fù)使用模式同時(shí)大大簡(jiǎn)化了Sprite圖像——像這樣的優(yōu)勢(shì)還有很多?！八⒉皇且惶纂y于上手且需要預(yù)先定義的類(lèi)名稱(chēng)集合。Compass當(dāng)中所包含的工具數(shù)量超過(guò)了其它任何CSS框架，”開(kāi)發(fā)人員Lorin Tackett表示，他利用這套框架創(chuàng)建出了一款網(wǎng)格計(jì)算器?！癈ompass充分考慮到了那些在未來(lái)可能出現(xiàn)的瀏覽器支持沖突狀況，因此其中一部分功能可以有選擇地加以關(guān)閉?！?/span>

　　Tackett指出，Compass是維護(hù)復(fù)雜Web應(yīng)用程序中樣式表格的最佳選擇。


Foundation
　　Foundation框架的專(zhuān)長(zhǎng)在于響應(yīng)式設(shè)計(jì)，這是一套專(zhuān)門(mén)用于創(chuàng)建網(wǎng)站與Web應(yīng)用的策略方案，能夠自動(dòng)與用戶(hù)設(shè)備上的瀏覽器環(huán)境進(jìn)行適配。

　　“Foundation是第一款專(zhuān)門(mén)幫助用戶(hù)創(chuàng)建能夠運(yùn)行在任何設(shè)備上的響應(yīng)式站點(diǎn)的CSS框架，”Web設(shè)計(jì)機(jī)構(gòu)Zurb合作伙伴兼Foundation設(shè)計(jì)主管Jonathan Smiley指出?！拔覀冏园l(fā)布首個(gè)公共版本開(kāi)始就一直致力于打造響應(yīng)式站點(diǎn)，而且在經(jīng)歷了五個(gè)版本的實(shí)踐研發(fā)過(guò)程后、我們已經(jīng)親眼見(jiàn)證了眾多開(kāi)發(fā)者在創(chuàng)建多設(shè)備應(yīng)用及站點(diǎn)方案時(shí)所遭遇的難題，因此有能力幫助他們順利度過(guò)難關(guān)。”

　　Foundation使用SCSS(即Sassy CSS)，提供內(nèi)置組件以簡(jiǎn)化布局與原型設(shè)計(jì)，同時(shí)允許用戶(hù)以覆蓋方式使用自己的定制化前端。

Gumby
　　上世紀(jì)七十年代出生的朋友們可能還對(duì)Gumby這位活躍在兒童電視節(jié)目上的綠色黏土動(dòng)畫(huà)人物留有印象，而如今同樣的名字則代表著一款CSS框架。

　　“Bumby這個(gè)名字來(lái)自定格動(dòng)畫(huà)片中的人物，代表著能夠?yàn)橛脩?hù)帶來(lái)快速的原型設(shè)計(jì)體驗(yàn)，”Gumby框架出品方Digital Surgeons公司執(zhí)行創(chuàng)意總監(jiān)Peter Sena指出。

　　Gumby提供了多種網(wǎng)格與列式變化，其UI包中還包含按鈕、字體以及表單等等。Gumby旨在幫助業(yè)余開(kāi)發(fā)人員編寫(xiě)并維護(hù)成百上千行代碼，Sena表示。目前其版本號(hào)為2.6，預(yù)計(jì)Gumby 3將新增更多目前尚不支持的屏幕尺寸與設(shè)備型號(hào)，例如某些高分辨率平板設(shè)備與觸控式筆記本等。

Kube
　　Kube標(biāo)榜自身是一款“專(zhuān)業(yè)級(jí)”CSS框架。盡管其它框架同樣能夠提供預(yù)定義樣式以構(gòu)建起視覺(jué)效果相似的站點(diǎn)外觀，但Kube的使用感受更加簡(jiǎn)單，Kube項(xiàng)目首席開(kāi)發(fā)者之一Artem Rosnovskiy解釋稱(chēng)。

　　“Kube并不會(huì)強(qiáng)制限定任何樣式規(guī)則或者形式，”Rosnovskiy表示，而這一特性使其在專(zhuān)業(yè)設(shè)計(jì)師與開(kāi)發(fā)人員群體當(dāng)中獲得了廣泛歡迎?！昂芏喑鯇W(xué)者希望能夠在預(yù)定義創(chuàng)建流程之前獲取更多指導(dǎo)性意見(jiàn)——包括色彩、網(wǎng)格、按鈕以及樣式等等——但Kube則為設(shè)計(jì)師與開(kāi)發(fā)人員們帶來(lái)了徹底的自由空間……它要求使用者擁有老練的技能、經(jīng)驗(yàn)并透徹理解自己想要達(dá)成的效果?！?/span>

Responsive Grid System
　　Responsive Grid System既不屬于框架也不屬于樣板，而是一種能夠“快速而簡(jiǎn)單”的響應(yīng)式網(wǎng)站創(chuàng)建方式，項(xiàng)目開(kāi)發(fā)者Graham Miller解釋道。Responsive Grid System能夠直接與現(xiàn)有HTML與CSS相對(duì)接。

　　“我發(fā)現(xiàn)一旦自己開(kāi)始著手創(chuàng)建響應(yīng)式網(wǎng)站，最最需要的就是能夠快速切入到自己的現(xiàn)有代碼中并以高度靈活的方式構(gòu)建任何項(xiàng)目，”Miller表示?！拔以?jīng)使用過(guò)很多不同類(lèi)型的框架與樣板，但它們都傾向于讓我以其為基礎(chǔ)設(shè)置網(wǎng)格體系、然后向其中填充內(nèi)容。我是那種‘內(nèi)容至上’派的開(kāi)發(fā)人員，因此我建立了自己的響應(yīng)式網(wǎng)格系統(tǒng)?！?/span>

上一條：什么是網(wǎng)站快照？下一條：安慶億網(wǎng)告訴您建設(shè)網(wǎng)站的六個(gè)常識(shí)