HTML

1. 語(yǔ)義與呈現(xiàn)分離
   將元素的語(yǔ)義與元素對(duì)其內(nèi)容呈現(xiàn)結(jié)果的影響分開(kāi)
2. 元素選用原則
   • 少即是多（less is more）
     標(biāo)記只應(yīng)該應(yīng)內(nèi)容對(duì)語(yǔ)義的需要使用。
     tips:問(wèn)問(wèn)自己打算如何發(fā)揮一個(gè)元素的語(yǔ)義作用，如果不能答出就不用這個(gè)元素
   • 別誤用元素
     只宜將元素用于它們?cè)ǖ挠猛荆灰獎(jiǎng)?chuàng)造自有的語(yǔ)義。如果找不到適合的，可以考慮通用元素（如span或div），并用全局屬性class表明其含義
   • 具體為佳，一以貫之
     同一個(gè)元素的使用在整個(gè)頁(yè)面上要保持一致。

CSS

命名規(guī)范（很重要）

使用連字符分割

.red-box {
   border: 1px solid red;
}

BEM規(guī)范
block-component__element--modify

.stick-man__head--small {
}
.stick-man__head--big {
}

小項(xiàng)目中一般只用連字符分隔法來(lái)寫(xiě)類(lèi)名，用戶(hù)界面復(fù)雜的使用BEM方法
css命名視圖解決3類(lèi)問(wèn)題：

1. 僅從名字就能知道一個(gè) CSS 選擇器具體做什么
2. 從名字能大致清楚一個(gè)選擇器可以在哪里使用
3. 從 CSS 類(lèi)的名稱(chēng)可以看出它們之間的聯(lián)系

和JavaScript相關(guān)的類(lèi)名
js-

參考：
[譯]這些 CSS 命名規(guī)范將省下你大把調(diào)試時(shí)間

屬性書(shū)寫(xiě)順序（重要）

同一個(gè)選擇器下的屬性在書(shū)寫(xiě)時(shí)，應(yīng)按功能進(jìn)行分組，并按如下順序書(shū)寫(xiě)：

1. 布局方式、位置（position / top / right / bottom / left / float / display / overflow）
2. 盒模型（border / margin / padding / width / height）
3. 文本相關(guān)（font / line-height / text-align / word-wrap）
4. 視覺(jué)效果（background / color / transition / list-style）
   參考：
   CSS編碼規(guī)范

通用樣式規(guī)則

協(xié)議

外部資源的下載盡可能使用https協(xié)議

<!-- Recommended -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

縮進(jìn)

使用2個(gè)空格縮進(jìn)

.example {
  color: blue;
}

大小寫(xiě)

只使用小寫(xiě)（字符串及特殊情況除外）

<!-- Recommended -->
<img src="google.png" alt="Google">

末尾空白

移除末尾空白

編碼

使用 UTF-8

注釋

范圍、目的

type屬性

在樣式表和腳本中的標(biāo)簽忽略type屬性
HTML5默認(rèn) type 為 text/css 和 text/javascript 類(lèi)型，所以沒(méi)必要指定。即便是老瀏覽器也是支持的。

<!-- 推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

類(lèi)型選擇器

避免使用css類(lèi)型選擇器
出于性能考慮，非必要情況不使用標(biāo)簽名和id或class進(jìn)行組合

/* 推薦 */
#example {}
.error {}

屬性縮寫(xiě)

寫(xiě)屬性的時(shí)候盡量縮寫(xiě)

/* 推薦 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0和單位

省略0后面的單位

/* 推薦 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

url的引號(hào)

省略u(píng)rl的引號(hào)

@import url(//www.google.com/css/go.css);