HTML-CSS-JS編碼規範

時間 2019-11-24

標籤 html css 編碼規範欄目 HTML 简体版

原文原文鏈接

1、HTML代碼規範

1.img標籤要寫alt屬性（alt屬性：圖片沒法加載時的提示文字）

<img src = "imgs/btn.png"  alt = "ABC" >
複製代碼

2.單標籤能夠不寫閉合標籤

<input  type = "text" >
<br>
<img src= "" >
複製代碼

3.自定義屬性以 data- 開頭

<div data-count = "5" ></div>
複製代碼

4.td放在tr裏面，li放在ol/ul裏面（如不標準瀏覽器可能有本身的解析方式）

<tr>
<td></td>
<td></td>
</tr/>
<ul>
<li></li>
<li></li>
</ul>
複製代碼

5.行內元素裏不能使用塊元素

a標籤裏嵌套div，可能會致使a標籤沒法正常點擊若是span裏面嵌套div，要把span加上display：blockcss

6.每一個頁面都寫，設置頁面渲染模式爲標準模式

7.html要保持簡潔，不能套不少層

8.style不能寫在body裏，有可能出現渲染兩次，閃屏問題

9.html加lang屬性（有利於SEO）

<html lang = "zh-CN" >
複製代碼

10.meta標籤裏要寫charset屬性,避免網頁顯示unicode符號時亂碼

<head>
    <meta charset = "utf-8" >
</head>
複製代碼

11.特殊符號使用html實體

符號實體編碼html

© &copy;
¥ &yen;
® &reg;
> &gt;
< &lt;
& &amp;
複製代碼

12.img標籤空src的問題，a標籤空href問題，background-image空url問題

動態給src賦值時，空src會使瀏覽器認爲src是當前頁面連接，就會再一次請求頁面，解決辦法：html5

<img src = "about:blank" alt >
複製代碼

這樣瀏覽器會去加載一個空白頁面，不會加載當前頁面，也不會報錯 background-image空url，會報404錯誤android

13.行內元素換行和空格的影響

<form>
	 <label>Email: </label>
	 <input type = "email" >
</form>
複製代碼

在label和input中間有一個空格，可能會致使label的width和input的width二者的和等於form致使input換行，由於塊級元素開始會有空白文本注意：註釋標籤也會建立相應的節點，只是不渲染css3

14.類名使用小寫字母加中劃線鏈接

<div class = "btn-icon" ></div>
複製代碼

15.使用合適的標籤

內容是表格就使用table，table有自適應的優勢；若是是一個列表就使用ol/ul標籤，擴展性比較好
是輸入框就使用input，而不是寫一個p標籤，而後設置contenteditable=true，由於這個在IOS Safari上光標定位容易出現問題（若是須要作特殊效果除外）
粗體就使用b/strong，而不是本身設置font-weight
表單就使用form標籤，注意form裏面不能套form
跳鏈就使用a標籤，而不是本身寫onclick跳轉。a標籤裏面不能套a標籤
使用html5語義化標籤，如導航使用nav，側邊欄使用aside，頂部和尾部使用header/footer，頁面比較獨立的部分可使用article，如用戶的評論
若是是按鈕就應該寫一個button或者<input type="button">，而不是寫一個a標籤設置樣式，由於使用button能夠設置disabled，而後使用CSS的:disabled，還有:active等僞類使用，例如在:active的時候設置按鈕被按下去的感受
若是是標題就應該使用標題標籤h1/h2/h3，而不是本身寫一個<p class="title"></p>，相反若是內容不是標題就不要使用標題標籤了
在手機上使用select標籤，會有原生的下拉控件，手機上原生select的下拉效果體驗每每比較好，不論是IOS仍是android，而使用<input type="tel">在手機上會彈一個電話號碼的鍵盤，<input type="number"><input type="email">都會彈相應的鍵盤
若是是分隔線就使用hr標籤，而不是本身寫一個border-bottom的樣式，使用hr容易進行檢查
若是是換行文本就應該使用p標籤，而不是寫br，由於p標籤能夠用margin設置行間距，可是若是是長文本的話使用div，由於p標籤裏面不能有p標籤，特別是當數據是後端給的，可能會帶有p標籤，因此這時容器不能使用p標籤

