常用的編碼規(guī)范
HTML部分
語法
- 使用
2個(gè)空格代替制表符尸执； - 默認(rèn)縮進(jìn)2個(gè)空格婚夫；
- 屬性定義全部使用雙引號(hào)
""浸卦； - 不在自閉和元素的尾部添加斜線
<br>； - 不省略可選的結(jié)束標(biāo)簽案糙。
文檔聲明
為每個(gè)HTML頁面添加標(biāo)準(zhǔn)HTML聲明：
<!DOCTYPE html>
語言屬性
為 html 根元素指定 lang 屬性限嫌，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音侍筛，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等萤皂。
<html lang="zh">
語言代碼表：https://www.sitepoint.com/iso-2-letter-language-codes/
IE 兼容模式
通知 IE 采用其所支持的最新的模式撒穷。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
直接聲明字符編碼匣椰，確保瀏覽器快速識(shí)別頁面內(nèi)容渲染方式。
<meta charset="UTF-8">
引入 CSS 和 JavaScript 文件
在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性端礼，因?yàn)?text/css 和 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)按照以下給出的順序依次排列，確保代碼的易讀性蛤奥。
class-
id,name data-*-
src,for,type,href,value -
title,alt -
role,aria-*
布爾（boolean）型屬性
布爾型屬性可以在聲明時(shí)不賦值佳镜。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要凡桥。
減少標(biāo)簽的數(shù)量
編寫 HTML 代碼時(shí)蟀伸，盡量避免多余的父元素。很多時(shí)候缅刽，這需要迭代和重構(gòu)來實(shí)現(xiàn)啊掏。
<!-- Not so great -->
<span class="avatar">
</span>
<!-- Better -->
JavaScript 生成的標(biāo)簽
通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯衰猛，并且降低性能迟蜜。能避免時(shí)盡量避免。
參考信息：http://codeguide.bootcss.com/#css-organization
CSS部分
語法
- 使用
2個(gè)空格代替制表符啡省； - 選擇器分組時(shí)娜睛，每個(gè)選擇器單獨(dú)占一行；
- 每個(gè)聲明塊的左花括號(hào)
{前添加一個(gè)空格卦睹； - 每個(gè)聲明塊的右花括號(hào)
}獨(dú)占一行畦戒； - 每條聲明語句的分號(hào)`:``后插入一個(gè)空格；
- 每條聲明獨(dú)占一行结序；
- 所有聲明語句都應(yīng)當(dāng)以分號(hào)結(jié)尾障斋；
- 對于以逗號(hào)分隔的屬性值，每個(gè)逗號(hào)后面都應(yīng)該插入一個(gè)空格（例如笼痹，
box-shadow）配喳； - 不要在
rgb()酪穿、rgba()、hsl()晴裹、hsla()或rect()值的內(nèi)部的逗號(hào)后面插入空格被济； - 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如涧团，
.5代替0.5只磷；-.5px代替-0.5px）； - 十六進(jìn)制的值全部小寫泌绣；
- 十六進(jìn)制盡量使用簡寫钮追；
- 屬性選擇器中的屬性添加雙引號(hào)
""，`input[type="text"]阿迈； - 屬性值為0元媚，去除單位。
聲明順序
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組苗沧，并按照下面的順序排列：
- Positioning
- Box model
- Typographic
- Visual
不要使用 @import
與 <link> 標(biāo)簽相比刊棕，@import 指令要慢很多，不光增加了額外的請求次數(shù)待逞，還會(huì)導(dǎo)致不可預(yù)料的問題甥角。替代辦法有以下幾種：
- 使用多個(gè)
<link>元素 - 通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件
- 通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能
媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關(guān)規(guī)則的附近识樱。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部嗤无。
帶前綴的屬性
當(dāng)使用特定廠商的帶有前綴的屬性時(shí)，通過縮進(jìn)的方式怜庸，讓每個(gè)屬性的值在垂直方向?qū)R当犯，這樣便于多行編輯。
單行規(guī)則聲明
對于只包含一條聲明的樣式休雌，為了易讀性和便于快速編輯灶壶，建議將語句放在同一行。對于帶有多條聲明的樣式杈曲，還是應(yīng)當(dāng)將聲明分為多行驰凛。
參考信息：http://codeguide.bootcss.com/#css-organization
命名技巧
語義化
- 語義化標(biāo)簽優(yōu)先
- 基于功能命名、基于內(nèi)容命名担扑、基于表現(xiàn)命名
- 簡略恰响、明了、無后患
命名規(guī)則
- 所有命名都使用英文小寫
- 命名用引號(hào)包裹
- 用中橫線連接
- 命名體現(xiàn)功能涌献，不涉及表現(xiàn)樣式(顏色胚宦、字體、邊框、背景等)
垂直居中的幾種實(shí)現(xiàn)方式
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方法實(shí)現(xiàn)垂直居中的前提的父元素盡量不設(shè)置高度枢劝，設(shè)置上下padding值井联，子元素的高度隨內(nèi)容的變化而變化。
絕對定位垂直居中
<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;
}
作品預(yù)覽：鏈接地址
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垂直居中的顯示一樣您旁。
小練習(xí)：
繪制氣泡框：查看鏈接
