Web前端開(kāi)發(fā)規(guī)范_第1頁(yè)
Web前端開(kāi)發(fā)規(guī)范_第2頁(yè)
Web前端開(kāi)發(fā)規(guī)范_第3頁(yè)
Web前端開(kāi)發(fā)規(guī)范_第4頁(yè)
Web前端開(kāi)發(fā)規(guī)范_第5頁(yè)
已閱讀5頁(yè)，還剩9頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、南京業(yè)禾網(wǎng)絡(luò)科技有限公司 內(nèi)部文檔·注意保密Web前端開(kāi)發(fā)規(guī)范 規(guī)范目的為輸出高質(zhì)量的Web頁(yè)面，提高團(tuán)隊(duì)協(xié)作效率，便于后臺(tái)人員添加功能及前端后期優(yōu)化與維護(hù)，特制訂此文檔。本規(guī)范文檔一經(jīng)確認(rèn)，前端開(kāi)發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)Web頁(yè)面開(kāi)發(fā)。文檔中如有錯(cuò)誤或不當(dāng)之處，由前端開(kāi)發(fā)人員提出，經(jīng)開(kāi)發(fā)小組討論決定后方可更改?；緶?zhǔn)則符合W3C（萬(wàn)維網(wǎng)聯(lián)盟）定義的Web標(biāo)準(zhǔn)，包括結(jié)構(gòu)標(biāo)準(zhǔn)HTML、表現(xiàn)語(yǔ)言標(biāo)準(zhǔn)CSS、行為標(biāo)準(zhǔn)DOM和ECMAScript，必須通過(guò)W3C的HTML和CSS標(biāo)準(zhǔn)驗(yàn)證，網(wǎng)址為：MarkUp Validator: http:/vali

2、/CSS Validator: /css-validator/總體要求為：語(yǔ)義化HTML，結(jié)構(gòu)表現(xiàn)與行為分離，瀏覽器兼容性優(yōu)良，代碼簡(jiǎn)潔明了有序，性能上盡可能減小服務(wù)器負(fù)載，保證最快的解析速度。黃金定律不管有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫(xiě)的。盡量遵循標(biāo)準(zhǔn)和語(yǔ)義，但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽和元素并保持最小的復(fù)雜度。文件規(guī)范1、html，css，js，images,fonts等文件目錄組織如下如示： xxx.html css/ xxx.css xxx.min.css ima

3、ges/ xxx.jpg xxx.png js/ xxx.js xxx.min.js images/ xxx.jpg xxx.png fonts/ xxx.ttf文件命名原則調(diào)整為所有字母小寫(xiě)，單詞之間使用破折號(hào)（-）相連，壓縮后的文件在原文件名（除擴(kuò)展名）后添加.min。參考bootstrap文件命名：bootstrap-theme.css, bootstrap-theme.min.css。HTML書(shū)寫(xiě)規(guī)范語(yǔ)法l 用兩個(gè)空格來(lái)代替制表符（tab） - 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。l 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。l 對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)

4、。l 不要在自閉和（self-closing）元素的尾部添加斜線 - HTML5 規(guī)范中明確說(shuō)明這是可選的。l 不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li> 或 </body>）。<!DOCTYPE html><html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Co

5、mpany"> <h1 class="hello-world">Hello, world!</h1> </body></html>HTML5 doctype為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。<!DOCTYPE html><html> <head> </head></html>語(yǔ)言屬性根據(jù) HTML5 規(guī)范：強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔

6、設(shè)置正確的語(yǔ)言。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。<html lang="en-us"> <!- . -></html>中文使用zh，中文簡(jiǎn)體為zh-cn。IE 兼容模式IE 支持通過(guò)特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。<meta http-equiv="X-UA-Compatible" content=&qu

7、ot;IE=Edge">字符編碼通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。<head> <meta charset="UTF-8"></head>引入 CSS 和 JavaScript 文件根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type屬性，因?yàn)?#160;text/css 和&

8、#160;text/javascript 分別是它們的默認(rèn)值。<!- External CSS -><link rel="stylesheet" href="code-guide.css"><!- In-document CSS -><style> /* . */</style><!- JavaScript -><script src="code-guide.js"></script>屬性順序HTML 屬性應(yīng)當(dāng)按照以下給出的順序依

9、次排列，確保代碼的易讀性。l classl id, namel data-*l src, for, type, hrefl title, altl aria-*, roleclass 用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁(yè)面內(nèi)的書(shū)簽），因此排在第二位。<a class="." id="." data-modal="toggle" href="#"> Example link</a>&

10、lt;input class="form-control" type="text"><img src="." alt=".">布爾（boolean）型屬性布爾型屬性可以在聲明時(shí)不賦值。<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" se

11、lected>1</option></select>減少標(biāo)簽的數(shù)量編寫(xiě) HTML 代碼時(shí)，盡量避免多余的父元素。很多時(shí)候，這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn)。<!- Not so great -><span class="avatar"> <img src="."></span><!- Better -><img class="avatar" src=".">JavaScript 生成的標(biāo)簽通過(guò) JavaScript 生成的標(biāo)

