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等等。为了更好的扩展性,这里建议在项目中引入LESSSass。这代表着:

  • 支持变量与简单运算
  • 支持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

责任编辑:徐川 来源: 51CTO整理
相关推荐

2022-09-02 08:00:00

CSS开发框架

2011-01-11 13:40:44

webcssdiv

2016-12-14 14:50:26

CSS预处理语言模块化实践

2021-12-28 14:10:41

开发技能代码

2021-01-13 08:06:50

SassFacebook Less

2019-08-28 16:18:39

JavaScriptJS前端

2010-08-02 08:54:53

Flex模块化

2017-04-10 14:23:01

typescriptjavascriptwebpack

2020-09-17 10:30:21

前端模块化组件

2013-08-20 15:31:18

前端模块化

2017-05-18 10:23:55

模块化开发RequireJsJavascript

2020-09-18 09:02:32

前端模块化

2015-10-10 11:29:45

Java模块化系统初探

2022-03-11 13:01:27

前端模块

2021-06-10 18:40:32

ES 标准模块化

2021-12-02 05:57:04

模块化UPS电源

2021-12-24 07:10:36

架构分层模块化

2018-03-21 21:31:28

Java9编程Java

2022-09-05 09:01:13

前端模块化

2018-06-21 09:36:09

模块化数据中心集中化
点赞
收藏

51CTO技术栈公众号