目录
前言：
开发的时间久了，也越来越感受到开发效率的提升有多重要，从刚入行的一天一个静态页到现在的……大概2天完成一个项目的所有静态？具体多长时间没有统计，毫无疑问的是，现在开发的速度有了质的提升，我想是该到了总结经验的时候了，也就有了本篇文章，我想这只是一个开始，以后我会写出更多的这样的经验。
ps:因为vue用的比较多，主要以vue示例，react以及其他我也用，不过殊途同归，一样的道理。
1.全局样式和局部样式设置
请参考以下步骤，设置全局的css文件，按照下面就可实现样式全局生效。此方法各项目通用
1.1 目录结构：
2.2 index.css设置引入css文件
3.3 入口文件main.js设置为全局
2.提升效率重要方法
第一件事，先去问公司的UI,一般而言，像是按钮大小，输入框大小，文字字体大小颜色，行间距，各种边距都是有着标准的，对于这样的情况要做到心中有数。
总而言之，第一步就是先问UI，哪些东西是固定的通用的。
3.提升效率重要方法-集中处理UI样式
举个例子，我是用elementUI的组件库，在项目中肯定不是直接用他们样式，需要自己改颜色改大小之类的，我们从一开始就专门搞一个文件集中处理他们。
如：新建element-ui.css文件，在这里集中处理以全局生效
总而言之，单独集中处理第三方UI库，全局生效，大大提高效率
4.提升效率重要方法-学会复制
官网类电商类这些可能用的少些，但对于后台管理类，就是B端产品，很多页面样式结构其实差不多，那么这个时候就要快速复制了。
总而言之，哪些页面长得差不多就复制，细微之处之后处理。
5. 提升质量方法-flex、百分比、rem布局
前端发展到今天，几乎不存在按照1920×1080设计图固定写死的样式了，想想页面大小变化整个静态页面崩了的画面……我们需要考虑适配各种分辨率的屏幕以及尺寸，传统的媒体查询写起来属实笨重，推荐使用大量flex布局、流式布局以及淘宝的rem或者elementUI框架的el-row之类的布局，结合使用才是王道！
6.解决疑难杂症方法-::v-deep和加类名
在vue中，我们只想修改局部的样式，而不想污染全局样式，导致其他页面跟着变化，我们可以再style中加上scope属性 然后各种::v-deep
至于加类名的方法，请设想这样一个场景：
我本来设置的全局输入框是长200px，但是我想让全局某个地方的表单的某个输入框长度为300px，怎么办呢？而面临的现实是，想修改它，必须要动某个类名，且这个类名关系着全局。
我们可以给这个输入框的上级加一个独特的类名，这样就可以控制某些输入框，而不是全部的输入框。
7.提升质量方法：巧用flex实现元素对齐、居中
在实际项目中常常面临一个问题：
按钮的高度要和输入框一样高，或者这个logo要垂直居中，上下边距要一毛一样且自适应。
我们可以使用flex布局：
display:flex;
justify-content: center;//水平居中
align-items: center;//垂直居中
8.提升质量方法：巧用三元表达式
在实际项目中，应该会经常遇到这样的业务场景：
密码强度验证低中高对应三种颜色；
后端返回一个字段，低危中危高危对应三个颜色；
我们可以使用三元表达式提高效率，但是如果是需要判断两次我们又不想写函数来处理，可以使用:class+:style结合的方式，可以使代码逻辑更清晰，也避免了三元嵌套地狱的情况。
