概論
HTML
一迹炼、body的第一個子元素應該是一個容器，它包含各種不需要在頁面顯示的圖標颠毙，比如width斯入、height樣式都為0的分享圖，以及其他圖標之類的東西。
二、頁面正式內容請遵守下面的七級結構，這七級結構已經足以構建最復雜的頁面，尤其是在使用了bs的前提下姑原。
三、凡是頁面默認不顯示，需要觸發(fā)顯示的內容，比如彈出層、飄窗等杀怠，應當放到正式內容的后面椰憋，單獨用容器存儲，這樣能盡快加載正式內容赔退。
四橙依、表示內容的圖片，用img標簽硕旗，表示形式的圖片窗骑，用css背景圖。網站LOGO應當用背景圖漆枚。
五创译、在每一個塊狀元素，列表元素和表格元素后墙基，加上一新空白行软族，以跟其他元素區(qū)分開刷喜。
六、內聯(lián)元素盡量寫在一行內立砸，這樣可以避免空格讓元素之間出現(xiàn)縫隙掖疮。
CSS
一、嵌套選擇器中應當盡量多出現(xiàn)類名颗祝，少出現(xiàn)元素名浊闪，如果一定要出現(xiàn)元素名，也應出現(xiàn)在最后一級螺戳。嵌套選擇器盡量用>子選擇器搁宾，而不是空格后代選擇器。嵌套最好不要超過三級温峭，最多四級猛铅。
二、響應式css的精髓之一就是隱藏和顯示凤藏，要善于在小寬度瀏覽器中隱藏某些組件奸忽，然后顯示另一些組件。
三揖庄、類名應該是語義化的栗菜，也就是說，用類名來描述這個元素“是干什么的”蹄梢，而不是描述它“是什么樣子的”疙筹。所以，應當少用表象的詞禁炒，比如left而咆、center、red這種幕袱，我不是說不用暴备，而是說要少用，控制在最低们豌。應該多用表意的詞涯捻，比如alert、danger望迎、large等障癌。
四、類的命名應當遵守統(tǒng)一的規(guī)范辩尊，目前最流行的規(guī)范就是BEM規(guī)范涛浙，我有專門的文章介紹它：BEM命名法，其實很簡單
五、類的命名還應當遵循單一功能原則蝗拿，單一功能原則規(guī)定每個類都應該有一個單一的功能晾捏，并且該功能應該由這個類完全封裝起來。在CSS中哀托，單一功能原則代表每一段代碼惦辛、類和模塊只做一件事。當我們提交CSS文件時仓手，這意味著每個獨立的組件（例如輪播效果和導航欄）都應該有自己的CSS文件胖齐。
對于文件的目錄結構，可以有兩種嗽冒，一種是以組件為大類呀伙，另一種是以文件類型為大類，下面都有舉例添坊。用哪種都是可以的剿另，視具體情況而定。
/components
|- carousel
|- |- carousel.css
|- |- carousel.partial.html
|- |- carousel.js
|- nav
|- |- nav.css
|- |- nav.partial.html
|- |- nav.js
/components
|- css
|- |- carousel.css
|- |- nav.css
|- html
|- |- carousel.partial.html
|- |- nav.partial.html
|- js
|- |- carousel.js
|- |- nav.js
六贬蛙、不要濫用id雨女，id的主要用途有兩個：第一個是錨點，第二個是給橫切命名阳准。id跟表現(xiàn)無關氛堕，id在css里面只用在橫切身上。
七野蝇、聲明順序
這是一個選擇器內書寫CSS屬性順序的大致輪廓讼稚。這是為了保證更好的可讀性和可掃描重要。作為最佳實踐绕沈，我們應該遵循以下順序（應該按照下表的順序）：
結構性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現(xiàn)性屬性：
background, border etc.
font, text
八锐想、并列選擇器書寫
祖先元素一樣的，寫在同一行乍狐，不一樣的赠摇，另寫一行，比如：
h1,
h2,
h3 {
font-size: 16px;
}
.slide>a, .slide>b {
font-size: 16px;
}
基于Bootstrap澜躺，我將頁面的正式內容分成七級結構：
第一級：橫切（part）
橫切是body元素下的單位蝉稳，它的寬度一般是瀏覽器的寬度（所以body元素寬度也應該是瀏覽器寬度）抒蚜，橫切高度根據內容實際高度而定掘鄙。橫切的作用是，給HTML代碼分最大級別的塊嗡髓，以及給后代元素當祖先元素操漠。
第二級：容器（container）
這個是bs引入的層，我把它放到橫切的里面。它只用于控制頁面結構浊伙。通常一個橫切就只包含一個容器撞秋，偶爾會包含多個容器。容器的內容寬度就不是瀏覽器寬度了嚣鄙，肯定比瀏覽器寬度小吻贿。
第三級：行（row）
行也是bs引入的層，是容器內的單位哑子，一個容器內可以有一行舅列，也可以有多行。
第四級：列（colomn）
列也是bs引入的層卧蜓，也就是div.col-lg-x帐要，是row內的單位，它的寬度一般是N/12（因為柵格結構一般是12列）弥奸。一個行內可能有一個列榨惠，也可能有多個列。
第五級：區(qū)塊（block）或者叫組件（Component）
區(qū)塊是列內的最高單位盛霎，是第一個跟內容緊密相關的實體赠橙。任何UI組件都是區(qū)塊，任何相當于一個UI組件的東西都是區(qū)塊摩渺，比如一個ul列表就是一個內容塊简烤，一系列的圖文塊的集合也是內容塊，一個form組件是一個區(qū)塊摇幻。
兩個區(qū)塊通常是上下排列横侦，極少數情況兩個區(qū)塊也會左右排列。
第六級：元素組（element-group）
元素組是區(qū)塊/UI組件的組成單位绰姻，比如幻燈組件里面的一系列圖片枉侧，就是一個元素組，幻燈組件里的若干個小點（或縮略圖）又是一個元素組狂芋，等等榨馁。或者帜矾，幻燈組件里面的一個大圖加一個小圖加一行文字描述組成一個元素組翼虫，比如，ul列表里面的一個li元素就是一個元素組屡萤，因為li元素中可能包括圖片珍剑、文字、鏈接死陆。
注意招拙，元素組不代表只有一層結構，元素組是頁面最復雜的結構，可能有多層别凤，是這七層中最難搞的一層饰序，也是一個前端程序員在這七層中最需要熟練掌握的部分。
第七級：元素（element）
基層單位规哪，比如幻燈組件里的大圖元素組里的一張大圖求豫，就是一個元素，一張縮略圖也是一個元素诉稍，ul列表里li元素下的a元素就是元素注祖，img元素也是一個元素，一個button元素也是元素均唉。
總結：這七個層級是晨，前四級負責內容呈現(xiàn)的位置、響應式設計等舔箭，后三級負責內容本身罩缴。
各級的類名命名原則
第一級：橫切
橫切的類名跟HTML術語有關，比如下圖的各種名稱层扶，以及適當的其他類似名稱來命名箫章，比如banner、belt（腰帶）等镜会。有一個慣例是檬寂，把相當于頁面軀干的部分叫做wrap，因為不能叫body戳表。
下圖其實是HTML5新增的標簽桶至，這些標簽你可以用也可以不用，我個人偏向于只讓header匾旭、footer镣屹、nav用標簽，其他用div.xxx寫法价涝，因為header女蜈、footer、nav表意明確無歧義色瘩，其他幾個標簽不容易直觀辨識伪窖。強調一下，根據HTML5的規(guī)定居兆，nav只表示header下面的那個長條形的導航覆山，如果你的頁面還有其他小型導航，不要用nav標簽史辙。
第二級：容器汹买、第三級：行、第四級：列
它們自帶類名聊倔，所以不需另寫類名晦毙。
第五級：區(qū)塊
區(qū)塊類名以內容含義命名，比如網站logo耙蔑，可以叫header-logo见妒，也就是橫切名加含義的寫法。比如一個幻燈區(qū)塊甸陌，類名就可以叫wrap-slide须揣，表示wrap橫切里面的一個幻燈組件。
第六級：元素組
元素組的類名一般是“區(qū)塊名-元素組名”钱豁，比如幻燈組件里有一系列縮略圖耻卡，那么包裹這套圖的容器就是元素組，它的類名可以是slide-thumbnails牲尺。
第七級：元素
元素的類名卵酪，可以遵守著名的“BEM命名法”，也就是說谤碳，將區(qū)塊名溃卡、元素名、修飾符加在一起蜒简，就是元素級的類名瘸羡。當然也可以不寫類名，用嵌套選擇器聲明搓茬。
另外
另外犹赖，適當的使用嵌套選擇器，可以減少類名卷仑。你應當適量使用嵌套選擇器冷尉，以及適量使用類名選擇器，不要偏向某個極端系枪。嵌套選擇器不應該超過三級雀哨，最多四層，也就是最好a>b>c私爷，極限是a>b>c>d雾棺，不要再多。
用Emmet表示我推薦的層級結構
div.global-partname>div.container>div.row>div.col-lg-6.col-md-7>div.blockname>div.elementgroupname>element
展開得到
<div class="global-partname">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7">
<div class="blockname">
<div class="elementgroupname">
<element></element>
</div>
</div>
</div>
</div>
</div>
</div>
橫切的命名示例
我推薦的一個命名示例是：
div.#icon //-->用于存放各種LOGO和ICON
header //-->LOGO衬浑、網站項目名（比如文章捌浩、圖庫、論壇等）和登陸組件等
nav //-->本項目的導航條
wrap //--> 軀干
footer //-->頁腳
div.#fixed //--> 各種漂浮工秩、彈窗等
