在师父的教导下，我对代码的书写规范也是越来越有强迫症了。我的代码若能有幸被你看见，则不难发现有一些规律。
*.html中代码规范
- 所有class名称都是“aa-bb”这种格式的：
<div class="button-content"></div> - 所有id名称都是“aa_bb”这种格式：
<div class="flow-chart" id="trend_line"></div> - 如若页面有单独样式，则在html文件最顶部加上class属性:
--- title: 流量统计 layout: default class: flow ---
对应的该页面样式文件便是flow.scss，且scss文件中，则以.page-flow作为最大的选择符。这样可以保证最终的css文件中，单独样式不会冲突，也解决了前端人员对于class或id命名难的问题。
*.scss文件（最终为css文件）中代码规范
- 选择器与花括弧之间有个一个空格，属性后面紧跟冒号，空格后才出现值，格式如下：
.page-certificate {background: #f0f5fb;}
PS：我热切的希望，未来有人接手我的代码，能按这些规范一直进行下去。
对于后台系统来说，用的最多的便是查询条件（输入框样式）和查询结果（即表格样式），然后就是一些按钮等统一的样式。如果这些样式均能统一使用，则会给前端以及后台开发人员带来便利，使代码简洁有序。所以本人在写代码时，特别注意代码复用这块，不多BB，下面直接丢出一些模块的代码规范。
按钮模块—— button 标签或 a 标签
后台系统中，用到的按钮大概有4中大小：btn-lw、btn、btn-normal、btn-lg；5种样式：btn-fill、btn-primary、btn-primary-white、btn-gray、btn-gray-fill。下面进行一一介绍。
-
最小的按钮，一般用在表格的操作列中。代码及效果如下：
<a href="javascript:void(0)" class="btn-primary-white btn-lw detail-btn">查询</a>
<a href="#" class="btn-fill btn-lw">激活</a>
-
按钮，一般是“公安认证”操作。代码及效果如下：
<a href="#" class="btn btn-fill identification">公安认证</a>
-
正常按钮，一般为视频页“上传”和“视频录制”等操作。代码及效果如下：
<a href="#" class="btn-normal btn-primary" id="upload_video">上传</a>
<a href="#" class="btn-normal btn-gray-fill">开始录制</a>
-
大一点的按钮，一般是“查询”或“保存”操作。代码及效果如下：
<button class="btn-hollow btn-lg btn-gray">保存</button>
查询模块
在查询模块中，一般有输入框、下拉列表以及时间，这应该是目前最复杂的组合了。前端童鞋请注意，这块只要按照这个样式统一便可以了，无需按ui效果图上自动随意缩放大小再自行定义。先上效果图。
然后上代码：
//ld 下面代码class名称均无需修改，架构也无需修改。
表格模块
这表格几乎一半页面都用到了，所以无需自己再去定义样式。
先丢效果图
然后上代码
//ld 表格为展示数据的，代码class名称均无需修改，架构也无需修改。
详情模块
详情模块一般是用来添加或修改的页面，分两种。一种是两列的；一种是四列的。下面介绍一下两列式的。
效果图如下：
代码丢上：
可以直接include的模块
ld 具体请看源码中_includes文件下的component文件夹内容，就不一一列出，此处只展示几个
-
分页
{% include component/pagenav.html %}
-
时间选择
{% include component/search.html %}
