對(duì)于web開發(fā)來說，CSS是最有效的美化頁(yè)面、設(shè)置頁(yè)面布局的技術(shù)。但問題是，CSS是一種標(biāo)記性語言，語法結(jié)構(gòu)非常的松散、不嚴(yán)謹(jǐn)。WEB程序 員會(huì)經(jīng)常發(fā)現(xiàn)自己的或別人的CSS文件里有大量的冗余代碼或錯(cuò)誤或能夠大量?jī)?yōu)化的地方。如果你經(jīng)常使用靜態(tài)編程語言(比如，Java，C語言)等，你會(huì)發(fā) 現(xiàn)實(shí)用的IDE工具會(huì)給編程帶來巨大的效率，像Eclipse這樣的能夠?qū)崟r(shí)自動(dòng)分析代碼問題的集成開發(fā)環(huán)境就是一個(gè)典型的例子。那么，CSS程序員有沒 有這樣的幫助工具呢？。

下面將要介紹的10款工具都是一些在線的應(yīng)用，你不需要將它們安裝到自己的電腦上，只要能聯(lián)網(wǎng)，你就可以使用它們。大部分的這些工具使用起來都非常的簡(jiǎn)單，但也有需要技巧的地方。如果你在使用它們的過程中有什么心得體驗(yàn)，請(qǐng)留在評(píng)論里分享給大家。
 

CSS問題檢查工具：CSS Lint

CSS Lint是一個(gè)開源的校驗(yàn)CSS文件質(zhì)量的工具，最初是由 Nicholas C. Zakas和 Nicole Sullivan編寫的，最初版本在Velocity會(huì)議上于2011年6月發(fā)布。CSS Lint的檢測(cè)規(guī)則包括錯(cuò)誤的和警告，當(dāng)選擇器或?qū)傩詴鴮懖徽_、漏掉了大括號(hào)、多寫了分號(hào)等時(shí)，會(huì)提示解析錯(cuò)誤，解析錯(cuò)誤優(yōu)先提示。
 

CSS代碼分析統(tǒng)計(jì)工具：CSS Stats

Css Stats是一款在線CSS代碼分析工具，輸入網(wǎng)站CSS網(wǎng)址即可進(jìn)行CSS代碼分析。Css Stats是前端網(wǎng)頁(yè)設(shè)計(jì)師分析網(wǎng)站CSS代碼的利器，可以統(tǒng)計(jì)CSS代碼里的規(guī)則、字體大小、寬度高度、顏色數(shù)等等。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師而言分享網(wǎng)頁(yè)CSS代碼是必須要做的事情，統(tǒng)計(jì)網(wǎng)站設(shè)計(jì)里使用了多少種字體、多少種字體大小、多少種顏色、背景顏色有多少種，只有對(duì) CSS代碼有一個(gè)詳細(xì)的統(tǒng)計(jì)數(shù)字才能分析出來整個(gè)網(wǎng)站設(shè)計(jì)出來以后的效果。Css Stats還提供熱門網(wǎng)站的CSS分析數(shù)據(jù)，例如谷歌、雅虎、Twitter、FaceBook、Tumblr等網(wǎng)站。
 

CSS代碼優(yōu)化壓縮工具：CSS Shrinks

CSS Shrinks 能夠非常明顯的壓縮你的CSS體積大小。很多Web程序員編寫的CSS代碼里有大量的冗余語法，空白空間等，這款工具能在不影響你的CSS的正確性的情況 下，優(yōu)化CSS的語法，去除無用的空格和空行，顯著的壓縮CSS的提交，大量的減少帶寬的浪費(fèi)。
 

CSS代碼整理工具：ProCSSor

ProCSSor 除了提供基本優(yōu)化CSS代碼功能，還提供了大量的自定義選項(xiàng)。比如，讓你設(shè)定CSS規(guī)則，CSS屬性，CSS語法的優(yōu)化選項(xiàng)。它還提供了對(duì)新型CSS3屬性、規(guī)則中各種瀏覽器里的不兼容替代方案。
 

Codrops CSS 語法參考

Codrops CSS 參考內(nèi)容豐富而全面，并且界面清爽直接，你可以使用這個(gè)工具掌握CSS里最重要而全面的知識(shí)。它的CSS知識(shí)庫(kù)分成了數(shù)個(gè)類別，包括偽類，屬性，函數(shù)，數(shù)據(jù)類型，概念，規(guī)則等。
 

CSS3瀏覽器兼容支持情況查詢工具：Can I Use