12、簽讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時(shí)盡量避免。其他要求l css文件外鏈至<head></head>之間，js文件置于</body>之前。l 語(yǔ)義化HTML，如標(biāo)題根據(jù)重要性用h*(同一頁(yè)面只能有一個(gè)h1)，段落標(biāo)記用p，列表用ul，內(nèi)聯(lián)元素中避免嵌套塊級(jí)元素。l 書(shū)寫(xiě)鏈接地址時(shí)，建議在URL地址后面加上"/"，例如：href="http:/proin.cc/"。l 在頁(yè)面中不能使用style屬性，即style=""；所有樣式必須寫(xiě)在css文件中。l 必須為含有描述性表單元素(inpu

13、t，textarea)添加label，如：<p>姓名:<input type="text" id="name" name="name" /></p>須寫(xiě)成：<p><label for="name">姓名：</label><input type="text" id="name" /></p>l 能以背景形式呈現(xiàn)的圖片，盡量寫(xiě)入css樣式中。l 給重要的元素和截?cái)嗟脑丶由蟭itle。

14、l 建議給區(qū)塊代碼及重要功能（比如循環(huán)）加上注釋，方便后臺(tái)添加功能。l 不是標(biāo)簽一部分的特殊符號(hào)都用編碼表示，出現(xiàn)在內(nèi)容中的特殊符號(hào)都需要用編碼形式表現(xiàn)出來(lái)，如：<：&lt，>：&gt，&）：&amp，"：&quot;，盡量使用&nbsp;代替空格。l 圖片標(biāo)簽必須要有alt屬性，如只起修飾作用而沒(méi)有任何意義的圖片可設(shè)置alt屬性值為空。如：<img src="a.gif" alt="">。CSS書(shū)寫(xiě)規(guī)范語(yǔ)法l 使用兩個(gè)空格的 soft tabs 這是保證代碼在各種環(huán)境下顯

15、示一致的唯一方式。l 使用組合選擇器時(shí)，保持每個(gè)獨(dú)立的選擇器占用一行。l 為了代碼的易讀性，在每個(gè)聲明的左括號(hào)前增加一個(gè)空格。l 聲明塊的右括號(hào)應(yīng)該另起一行。l 每條聲明 : 后應(yīng)該插入一個(gè)空格。l 每條聲明應(yīng)該只占用一行來(lái)保證錯(cuò)誤報(bào)告更加準(zhǔn)確。l 所有聲明應(yīng)該以分號(hào)結(jié)尾。雖然最后一條聲明后的分號(hào)是可選的，但是如果沒(méi)有他，你的代碼會(huì)更容易出錯(cuò)。l 逗號(hào)分隔的取值，都應(yīng)該在逗號(hào)之后增加一個(gè)空格。l 不要在顏色值 rgb() 和 rgba() 中增加空格，并且不要帶有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。l 所有的十六進(jìn)制值都應(yīng)該使用小寫(xiě)字母，例如 #fff。因?yàn)樾?xiě)字母有更多

16、樣的外形，在瀏覽文檔時(shí)，他們能夠更輕松的被區(qū)分開(kāi)來(lái)。l 盡可能使用短的十六進(jìn)制數(shù)值，例如使用 #fff 替代#ffffff。l 為選擇器中得屬性取值添加引號(hào)，例如inputtype="text"。 他們只在某些情況下可有可無(wú)，所以都使用引號(hào)可以增加一致性。l 不要為 0 指明單位，比如使用 margin: 0; 而不是 margin: 0px;。l 對(duì)這里提到的規(guī)則可參考 Wikipedia 中的 CSS 語(yǔ)法部分。/* Bad CSS */.selector, .selector-secondary, .selectortype=text padding:15px; ma

17、rgin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF/* Good CSS */.selector,.selector-secondary,.selectortype="text" padding: 15px; margin: 0 0 15px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;聲明順序相關(guān)的屬

18、性聲明應(yīng)該以下面的順序分組處理：l Positioning 定位l Box model 盒模型l Typographic 排版l Visual 外觀Positioning 處在第一位，因?yàn)樗梢允挂粋€(gè)元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式。盒模型緊跟其后，因?yàn)樗麤Q定了一個(gè)組件的大小和位置。其他屬性只在組件 內(nèi)部 起作用或者不會(huì)對(duì)前面兩種情況的結(jié)果產(chǎn)生影響，所以他們排在后面。關(guān)于完整的屬性以及他們的順序，請(qǐng)參考 Recess。.declaration-order /* Positioning */ position: absolute; top: 0; right: 0; bottom:

19、0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border

20、-radius: 3px; /* Misc */ opacity: 1;媒體查詢位置盡量將媒體查詢的位置靠近他們相關(guān)的規(guī)則。不要將他們一起放到一個(gè)獨(dú)立的樣式文件中，或者丟在文檔的最底部。這樣做只會(huì)讓大家以后更容易忘記他們。這里是一個(gè)典型的案例。.element . .element-avatar . .element-selected . media (min-width: 480px) .element . .element-avatar . .element-selected . 不要使用 import與 <link> 相比, import 更慢，需要額外的頁(yè)面請(qǐng)求，并且可能引

