传统开发方式的弊端

在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。

现在人通过手机浏览网页占了大多数，随着浏览方式的改变，网页在webapp下面实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。

固定宽度布局

固定宽度式布局是目前国内最常用的布局方法，优点就是固定宽度使得其布局最简便，使得开发人员对布局和定位有更大的控制能力。

1. 响应式布局。

   可以用px作为像素，网页进行平铺。全屏的用100%。高度可以用px写死，宽度可以用百分比。不管网页怎么拉伸，高度不变，宽度会相应的扩大。

2. em/rem 方式布局。

   可以设置好html，body的字体大小，然后用不同的尺寸手机访问的时候，我们可以去修改body的字体大小，网页（网页的内容用rem设置宽度、高度）的之内容会自动进行缩放。

3. 可以按照设计稿的宽 高 来写css，然后通过js判断不同尺寸屏幕，修改 里面 scale的比例大小。

   比如设计稿是 640 * 1136
   我们可以按 640宽度写网页 也可以按320宽度写网页。
   然后
   默认宽度可以设置为你写网页的宽度。
   然后再通过js 来控制scale的比例缩放即可 也可以控制 最小宽度 跟 最大宽度。

什么是CSS resetting？

在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

1 前言

CSS作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。

虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)时，适用的部分也应尽量遵循本文档的约定。

2 代码风格

2.1 文件

[建议] CSS 文件使用无 BOM 的 UTF-8 编码。

真正阅读程序的是人，而不是计算机，所以所写代码具有良好的可读性，是优秀程序员必备的素质之一。在大型的系统开发中，往往需要很多人的通力配合，例如，开源软件Linux 之所以能够为全球顶尖程序员共享、协作开发，也得益于规范化和标准化的编码规范。规范应该尽量一致；即使有例外，也只能是少数情况，而不能是很多例外。好的代码规范能够提高代码的可读性便于协作沟通，好的模式能够在上层设计上避免不必要的 bug 出现。

什么是gulp

gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。

安装gulp

gulp 是基于 node 实现的，那么我们就需要先安装 node。

打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下载安装 node。

1.编译环境不一样

Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

什么是sass

简介

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

sass和scss有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

什么是less

less是一门动态的css语言，使得css样式更加灵活地作用于html标签。

less作为css的一种形式扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入了程序是式语言的特性。less包含一套自定义的语法及一个解析器， 用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。