前端書寫規範建議

1. 書寫規範

1.1 項目結構

---/html/
|---- /index                    
|---- /index/index.html         首頁  
|---- /user/                    與使用者相關的頁面  
|---- /user/login.html          登入頁
---/css/
|---- /base.css                 重置浏覽器樣式    
|---- /page                     邏輯頁面的css
|---- /page/pagename.css        單獨書寫的css
|---- /common.css               css通用樣式庫
---/js/
|---- /lib                      公用元件
|---- /lib/jquery.2.2.3.min.js  調用jq庫檔案 
|---- /page                     邏輯頁面的js
|---- /page/pagename.js         單獨書寫的js
|---- /common.js                公用方法
---/img/
|---- /page                     頁面對應的圖檔
|---- /page/wap                 手機端圖檔夾
|---- /page/wap/wap_icon.png    手機端圖示
|---- /logo.png                 公用圖檔
           

1.2 項目命名規範

* 項目：用項目對應的英文單詞命名
* 檔案及檔案夾:
    * 全部英文小寫字母，可以使用中線，不可出現其他字元，如login,my-order
    * 調用 `/lib`裡面的檔案需包含版本号，壓縮檔案需包含`min`關鍵詞，其他插件則可不包含，如：`/lib/jquery.1.9.1.js`
           

1.3 格式&編碼

* 文本檔案： `.xxx` UTF-8_\(無BOM\)_ 編碼
* 圖檔檔案： `.png` _(PNG-24)_ `.jpg` _(壓縮率8-12)_
* 動态圖檔： `.gif`
* 壓縮檔案： `.tar.gz` `.zip``.rar`
           

2. CSS 規範

2.1 CSS 命名規範

* 所有的命名用小寫的英文單詞
* 不使用簡單的方位詞直接命名，如“left”，“bottom”
* 不縮寫單詞，除非一看就明白的單詞
* 長名稱或詞組可以使用下劃線作為連接配接符
* 避免選擇器嵌套層級過多，少于3級
* 不要随意使用id，id應該按需使用，而不能濫用
* 使用CSS縮寫屬性 ，比如padding:0 10px 5px 5px等等，這樣精簡代碼同時又能提高使用者的閱讀體驗。
           

命名參考如下：

CSS樣式命名	說明
網頁公共命名
wrapper	頁面外圍控制整體布局寬度
container或content	容器,用于最外層
layout	布局
head, header	頁頭部分
foot, footer	頁腳部分
nav	主導航
sub_nav	二級導航
menu	菜單
sub_menu	子菜單
side_bar	側欄
sidebar_l, sidebar_r	左邊欄或右邊欄
main	頁面主體
tag	标簽
msg message	提示資訊
tips	小技巧
vote	投票
friendlink	友情連結
title	标題
summary	摘要
login_bar	登入條
search_input	搜尋輸入框
hot	熱門熱點
search	搜尋
search_output	搜尋輸出和搜尋結果相似
search_bar	搜尋條
search_results	搜尋結果
copyright	版權資訊
branding	商标
logo	網站LOGO标志
site_info	網站資訊
site_info_legal	法律聲明
site_info_credits	信譽
join_us	加入我們
partner	合作夥伴
service	服務
regsiter	注冊
arr arrow	箭頭
guild	指南
site_map	網站地圖
list	清單
home_page	首頁
sub_page	二級頁面子頁面
tool, toolbar	工具條
drop	下拉
dorp_menu	下拉菜單
status	狀态
scroll	滾動
tab	标簽頁
left right center	居左、中、右
news	新聞
download	下載下傳
banner	廣告條(頂部廣告條)

2.2 CSS 書寫規範

* 向“無ID，無層級，無标簽”準則靠攏，可有效提高重用性，減小檔案大小，提升渲染效率
           

2.3 CSS 注釋格式

* 用來區分頁面的注釋，如/******************************************産品中心****************************************/
* 子產品的注釋,如/*首頁導航欄*/
           

2.4 CSS各屬性的排列順序：不做硬性要求

* Positioning（定位，如position，top，z-index）
* Box model（盒模型，如display，box-sizing，width，border）
* Typographic（排版，如font，line-height，text-align）
* Visual（視覺，如background，color,opacity）
* Other（其他，如cursor）

由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆寫盒模型（box model）相關的樣式，是以排在首位。盒模型決定了元件的尺寸和位置，是以排在第二位。
其他屬性隻是影響元件的内部（inside）或者是不影響前兩組屬性，是以排在後面。
           