21、發(fā)其他的意想不到的問(wèn)題。應(yīng)該避免使用他們，選擇其他的方案：使用多個(gè) <link> 元素使用 CSS 預(yù)處理器例如 Sass 或 Less 將樣式編譯到一個(gè)文件中使用 Rails, Jekyll, 或者其他環(huán)境提供的功能，來(lái)合并你的 CSS 文件。<!- Use link elements -><link rel="stylesheet" href="core.css"><!- Avoid imports -><style> import url("more.css");<

22、;/style>前綴屬性當(dāng)使用特定廠商的帶有前綴的屬性時(shí)，通過(guò)縮進(jìn)使取值垂直對(duì)齊以便多行編輯。在 Sublime Text 2 中， 使用 Selection Add Previous Line () 和Selection Add Next Line ()。/* Prefixed properties */.selector -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);單條聲明的聲明塊在一個(gè)聲明塊中只包含一條聲明的情況下，為了易讀性和快速編輯可以考慮移除其中的換行

23、。所有包含多條聲明的聲明塊應(yīng)該分為多行。這樣做的關(guān)鍵因素是錯(cuò)誤檢測(cè) - 例如，一個(gè) CSS 驗(yàn)證程序顯示你在 183 行有一個(gè)語(yǔ)法錯(cuò)誤,如果是一個(gè)單條聲明的行，那就是他了。在多個(gè)聲明的情況下，你必須為哪里出錯(cuò)了費(fèi)下腦子。/* Single declarations on one line */.span1 width: 60px; .span2 width: 140px; .span3 width: 220px; /* Multiple declarations, one per line */.sprite display: inline-block; width: 16px; height

24、: 15px; background-image: url(./img/sprite.png);.icon background-position: 0 0; .icon-home background-position: 0 -20px; .icon-account background-position: 0 -40px; 屬性簡(jiǎn)寫(xiě)堅(jiān)持限制屬性取值簡(jiǎn)寫(xiě)的使用，屬性簡(jiǎn)寫(xiě)需要你必須顯式設(shè)置所有取值。常見(jiàn)的屬性簡(jiǎn)寫(xiě)濫用包括:l paddingl marginl fontl backgroundl borderl border-radius大多數(shù)情況下，我們并不需要設(shè)置屬性簡(jiǎn)寫(xiě)中包含的所有值。例如

25、，HTML 頭部只設(shè)置上下的 margin，所以如果需要，只設(shè)置這兩個(gè)值。過(guò)度使用屬性簡(jiǎn)寫(xiě)往往會(huì)導(dǎo)致更混亂的代碼，其中包含不必要的重寫(xiě)和意想不到的副作用。/* Bad example */.element margin: 0 0 10px; background: red; background: url("image.jpg"); border-radius: 3px 3px 0 0;/* Good example */.element margin-bottom: 10px; background-color: red; background-image: url(&q

26、uot;image.jpg"); border-top-left-radius: 3px; border-top-right-radius: 3px;LESS 和 SASS 中的嵌套避免不必要的嵌套?？梢赃M(jìn)行嵌套，不意味著你應(yīng)該這樣做。只有在需要給父元素增加樣式并且同時(shí)存在多個(gè)子元素時(shí)才需要考慮嵌套。/ Without nesting.table > thead > tr > th .table > thead > tr > td / With nesting.table > thead > tr > th > td 代碼注

27、釋代碼是由人來(lái)編寫(xiě)和維護(hù)的。保證你的代碼是描述性的，包含好的注釋，并且容易被他人理解。好的代碼注釋傳達(dá)上下文和目標(biāo)。不要簡(jiǎn)單地重申組件或者 class 名稱。/* Bad example */* Modal header */.modal-header ./* Good example */* Wrapping element for .modal-title and .modal-close */.modal-header .Class和Id 命名l class 名稱中只能出現(xiàn)小寫(xiě)字符和破折號(hào)（dashe）（不是下劃線，也不是駝峰命名法）。破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空

28、間）（例如，.btn 和 .btn-danger）。l Id 名稱中只能出現(xiàn)小寫(xiě)字符和下劃線（underline）。l 避免過(guò)度任意的簡(jiǎn)寫(xiě)。.btn 代表 button，但是 .s 不能表達(dá)任何意思。l 名稱應(yīng)當(dāng)盡可能短，并且意義明確。l 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。l 基于最近的父 class 或基本（base） class 作為新 class 的前綴。l 使用 .js-* class 來(lái)標(biāo)識(shí)行為（與樣式相對(duì)），并且不要將這些 class 包含到 CSS 文件中。在為 Sass 和 Less 變量命名是也可以參考上面列出的各項(xiàng)規(guī)范。/* Bad example */.t . .red . .header . /* Good example */.tweet . .important . .tweet-header . 選擇器l 使用 classes 而不是通用元素標(biāo)簽來(lái)優(yōu)化渲染性能。l 建議避免使用在經(jīng)常出現(xiàn)的組件中

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論