前言最近负责公司官网2.0版本的前端工作。我只写静态页面，不需要管道接口联调。日新月异，很多前端er都对写静态页面很不屑，但是项目做完之后发现并没有想象中那么简单，所以想写这篇文章。正文从这里开始~静态页面是前端开发者最基本的技能。下面跟大家分享一下我是如何开发静态页面的。Step1：前期准备首先想象以下两种场景：场景一：项目中使用了flex布局，非常好用，可以轻松实现各种垂直对齐、水平对齐、两端对齐。但是需求方说要兼容ie9，怎么办？！哪里用到flex布局，就得用其他方式实现。场景二：项目很多模块的宽高都是固定的或者px单位，需求方说适配应该是PC到ipad再适配到手机。该怎么办？！全部重构。这个预先要求没有被清楚地理解，导致了无数返工的例子。磨刀不误砍木头。在开始工作之前，我们首先要做的就是了解项目的需求。1.需要兼容的浏览器。了解了需要兼容的浏览器后，我们就可以避免在绘制页面时使用不兼容的解决方案，比如上面提到的flex布局，比如如何优雅地降级ie9不兼容的过渡动画。2.适应要求。项目的适配需求对我们开发静态页面也有很大的影响。如果要从PC端兼容到手机端，那么一定要注意不要用px单位写硬，而是要用vw、rem、%等相对单位。3、配合法。项目是由一个人单独完成还是与多人合作完成。每个人都有不同的开发静态页面的习惯。如果多人合作，需要制定开发规范，划分模块，分配模块负责人，讨论公共样式，公共模块怎么做，版本工具的使用。等待。第二步：编写全局样式。顾名思义，全局样式就是会覆盖整个网站的样式，可以复用，统一样式，节省后期维护成本。根据之前的开发经验，我将全局样式分为4个部分：1.重置样式：HTML中大部分标签元素在网页显示时都有一个默认的效果，每个浏览器渲染不同，cssreload设置的主要目的style是为了让各个浏览器的CSS样式有一个统一的基准，让HTML元素样式在不同浏览器之间有一致的效果。网上有很多reset.css，你可以下载一个，然后根据自己的项目自定义。主要的自定义项目是文本大小、文本颜色、标签样式和框模型框大小。2.布局结构结构布局是整个网页的骨架。常用的布局结构包括网格系统、flex布局、主要内容容器等。3.组件样式当你收到设计稿时，不要着急开始工作，先分析你收到的所有页面，统计可重用的模块，页眉、页脚、菜单、输入框、搜索等。不必完全相同。只要是风格相似的模块，都可以定义为公共组件。如果颜色、间距、字号等属性不同，可以定义相应的变体。4.定义一个原子类什么是原子类？原子是物理学中不可分割的最小单位。在css中，可以理解为一个复用性高，功能单一的样式模块。比如大家经常看到的.mt-20、.bg-gray、.font-16就是我们所说的原子类。那么为什么我们需要原子类呢？想象一下这样的场景：设计稿上有很多粗体字，你为每个模块分别写了font-weight:bold。有一天，设计师告诉你，加粗的字体太粗了，能不能再细一点？whatdoyoudo那只能分别改变每个模块的font-weight。但是如果我们在加粗字体标签上写class="font-bold".font-bold{font-weight:bold}来满足设计者改细的需求，我们只需要修改style.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{字体大小:18px;}.font-24{font-size:24px}...第三步：具体页面的开发。前两步完成后，最后一步具体页面的开发就得心应手了。可以使用公共样式的地方必须使用公共样式，稍微不同的地方可以写页面级样式覆盖全局样式。如果单个页面有很多重复的结构，当然可以抽取页面级别的通用样式。类命名的一些经验：当使用通用的类名（如：.title、.expand、.tips）时，一定要限定范围，避免样式污染；模块和组件推荐使用BEM命名法，不熟悉BEM命名法的可以自行参考；应限制图像资源的大小以避免加载时间过长。时刻想着复用：复用不仅可以提高开发效率，还可以节省后期的维护成本。使用成熟的插件：对于轮播、标签页等常用的效果，可以直接使用网上成熟的插件，提高开发效率，出现bug的几率比自己写的要低。最后，引用著名建筑师路德维希·密斯·凡德罗的一句话：Lessismore
