三步法开发静态页面

前言

最近负责公司官网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

你可能感兴趣的