HTML
- 語(yǔ)義與呈現(xiàn)分離
將元素的語(yǔ)義與元素對(duì)其內(nèi)容呈現(xiàn)結(jié)果的影響分開 - 元素選用原則
- 少即是多（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è)面上要保持一致。
- 少即是多（less is more）
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)寫類名肥印，用戶界面復(fù)雜的使用BEM方法
css命名視圖解決3類問(wèn)題：
- 僅從名字就能知道一個(gè) CSS 選擇器具體做什么
- 從名字能大致清楚一個(gè)選擇器可以在哪里使用
- 從 CSS 類的名稱可以看出它們之間的聯(lián)系
和JavaScript相關(guān)的類名
js-
參考：
[譯]這些 CSS 命名規(guī)范將省下你大把調(diào)試時(shí)間
屬性書寫順序（重要）
同一個(gè)選擇器下的屬性在書寫時(shí)识椰，應(yīng)按功能進(jìn)行分組，并按如下順序書寫：
- 布局方式深碱、位置（position / top / right / bottom / left / float / display / overflow）
- 盒模型（border / margin / padding / width / height）
- 文本相關(guān)（font / line-height / text-align / word-wrap）
- 視覺(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;
}
大小寫
只使用小寫（字符串及特殊情況除外）
<!-- Recommended -->
<img src="google.png" alt="Google">
末尾空白
移除末尾空白
編碼
使用 UTF-8
注釋
范圍腹鹉、目的
type屬性
在樣式表和腳本中的標(biāo)簽忽略type屬性
HTML5默認(rèn) type 為 text/css 和 text/javascript 類型，所以沒(méi)必要指定敷硅。即便是老瀏覽器也是支持的功咒。
<!-- 推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
類型選擇器
避免使用css類型選擇器
出于性能考慮，非必要情況不使用標(biāo)簽名和id或class進(jìn)行組合
/* 推薦 */
#example {}
.error {}
屬性縮寫
寫屬性的時(shí)候盡量縮寫
/* 推薦 */
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);
