如何严谨地做前端UI开发？

项目评审

1. 新项目评审
   （1）看下页面的整体风格是否统一：主色是什么；页面背景颜色是否一致；同种功能的按钮是否有个统一的标准样式等。确保风格一致有利于我们后续把相似相同内容提取出来。
   （2）深入了解需求：分析设计稿，要揣测产品和设计师的意图，为什么要这么做，这么做有什么目的有什么效果，用户会是一个怎样的体验，当我们看到一个设计稿的时候，就要养成这么思考的习惯，并及时和设计师产品沟通。
   （3）重视交互设计：交互设计在设计稿上有时是体现不出来的，比如那种小型的动画效果，最好是设计产品重构这里可以做出一个gif图或者视频或者flash来展现一下要达到的效果。然后效果确认之后，我们要确定这里是重构来实现，还是重构和前端一起去实现。
   （4）是否做媒体查询：如果做媒体查询，需要和设计师确认一下媒体查询分辨率的范围和相应原型图。

2. 改版项目评审
   （1）确认下哪些页面是新加页面，哪些模块是新增模块。
   （2）浏览已发布的旧项目，以便更好地了解改版项目的需求。

和设计师沟通

1.浏览设计师提的需求单。
2.检查切图：切某些svg格式的矢量icon时，看一下icon四周的留白是否过大或者左右留白不一致。因为有时不合理的留白会导致页面错乱。
3.最好在自己的本地保存一份设计稿，后续有新的改动设计稿可以按日期分类继续保存，并要浏览下设计提的改动需求单，确定是哪个项目，哪个位置。

规划

1.目录结构/文件分布：根据页面的数量，以及资源文件大小等，设计目录结构。
2.扩展性：扩展性可以理解为增加新的模块时，对原来的代码没有什么太大的影响。
3.复用性：多次使用的代码提取出来（或提取成sass的变量，或一个组件，或通用样式文件）。
4.页面性能：具体可以参考 优化页面性能 。
5.定义一套重构规范，并遵守。

开始重构页面

1.先写页面大框架，再用通用组件，用页面大框架包着通用组件和私有样式。由大到小，循序渐进。
2.注意DOM结构的命名，以及标签语义化（我之前一直没有意识到标签语义化的重要性，直到导师跟我讲，当一个页面出现了加载问题css没有加载进来时，如果我们做了标签语义化，网页的显示就不会很糟糕，由于语义化的标签自带样式，所以页面还是整整齐齐的）。
3.注意适当地写一些注释。

检查

1.检查font-size、color、间距等是否和设计稿一致。
2.检查一些伪元素的写法与展示是否合理。
3.检查有没有做字数限制（多出文字省略），如果不确定字数限制范围，一定要和设计师产品确认一下。
4.按钮里的文字是否水平垂直居中。
5.DOM结构简化（作为一个重构，一定要对文件的大小关注到病态，越轻量越好，当然在项目不会出问题的前提下）。
6.检查dist目录有没有异常。
7.检查兼容性有没有达到要求。
8.删除某一模块测试，看看页面是否会错乱。（因为重构这边的页面是静态的，但是在前端那里，有的模块可能是触发后才会显示，所以我们自己在测试时，要试一下删除某一模块页面是否还会正常显示）。
9.每一个页面的title（页面题目）是否正确。
10.若是PC端，需要在可点击的地方加“cursor: pointer;（小手指）”。
11.注意换行问题（word-break, word-wrap, white-space）。
12.避免样式冲突。
13.检查每个元素是否偷偷地变形。
14.严格检查一下代码，是否符合W3C标准。

提交&交接

1.保存、编译、提交、上传、验收。
2.跟前端确认，关闭需求单。

发布后

在测试环境或正式环境发布之后，要去测试网、现网检查。