使用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下如何应用到这个项目中：

1. 下载Nodejs并安装，nodejs会自动将自己加入系统路径。

2. 在cmd运行 npm install -g less

3. 然后就可以通过lessc指令将less源文件编译为css lessc avnpc.less avnpc.css

4. 如果不使用nodeJs作为后端，最好在写LESS时采用watch模式，每次保存自动编译为css。这里需要安装一个辅助模块recess： npm install -g recess 然后运行watch recess avnpc.less:avnpc.css --watch

更多的LESS使用教学文章，可以下面两篇文章：

LESS介绍及其与Sass的差异

初步认识 LESS

给所有浏览器的元素设置了一个共同的样式：Normalize.css