背景
前端做任何项目，必须要用的css，其实很多css有很大的通用性，公用样式的目标，就是把这些通用性的东西，总结下来。
应用场景：前端任何项目中，都应该规范使用common.css文件。
common.css 如下规范
| 分类 | class名 | 属性 | 描述 |
|---|---|---|---|
| 分类 | class名 | 属性 | 描述 |
| 1、初始化部分 | #app、html、body、.wrapper | width: 100%;height: 100%;margin: 0;padding: 0; | 单页面应用中，一般需要对这几个类做初始化，保证padding、margin重置、宽高为100% |
| 2、flex部分 | .flex-box、.flex-col、.flex1、.flex2、.center、.left-center、 | display: flex、align-items、justify-content等等。 | flex布局，主要解决的是页面结构的问题，是竖直排布，还是水平排布，是等分，还是其他方式。 |
| 3、margin部分 | .margin.margin-left-.margin-top-.margin-bottom-* | margin、margin-left、margin-top、margin-bottom等等。基本的距离设置为：5、10、20、30、50、100. | 主要针对margin属性的间距，设置的几个具体的class。 |
| 4、padding部分 | .padding.padding-left-.padding-top-.padding-bottom-* | padding、padding-left、padding-top、padding-bottom等等。基本的距离设置为：5、10、20、30、50、100. | 主要针对padding属性的间距，设置的几个具体的class。 |
| 5、width宽度 | .width* | 宽度设置：width基本的宽度设置值为：100、200、250、300、400、500、600、700、800、900、1000、1280 | Block元素宽度设置 |
| 6、其他 | .text-center.border.border-bottom.one-line | text-align: centerborder: 1px solid #cccwhite-space: no-wrap | 一些常用的类：文本居中、文本单行展示、border边框。 |
现在
随着项目越来越复杂，变量命名的方式应运而生。 下期我们就来说说css变量在项目中应如何规范。
