Web前端開發規範收集
在Web開發中，後端跟前端配合非常easy出現故障。這時我們就須要一些規則來約束前端任意的編寫。
CSS編程規範
1. 屬性書寫基本順序
a. 先位置屬性（position, top, right, z-index, display, float等）
b. 大小（width, height, padding, margin）
c. 文字（font, line-height, letter-spacing, color- text-align等）
d. 背景（background, border等）
e. 其它（animation, transition等）
比方：.example {position: absolute; display: inline-block; width: 100px;font-size: 1.5em; border: 1px solid red;}
2. 選擇器屬性精簡。一般能縮寫就用縮寫
比方： 能用padding,margin,font屬性整合寫,就不要用padding-left，padding-right
color:#eebbcc能夠用color:#ebc
註：在大站點中，千萬級的訪問時；一個字節都是非常寶貴的,每天的流量*365*pv節省下來就非常寶貴。占用帶寬少，訪問速度也會加快。所以假設發現
3. 選擇器命名要簡單但讓人看的懂，即顧名思義
比方：navigation 能夠用nav縮寫。由於nav非常easy就能夠讓人想到導航
而假設意思是：author，卻簡寫.atr，這樣時間久了就非常難猜出是什麽意思了
所以簡寫要讓人知道意思，假設不能讓人明確。就全些。
註：一律小寫、盡量用英文不要拼寫（不懂查字典）、不加中橫線和下劃線；縮寫要讓人看的明確，否則不縮寫
4. 不要任意使用id, 理解id和class的差別
註：id在JS是唯一的，不能多次使用，而使用class類選擇器卻能夠反復使用，另外id的優先級優先與
5. 經常使用CSS命名規則
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制總體佈局寬度：wrapper
左右中：left right center
登錄條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
增加：joinus
指南：guide
服務：service
註冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
註：能夠去大站點新浪、淘寶、網易等下載css下來看看了解它們的命名規範
6. 如無必要，不要為id/class選擇器加類型選擇器進行限定
如：#error {} 前面加 div #error {}
註：如id選擇器本身就能夠非常精確定位，前面就不須要加限定了。這樣性能和維護都會減少
7. 書寫CSS時。用例如以下規範：
Body {background-color: #eaeceb; font: normal 100% "微軟雅黑"}
註：選擇器和大括號｛空一格；屬性和屬性之間空一格。寫滿後換一行，以｛對齊開始
HTML編程規範
A.文件規範
1. html,css, js, images文件均歸檔至對應的文件夾中;
2. html文件命名: 英文命名, 後綴.html;
3. css文件命名: 英文命名, 後綴.css. 共用base.css, 首頁index.css, 其它頁面依實際模塊需求命名.;
4. JS文件命名: 英文命名, 後綴.js. 共用common.js, 其它依實際模塊需求命名;
B.html書寫規範
1. 文檔類型聲明及編碼: 統一為html5聲明類型<!DOCTYPEhtml>; 編碼統一為<meta charset="utf-8" />, 書寫實現層次分明的縮進;
2. 非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部, 由於網頁渲染是從上到下;
3. 引入樣式文件或JavaScript文件時, 須略去默認類型聲明, 寫法例如以下:
<linkrel="stylesheet" href="…" />
<style>…</style>
<scriptsrc="…"></script>
4. 引入JS庫文件, 文件名稱須包括庫名稱及版本及是否為壓縮版, 比方jquery-1.4.1.min.js; 引入插件, 文件名稱格式為庫名稱+插件名稱, 比方jQuery.cookie.js;
5. 全部編碼均遵循xhtml標準, 標簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且全部標簽必須閉合等; 屬性值必須用雙引號包含;
6. 充分利用無兼容性問題的html自身標簽, 比方span, em,strong, optgroup, label,等等; 須要為html元素加入自己定義屬性的時候, 首先要考慮下有沒有默認的已有的合適標簽去設置, 假設沒有, 能夠使用須以"data-"為前綴來加入自己定義屬性
7. 語義化html, 如 標題依據重要性用h*(同一頁面僅僅能有一個h1),段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;
8. 盡可能降低div嵌套
9. 在頁面中盡量避免使用style屬性,即style="…"，應寫在CSS裏面
10. 重要圖片必須加上alt屬性;
11. 給區塊代碼及重要功能加上凝視, 方便後臺加入功能;
12. 編寫頁面過程中, 請考慮向後擴展性和匹配項目的合理性;
13. class & id 參見 css書寫規範.
14. 書寫代碼。兼容主流瀏覽器版本號（谷歌、火狐、IE），一個頁面做完，在各個瀏覽器打開測試下兼容性。
註：符合web標準,語義化html, 結構層次清楚，表現行為分離,兼容性優良. 頁面性能方面,代碼要求簡潔明了有序, 盡可能的減小server負載, 保證最快的解析速度。
JS編程規範
1.變量命名規範
a.變量命名都以類型前綴+有意義的單詞組成。單詞首字母都須要大寫。
比如：sUserName。nCount。
b.變量都須要有一個類型前綴。依照類型能夠分為：
s：表示字符串。
比如：sName，sHtml;
n：表示數字。比如：nPage，nTotal;
b：表示邏輯。比如：bChecked，bHasLogin;
a：表示數組。比如：aList。aGroup;
r：表示正則表達式。
比如：rDomain，rEmail;
f：表示函數。
比如：fGetHtml。fInit;
o：表示以上未涉及到的其它對象，比如：oButton，oDate;
g：代表全局，比如：gUserName，gLoginTime。
c.例外情況：
1：作用域不大暫時變量能夠簡寫，比方：str。num，bol，obj，fun，arr。
2：循環變量能夠簡寫，比方：i。j，k等。
註：為什麽須要這樣強制定義變量前綴?正式由於javascript是弱語言造成的。在定義大量變量的時候，我們須要非常明白的知道當前變量是什麽屬性，假設僅僅通過普通單詞，是非常難區分的。
2.函數命名規範
統一使用動詞或者動詞[+名詞]形式。比如：fGetVersion()。fSubmitForm()，fInit();涉及返回邏輯值的函數能夠使用is。has等表示邏輯的詞語取代動詞。比如：isPay()、hasBoxClass。
一些案例：
1.去結算。id=”foot_right”,這個不能非常直接表達功能作用；命名不單單用來寫寫css樣式，須要考慮到功能編碼
2.Html標簽詳細使用方法錯亂，全選應該放在<label>全選</label>。這樣點全選就能夠聯動復選框
3. 命名任意，不規範, fenlei,proList,ShopCart出現三種命名方式了；html頁面命名一般都是小寫fenlei,prolist,shopcart
有時候我們須要吐槽
由於真的非常難受
Web前端開發規範收集