在師父的教導(dǎo)下，我對代碼的書寫規(guī)范也是越來越有強迫癥了。我的代碼若能有幸被你看見，則不難發(fā)現(xiàn)有一些規(guī)律。
*.html中代碼規(guī)范
- 所有class名稱都是“aa-bb”這種格式的：
<div class="button-content"></div> - 所有id名稱都是“aa_bb”這種格式：
<div class="flow-chart" id="trend_line"></div> - 如若頁面有單獨樣式，則在html文件最頂部加上class屬性:
--- title: 流量統(tǒng)計 layout: default class: flow ---
對應(yīng)的該頁面樣式文件便是flow.scss，且scss文件中，則以.page-flow作為最大的選擇符。這樣可以保證最終的css文件中，單獨樣式不會沖突，也解決了前端人員對于class或id命名難的問題。
*.scss文件（最終為css文件）中代碼規(guī)范
- 選擇器與花括弧之間有個一個空格，屬性后面緊跟冒號，空格后才出現(xiàn)值，格式如下：
.page-certificate {background: #f0f5fb;}
PS：我熱切的希望，未來有人接手我的代碼，能按這些規(guī)范一直進行下去。
對于后臺系統(tǒng)來說，用的最多的便是查詢條件（輸入框樣式）和查詢結(jié)果（即表格樣式），然后就是一些按鈕等統(tǒng)一的樣式。如果這些樣式均能統(tǒng)一使用，則會給前端以及后臺開發(fā)人員帶來便利，使代碼簡潔有序。所以本人在寫代碼時，特別注意代碼復(fù)用這塊，不多BB，下面直接丟出一些模塊的代碼規(guī)范。
按鈕模塊—— button 標(biāo)簽或 a 標(biāo)簽
后臺系統(tǒng)中，用到的按鈕大概有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>
查詢模塊
在查詢模塊中，一般有輸入框、下拉列表以及時間，這應(yīng)該是目前最復(fù)雜的組合了。前端童鞋請注意，這塊只要按照這個樣式統(tǒng)一便可以了，無需按ui效果圖上自動隨意縮放大小再自行定義。先上效果圖。
然后上代碼：
//ld 下面代碼class名稱均無需修改，架構(gòu)也無需修改。
表格模塊
這表格幾乎一半頁面都用到了，所以無需自己再去定義樣式。
先丟效果圖
然后上代碼
//ld 表格為展示數(shù)據(jù)的，代碼class名稱均無需修改，架構(gòu)也無需修改。
詳情模塊
詳情模塊一般是用來添加或修改的頁面，分兩種。一種是兩列的；一種是四列的。下面介紹一下兩列式的。
效果圖如下：
代碼丟上：
可以直接include的模塊
ld 具體請看源碼中_includes文件下的component文件夾內(nèi)容，就不一一列出，此處只展示幾個
-
分頁
{% include component/pagenav.html %}
-
時間選擇
{% include component/search.html %}