“Can I Use”在這里你能找到所有web新特性在各個(gè)品牌瀏覽器以及各品牌瀏覽器不同版本的兼容性，當(dāng)你知道你針對(duì)的用戶都在使用什么瀏覽器時(shí)，這寫table 將對(duì)你建設(shè)網(wǎng)站有很大幫助。打開caniuse.com，該網(wǎng)站首頁(yè)將所有HTML5、CSS3等web新特性羅列出來，如果你想查看某個(gè)特性在不同瀏覽 器種的兼容情況，點(diǎn)擊一下就可以。比如，看一下@font-face Web fonts在各個(gè)瀏覽器中的兼容性，點(diǎn)擊CSS區(qū)域中的***項(xiàng)，會(huì)看到一個(gè)表格，列出所有瀏覽器的版本，用不同顏色代表每個(gè)瀏覽器對(duì)@font face Web fonts的支持，被標(biāo)識(shí)為紅色的代表不支持，淺綠色代表部分支持。圖中列出的瀏覽器還包括一些手機(jī)平板設(shè)備瀏覽器，例如Android系統(tǒng)瀏覽器。如此 全面，設(shè)計(jì)網(wǎng)站時(shí)，可以根據(jù)網(wǎng)站針對(duì)的用戶有選擇的使用CSS和Javascript的高級(jí)特性，提高用戶體驗(yàn)。
 

檢查你的代碼是否符合CSS標(biāo)準(zhǔn)：W3C CSS Validation Service

這個(gè)工具是用來檢查你的CSS語法是否正確，是否符合W3C CSS標(biāo)準(zhǔn)。我們知道從最早的IE開始，各種瀏覽器都實(shí)現(xiàn)了一些自己的方言，這些方言中在各種瀏覽器里互不相通。但我們開發(fā)網(wǎng)頁(yè)時(shí)，必須最大限度的考慮各 種瀏覽器的兼容性，最好的方法是遵守W3C的CSS標(biāo)準(zhǔn)規(guī)范。W3C CSS Validation Service就是用來校驗(yàn)?zāi)愕腸ss中的問題，它會(huì)提醒你那些語法，哪些屬性，那些規(guī)則是有問題的。
 

CodePad

Codepad.org是一個(gè)很有意思的網(wǎng)站，它的主頁(yè)很簡(jiǎn)單，左邊是可以編譯并執(zhí)行的程序語言，右邊則是讓你輸入程序的輸入框，輸入框的下面是一個(gè)“Run Code”的復(fù)選鈕和一個(gè)“Submit”的提交按鈕。

其操作起來也非常簡(jiǎn)單，先選中你要編譯并運(yùn)行的程序語言，然后在輸入框中粘貼或輸入程序的原代碼，然后，點(diǎn)擊提交，你就可以看么你程序編譯出錯(cuò)的提示，或是執(zhí)行的結(jié)果。

也許，你會(huì)覺得很無聊天，但我覺得這在某些時(shí)候會(huì)非常有用，尤其是你找不到編譯器而又想驗(yàn)證一段代碼的時(shí)候，這種時(shí)候還是比較多的。特別是我們很難 有一臺(tái)可以運(yùn)行所有語言的電腦，如果有的話，那一定是你自己的個(gè)人電腦，當(dāng)你不使用你自己的電腦時(shí)，你就會(huì)著急了。而且，我覺得這項(xiàng)服務(wù)非常地有意思，因 為，這樣一來，你甚至可以在你的手機(jī)上寫任何語言的程序了。

目前這個(gè)網(wǎng)站支持下面這樣語言——C，C++，D，Haskell，Lua，OCaml，PHP，Perl，Plain Text，Python，Ruby，Scheme，Tcl。
 

CSS動(dòng)畫生成工具：Gradient Animator

這是一款使用CSS Gradient和CSS Animation技術(shù)實(shí)現(xiàn)的動(dòng)態(tài)背景生成工具。工具非常易用，輕松地點(diǎn)擊幾下鼠標(biāo)，一個(gè)現(xiàn)代感十足的漸變動(dòng)態(tài)背景代碼就生成了。它可以讓CSS漸變背景 平滑地移動(dòng)，我們可以設(shè)置移動(dòng)的角度，移動(dòng)的速度，漸變的角度。支持所有現(xiàn)代瀏覽器以及 ie 10+。非常適合做網(wǎng)頁(yè)開屏背景。
 

Web顏色工具：CSS Colours

故名思議，這個(gè)工具是用來方便Web設(shè)計(jì)者查找顏色的，它提供了各種顏色的視覺效果，對(duì)于的顏色的英文名稱，RGB值，16進(jìn)制值，使用起來非常的方便。