2.5 CSS格式化

使用不換行方式書寫，增加書寫速度
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
           

2.6 CSS字型機關

* px像素（Pixel），相對長度機關，像素px是相對于顯示器螢幕分辨率而言的。
* em是相對長度機關。相對于目前對象内文本的字型尺寸。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸。
* rem也是相對長度機關，但相對的隻是HTML根元素。
* vw代表視窗(Viewport)的寬度為1%，如果視窗寬度為1000px，那麼50vw = 500px
* vh代表視窗高度的百分，如果視窗高度為800px，那麼50vh = 400px
* 公司項目使用時注意事項：現有項目都是使用px作為機關，現推薦使用rem,vw,vh作為機關
           

3. JS 規範

3.1 JS命名規範

3.1.1 JS 變量命名

* 命名方法：小駝峰式命名法
* 命名規範：字首應當是名詞。(函數的名字字首為動詞，以此區分變量和函數)
* 命名建議：盡量在變量名字中展現所屬類型，如:length、count等表示數字類型；而包含name、title表示為字元串類型。
* 示例
    // 好的命名方式
    var maxCount = 10;
    var tableTitle = 'LoginTable';

    // 不好的命名方式
    var setCount = 10;
    var getTitle = 'LoginTable';
           

3.1.2 JS 函數命名

* 命名方法：小駝峰式命名法
* 命名規範：字首應當為動詞
* 命名建議：可使用常見動詞約定
           

3.1.3 JS 常量命名

* 命名方法：名稱全部大寫
* 命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞
* 示例
    var MAX_COUNT = 10;
    var URL = 'http://www.baidu.com';   
           

3.1.4 JS 檔案命名

* 使用短線（-）或句點（.）作為分隔符号，推薦使用句點，最好使用小寫英文字元，不要使用其他符号和擴充字元，如 jQuery UI 1.9.0 的源檔案可命名為“jquery-ui-1.9.0.js”
* 使用 .js 擴充名，這個擴充名的相容性最好。其實任何擴充名都可以，隻要是 text 類型、編碼正确即可
* 用句點分隔表示名稱中的從屬關系，範圍大的在前，如jQuery 的表單插件 Form既可以命名為jquery.form.js
           

3.2 js 注釋格式

* 使用多行注釋,以/*開頭，*/結尾
           

3.3 js 注意事項

* 書寫格式
    * JS 換行縮進：采用tab（打散為4個空格）
    * 結束行需添加分号`;`
* 性能
    * 盡量選用局部變量而不是全局變量
    * 盡量使用鍊式寫法
    * 盡量減少DOM調用
    * 将js腳本放到頁面底部
    * 使用jquery的data來存取資料，減少對dom的操作
    * 使用on方法綁定事件，這是jquery的推薦使用
    * 選擇器的選擇：盡量不用标簽選擇器，能用ID選擇器的就不用class選擇器
           

4. HTML 規範

4.1 标簽使用規範

* 盡量減少标簽層級
* 雙标簽必須閉合，單标簽用斜線閉合
* HTML第一行統一使用HTML5标準<!DOCTYPE html>
* 一律統一标簽結尾斜杠的書寫形式：`<br />` `<hr />` 注意之間空格
* 避免使用已過時标簽，如：`<font>` `<frame>` `<s>`
* `<img>`标簽預設預設格式：`<img src="#" alt="預設時文字" />`
* `<a>`标簽預設格式：`<a href="#" target="_blank" rel="external nofollow"  title="連結名稱">xxx</>` 注：`target="_blank"` 根據需求決定
* style、link、script可省略type屬性，因為 text/css 和 text/javascript 分别是他們的預設值
           

4.2 HTML注釋

<!--内容-->
 <div class="content">
    <p>content</p>
  </div>
           

4.3 注意事項

* 手機端的自适應布局盡量采用彈性布局，而不是百分比
* `css`檔案都 置于頭部
* HTML換行縮進：采用 tab空格
* 其他效果`js`及`統計代碼` 檔案置于尾部
* 手機端的頁面都按750px來做，顯示效果按375px
           

5. Image 規範

5.1 圖檔規範

* 圖檔大小：切圖時使用web格式儲存，減小圖檔大小
* 圖檔尺寸：一律采用整數，如20X20，50X50
* 圖檔合并：小圖檔一律要合并，并儲存對應的psd檔案，以便後期修改
           

轉載位址：https://lingdianit-com.github.io/Front-End-Standards/#1