4.7 有用的CSS工具

有些工具本書后面不再提及，不過讀者可能會發現在處理CSS相關事宜時它們很有用。下面將逐一介紹這類工具。所有這些工具要么可以免費獲得，要么已經集成到了主流瀏覽器中。

4.7.1 瀏覽器樣式報告

所有主流瀏覽器的開發人員工具都具有樣式檢查功能。其實現大同小異，基本路數都是在文檔呈現結果或源代碼中選擇一個元素，然后查看瀏覽器應用在上面的樣式。

這些樣式檢查工具能夠顯示樣式層疊的次序和計算樣式（computed style，指計入所有層疊和繼承而來的樣式后最終應用到元素上的樣式）。用戶甚至能用它們修改樣式或加入新樣式并查看其效果。圖4-18所示為谷歌的Chrome瀏覽器中的樣式檢查工具。

4.7.2 用SelectorGadget生成選擇器

第17章和第18章將會介紹CSS支持的所有選擇器。它們種類繁多，還能組合起來產生強大而又靈活的效果。要想掌握CSS選擇器需要一段時間。有一些工具可以在這方面提供一些幫助。據我所知最有用的工具之一是SelectorGadget。這是一個JavaScript書簽小程序（bookmarklet），可從www.selectorgadget.com獲得。

這個工具有一段時間沒有更新了，不過在最新的瀏覽器上依然能用。按說明安裝即可。瀏覽器載入這個工具的腳本程序之后，用戶點擊頁面元素就能生成相應的CSS選擇器。圖4-19所示為使用中的SelectorGadget。

4.7.3 用LESS改進CSS

接觸過CSS的用戶很快就會發現用它來描述樣式比較啰嗦。大量重復性內容的存在導致樣式的長期維護工作既費時間又容易出錯。

有一個名為LESS的工具可以用來擴展CSS，它使用JavaScript對CSS予以改進。這個工具有一些不錯的特性，包括變量、樣式間的繼承以及函數等。我最近經常使用LESS，其效果令人滿意。讀者可從以下網站詳細了解并下載該JavaScript庫：http://lesscss.org。

4.7.4 使用CSS框架

有很多高質量的CSS框架可作為開發者網站和Web應用系統的基石。它們內置多套樣式，因此用戶不必再干重復發明輪子的事。優秀的框架還可以化瀏覽器實現的差異于無形。

我推薦的CSS框架是Blueprint，它可以從這個網址下載：www.blueprintcss.org。這個框架用起來既方便又靈活，還有一套用于建立網格布局的出色功能。