2、CSS編碼規範

1.文件名規範

文件名：小寫字母加中劃線變量名：駝峯命名引入的css能夠不寫type = "text/css"，可是要寫relweb

<link rel = "stylesheet" href = "../common.css"></link>
複製代碼

js同上後端

<script src = "test.js"></script>
複製代碼

2.屬性書寫順序，通常重要的放在最前面

3.不要使用樣式特色命名，類的命名應當使用它所表示的邏輯意義，如`company-logo、commit-btn`

4. 選擇器的性能，選擇器通常不要超過三個

5.使用css3的選擇器完成一些高級的功能

6.使用正確的選擇器，儘可能不要使用很大的選擇器

7.多寫註釋

8.屬性值規範

若是值是0，一般都不用帶單位
色值用十六進制，少用rgb
注意border none和0的區別

9.不要設置太大的z-index，一般保持在個位數就能夠

10.合併屬性

11.注意float/absolute/fixed定位會強制設置成block

12.清除浮動（兼容IE8及以上）

.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
複製代碼

13.css動畫規範

使用transition作動畫的時候不要用all全部屬性，用哪一個屬性就寫哪一個屬性，Safari- 可能會有奇怪的抖動
使用transform替代position作動畫（transition不會重繪）
使用css代替js完成動畫

14.圖片壓縮（tinypng）

15.正確使用background和img

若是是頭圖等直接展現的圖片仍是要img標籤，若是是作爲背景圖就使用background，使用img能夠寫個alt屬性加強SEO
複製代碼

16.響應式開發不要雜合使用rem

17.適當使用`:before` `:after`（會在標籤後面追加一個標籤）

18.少用`absolute`定位（頁面的主要佈局不能用absolute），能夠用`float`

19.移動端提升可點區域範圍

20.不要設置input的line-height，在Safari瀏覽器的輸入光標會變大，若是要居中，使用`padding`

21.移動端彈框要禁止body滑動

由於IOS Safari切換輸入框的時候會頁面會彈閃得很厲害，由於你在切的時候它會先把鍵盤收起來，而後再彈出來，這個時間很短，給人感受頁面彈閃了一下，但若是把body禁止滑動了就不會有這個問題，這有兩個解決辦法，第一種是把body fixed住，第二種設置body overflow: hidden，相對來講第二種比較簡單一點。IOS10徹底不會閃，IOS9如下仍是會閃
複製代碼

22.手動編寫漸變的CSS，能夠用一個在線工具https://www.cssmatic.com/，生成兼容性很強的css樣式

background: rgba(232,228,236,1);
background: -moz-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(232,228,236,1)), color-stop(100%, rgba(202,195,213,1)));
background: -webkit-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -o-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: -ms-linear-gradient(left, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
background: linear-gradient(to right, rgba(232,228,236,1) 0%, rgba(202,195,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e4ec', endColorstr='#cac3d5', GradientType=1 );
複製代碼

23.行內元素能夠直接設置margin-left/margin-right

3、JS編碼規範

1.變量命名

2.生命變量時要賦值

3.函數的返回值類型要肯定

由於常用undefined來判斷變量有沒有定義，若是要賦值應該要賦空值，如對象賦值爲null，數字賦值爲0，字符串賦值爲空字符，
複製代碼

4.不要讓代碼在全局做用域下運行

5.簡潔代碼

使用三目運算代替簡單的if-else
使用箭頭函數代替簡單的函數
複製代碼

6.儘可能不要在js裏面寫css

7.在必要的地方添加非空判斷，提升代碼的穩健性

8.不要使用for in 循環數組（以防有人往數組原型上添加了一個函數）

9.點擊跳轉不要用onclick，使用a標籤

10.調試完關閉無用的console

11.注意this的指向

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。