CSS模塊化：Normalize.css和LESS
作者：佚名
HTML5 Boilerplate選擇Normalize.css重置CSS。如果項目計劃引入Twitter Bootstrap、YUI 3這些前端框架的話則可以移除，因為這些框架已經內置了Normalize.css。在復雜應用中，如果還手寫CSS的話將是一件痛苦的事情，大量的class前綴，復用樣式需要來回copy等等。為了更好的擴展性，這里建議在項目中引入LESS或Sass。可以為CSS添加一些更像是編程語言的特性。這對于提高開發效率是效果非常明顯的。
使用Normalize.css重置默認樣式
CSS重置有助于根據所有設置的樣式建立一個基準樣式。樣式重置有效重寫了瀏覽器某些元素（在瀏覽器里有很大的不同）默認的樣式。
盡管CSS resets在過去的幾年里很受歡迎，但是，很多網站至今也沒有使用，這些網站CSS的可擴展性因css resets會有很大的困難。
大多數人推薦使用normalize.css重置默認樣式，而不是使用由Eric Meyer寫的非常流行的CSS Reset或者自己寫的Reset。Normalize.css給所有瀏覽器的元素設置了一個共同的樣式，而不是重置了這些元素的基本樣式。可以參考github上normlize.css項目，它具有以下優點，不僅僅是CSS樣式重置：
- 不像其他CSS resets，normalize.css保存了有用的默認設置
- 大范圍的規范了HTML元素樣式
- 糾正了瀏覽器間的一些bug及不一樣的表現形式
- 精心的改進提高了可用性
- 使用詳細的注釋解釋了代碼的作用
使用normalize.css替代一個標準的reset會使你編寫正確的代碼，在重新設置基本樣式上節省大量的時間。
使用LESS生成CSS
在復雜應用中，如果還手寫CSS的話將是一件痛苦的事情，大量的class前綴，復用樣式需要來回copy等等。為了更好的擴展性，這里建議在項目中引入LESS或Sass。這代表著：
- 支持變量與簡單運算
- 支持CSS片段復用
- class/id樣式嵌套
等一些更像是編程語言的特性。這對于提高開發效率是效果非常明顯的。
以LESS為例，簡單介紹一下LESS在Windows下如何應用到這個項目中：
- 下載Nodejs并安裝，nodejs會自動將自己加入系統路徑。
- 在cmd運行
npm install -g less - 然后就可以通過lessc指令將less源文件編譯為css
lessc avnpc.less avnpc.css - 如果不使用nodeJs作為后端，最好在寫LESS時采用watch模式，每次保存自動編譯為css。這里需要安裝一個輔助模塊recess：
npm install -g recess然后運行watchrecess avnpc.less:avnpc.css --watch
更多的LESS使用教學文章，可以下面兩篇文章：
責任編輯：徐川
來源：
51CTO整理
