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前端開發規範收集