代码优化（1）——CSS代码

 在CSS中很多具有复用性的代码，都可以提取出来，作为公共代码引入使用。这样能够有效地减少代码冗余(rǒngyú)。

冗余代码主要分两部分：多余执行的冗余和代码数量的冗余。

举例：

flex布局最常见的那几行代码，可以提取出来

HTML:

<view class="dad">
  <view class="son1">子容器1</view>
  <view class="son2">子容器2</view>
  <view class="son3">子容器3</view>
</view>

CSS:

       .dad{
		width: 300upx;
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.son1{
		width: 100upx;
		height: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.son2{
		width: 100upx;
		height: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.son3{
		width: 100upx;
		height: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	

父亲容器的三个儿子容器，都存在三行相同的flex居中代码，提取后变成

.son1,.son2,.son3
  {
	 display: flex;
	 justify-content: center;
	 align-items: center;
  }

新建一个common.css用来写公共CSS，再在App.vue中引入即可