三步法开发静态页面

前言

最近负责公司官网2.0版本的前端工作，只写静态页面，不需要管接口联调，也就是传说中的切图～，不需要太多技术，现在前端技术日新月异，很多前端er对写静态页面是很不屑的，可是项目做下来却发现并没有想象中的那么简单,所以才会想写这篇文章。

正文从这里开始～
静态页面是前端者们最基本的一项技能，下面就给大家分享我是如何开发静态页面的。

第一步：前期准备

首先，试想一下下面2个场景：
场景一: 项目中用到了flex布局，很好用，各种垂直对齐，水平对齐，两端对齐都能很轻松的实现。但是需求方说要兼容ie9，怎么办？！用到flex布局的地方都得改其他方式实现。
场景二：项目很多模块都给固定了宽高还是px单位，需求方说适配要从pc端到ipad再到手机端。怎么办？！全部重构。

这种前期需求没有了解清楚，导致返工的例子数不胜数。磨刀不误砍柴工，在工作启动前，我们最先需要做的是了解项目的需求。

1.需要兼容的浏览器。

了解了需要兼容的浏览器后，我们在画页面时才能避免用到不兼容的方案，比如上面说的flex布局，比如ie9不兼容的transition动画如何优雅降级。

2.适配要求。

项目的适配要求也对我们开发静态页面有很大的影响。如果需要从pc端一直兼容到手机端，那么我们得注意不能用px单位写死，而应该用vw，rem, %等相对单位。

3.配合方式。

项目是一个人单独做，还是多人合作。每个人开发静态页面的习惯都不一样，如果多人合作，得制定好开发规范，划分好模块，把模块分配到各个责任人，商量好公共样式，公共模块怎么做，还有版本工具的使用等。

第二步：书写全局样式

全局样式顾名思义就是会覆盖整个网站的样式，能起到复用、统一样式、及节约后期维护的成本。按照以往开发经验，我会把全局样式分成4大部分：

1.重置样式：

HTML中绝大部分标签元素在网页显示中都有一个默认效果，而且每个浏览器渲染出来还不同，css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准，使HTML元素样式在跨浏览器时有一致性的效果。网络上有很多reset.css，大家可以下载一个，然后根据自身项目定制，主要定制项为正文文字大小，文字颜色，a标签样式及盒模型box-sizing。

2. 布局结构

结构布局是整个网页的骨架。常用的布局结构有栅格系统，flex布局，主体内容container容器等。

3. 组件样式

在收到设计稿时，千万不要着急开工，先分析你收到的所有页面，并统计可重用模块，页头页脚、菜单、输入框、搜索等等。不一定要一模一样，只要是差不多样式的模块都可以定义为公共组件，如果颜色，间距，字体大小等属性不一样，可以定义相应变体。

4.定义原子类

什么是原子类？原子是物理中最小的不可再分割的单位。在css中就可以理解为是一个高度复用，单一作用的样式模块。比如大家常看到的.mt-20, .bg-gray,.font-16等就是我们所说的原子类。
那我们为什么需要原子类？试想一下下面场景：
设计稿上有很多加粗的字体，你每个模块都给单独写了font-weight:bold，某一天设计师跟你说，这个粗体太粗了，可以再细点吗？你怎么办呢？那只能每个模块都单独改font-weight了。但是如果我们在加粗的字体标签上写了class="font-bold" .font-bold{font-weight:bold}，满足设计师改细点的需求，我们就只要修改样式里.font-bold{font-weight: 500}, 基本就没有工作量，方便快捷。
当然原子类也不能滥用，会造成维护上的成本，写得太多就会跟最原始写style=""方式一样，我使用原子类的标准是设计师可能会改动的属性，所以可以事先跟设计师沟通。
一般一个网站设计师会对原子类的各个类别设置几个等级。我们跟设计师同步，后续如果需要统一修改，只要修改原子类样式，整个网站使用到这个原子类的地方都会被统一修改，常用的原子类有字体颜色，背景颜色、字体尺寸、字重、间距等

.text-dark {
  color: rgba(0,0,0,.8)
}
.text-gray {
  color: rgba(0,0,0,0.6);
}
.font-18 {
    font-size: 18px;
}
.font-24 {
    font-size: 24px
}
...

第三步：具体页面的开发。

前面两步都做好后，最后一步具体页面的开发就会比较得心应手。能用公共样式的地方一定要用公共样式，稍微不一样的地方可以写页面级样式覆盖全局样式。如果单个页面上有很多重复的结构，你当然也可以抽取页面级公共样式了。

一些经验

1. class命名: 使用通用class类名(如:.title,.expand,.tips)一定要限定作用域，避免样式污染；模块，组件推荐使用BEM命名法，不熟悉BEM命名法的可以自行查阅；
2. 图片资源要限制大小，避免加载时长很长。
3. 时刻保持复用思维: 复用既能提高开发效率，又能节约后期维护成本。
4. 利用已成熟插件: 比如轮播，tab页签等比较常用的效果，可以直接使用网上成熟的插件，提升开发效率，出现bug几率比自己写要小。

最后，引用著名的建筑师路德维希·密斯·凡德罗说过的一句话：Less is more