作为前端工程师，需要不断的去总结和积累有共性的代码，这对于开发来说事半功倍。在书写样式文件时，公共样式和样式重置(样式初始化)每次都会用到。

1、公共样式

//按钮公共样式

.btn{display: inline-block; font-size: 30rpx; border-radius: 4rpx; color: #fff; box-shadow:0px 2px 8px 1px rgba(9,166,7,0.25); box-sizing: border-box; -webkit-box-sizing: border-box; }

.btn_primary{background: #09bb07;}

.btn_primaryAct{background:#0ab007;}

.btn_danger{ background: #d91f16}

.btn_warning{ background: #ff9500;}

.btn_s{height:; line-height:; padding:;width:;}

.btn_m{height:; line-height:; padding:;width:;}

.btn_l{height:; line-height:; padding:;width:;}

//颜色

.color_theme{ color:} /* 主题颜色 */

.color_important{ color:;}

.color_primary{ color:;} /* 常规的颜色 */

.color_sub{ color:;}

.color_danger{color:;}

.fb{ font-weight: bold;}

//布局

.fl{ float: left;}

.fr{ float: right;}

.clear{ clear: both;}

.clearfix{*zoom:1;}

.clearfix::after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.flex{ display: flex; display: -webkit-flex;}

.flex_ver{ -webkit-align-items: center; align-items: center;} /* 垂直居中 */

.flex_hor{ -webkit-justify-content:space-around; justify-content:space-around;} /* 水平居中 */

.flex_jus{ -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack:justify ; justify-content: space-between;} /* 两端对齐*/

.show{ display: block;}

.hide{ display: none;}

2、样式重置

image::after{ border: none;}//去除下边线

button::after{ border: none;}//去除下边线

3、样式初始化

page{font-size:12px;}//初始化微信小程序每个页面的根元素<page></page>字号//