使用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使用教学文章,可以下面两篇文章: