首页 > 代码库 > 给所有浏览器的元素设置了一个共同的样式:Normalize.css

给所有浏览器的元素设置了一个共同的样式:Normalize.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下如何应用到这个项目中:

  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