常用的編碼規范
HTML部分
語法
- 使用
2個空格代替制表符； - 默認縮進2個空格；
- 屬性定義全部使用雙引號
""； - 不在自閉和元素的尾部添加斜線
<br>； - 不省略可選的結束標簽。
文檔聲明
為每個HTML頁面添加標準HTML聲明：
<!DOCTYPE html>
語言屬性
為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等。
<html lang="zh">
語言代碼表：https://www.sitepoint.com/iso-2-letter-language-codes/
IE 兼容模式
通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
直接聲明字符編碼，確保瀏覽器快速識別頁面內容渲染方式。
<meta charset="UTF-8">
引入 CSS 和 JavaScript 文件
在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
class-
id,name data-*-
src,for,type,href,value -
title,alt -
role,aria-*
布爾（boolean）型屬性
布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。
減少標簽的數量
編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。
<!-- Not so great -->
<span class="avatar">
</span>
<!-- Better -->
JavaScript 生成的標簽
通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。
參考信息：http://codeguide.bootcss.com/#css-organization
CSS部分
語法
- 使用
2個空格代替制表符； - 選擇器分組時，每個選擇器單獨占一行；
- 每個聲明塊的左花括號
{前添加一個空格； - 每個聲明塊的右花括號
}獨占一行； - 每條聲明語句的分號`:``后插入一個空格；
- 每條聲明獨占一行；
- 所有聲明語句都應當以分號結尾；
- 對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，
box-shadow）； - 不要在
rgb()、rgba()、hsl()、hsla()或rect()值的內部的逗號后面插入空格； - 對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，
.5代替0.5；-.5px代替-0.5px）； - 十六進制的值全部小寫；
- 十六進制盡量使用簡寫；
- 屬性選擇器中的屬性添加雙引號
""，`input[type="text"]； - 屬性值為0，去除單位。
聲明順序
相關的屬性聲明應當歸為一組，并按照下面的順序排列：
- Positioning
- Box model
- Typographic
- Visual
不要使用 @import
與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：
- 使用多個
<link>元素 - 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件
- 通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能
媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。
帶前綴的屬性
當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。
單行規則聲明
對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，還是應當將聲明分為多行。
參考信息：http://codeguide.bootcss.com/#css-organization
命名技巧
語義化
- 語義化標簽優先
- 基于功能命名、基于內容命名、基于表現命名
- 簡略、明了、無后患
命名規則
- 所有命名都使用英文小寫
- 命名用引號包裹
- 用中橫線連接
- 命名體現功能，不涉及表現樣式(顏色、字體、邊框、背景等)
垂直居中的幾種實現方式
padding垂直居中
<div class="content">
<div class="box"></div>
</div>
.content{
width: 300px;
padding: 40px 0;
background-color: #FFAB40;
}
.box{
width: 100px;
height: 100px;
margin: 0 auto;
background-color: white;
}
顯示效果：
padding方法實現垂直居中的前提的父元素盡量不設置高度，設置上下padding值，子元素的高度隨內容的變化而變化。
絕對定位垂直居中
<div class="content">
<div class="header">header</div>
<div class="side"></div>
</div>
.content{
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
/*子元素為固定尺寸
margin-left: -200px;
margin-top: -150px;*/
/*子元素尺寸不固定*/
transform: translate(-50%,-50%);
border: 2px dashed gray;
}
.header,.side{
padding: 10px;
color: white;
background-color: #FFAB40;
}
顯示效果：
vertical-align垂直居中
<div class="content">
<div class="side middle">
</div>
</div>
.content {
width: 350px;
margin: 40px auto;
}
.middle {
text-align: center;
}
.middle:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.side {
height: 500px;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)!important;
}
.side img {
width: 300px;
vertical-align: middle;
}
作品預覽：鏈接地址
table-cell垂直居中
<div class="content">
<div class="side">
</div>
</div>
.content {
width: 350px;
margin: 40px auto;
}
.side {
height: 500px;
padding: 20px;
display: table-cell;
vertical-align: middle;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)!important;
text-align: center;
}
.side img {
width: 300px;
}
效果圖和vertical-align垂直居中的顯示一樣。
小練習：
繪制氣泡框：查看鏈接
