不管有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫(xiě)的。 ----代碼黃金定律
一鸟蟹、前言
在寫(xiě)css時(shí)油狂，每次都會(huì)遇到是先控制子元素還是先控制父容器健霹；是先把明顯的樣式寫(xiě)出來(lái)（如顏色买置、背景），還是先控制元素位置等等灌闺。自己由于是初學(xué)艰争，沒(méi)有什么固定的書(shū)寫(xiě)規(guī)范，看一些規(guī)范性的文檔桂对，來(lái)規(guī)范自己以后的demo甩卓。
二、html篇
優(yōu)先使用語(yǔ)義化的html
對(duì)于html的編寫(xiě)蕉斜，我們應(yīng)盡量選擇語(yǔ)義化的額html逾柿，什么是語(yǔ)義化的html呢？簡(jiǎn)單來(lái)說(shuō)就是宅此，使用合適的標(biāo)簽机错，標(biāo)記合適的內(nèi)容。它們可以幫助程序員更好的理解網(wǎng)站中信息的不同方面父腕。但是不要以犧牲實(shí)用性為代價(jià)弱匪。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。
布爾（boolean）型屬性
布爾型屬性可以在聲明時(shí)不賦值璧亮。XHTML 規(guī)范要求為其賦值萧诫，但是 HTML5 規(guī)范不需要斥难。
元素的布爾型屬性如果有值，就是 true帘饶，如果沒(méi)有值哑诊，就是 false。
如果一定要為其賦值的話及刻，請(qǐng)參考 WhatWG 規(guī)范：
如果屬性存在镀裤，其值必須是空字符串或 [...] 屬性的規(guī)范名稱(chēng)，并且不要在首尾添加空白符缴饭。簡(jiǎn)單來(lái)說(shuō)暑劝，就是不用賦值。
對(duì)于屬性值的命名
應(yīng)基于功能命名茴扁、基于內(nèi)容命名铃岔、基于表現(xiàn)命名，使表達(dá)簡(jiǎn)略峭火、明了，方便閱讀html智嚷。
常見(jiàn)的屬性值命名
.wrap或.wrapper -- 用于外側(cè)包裹
.container或 .ct -- 包裹容器
.header -- 用于頭部
.body -- 頁(yè)面 body
.footer -- 頁(yè)面尾部
aside卖丸、sidebar -- 用于側(cè)邊欄
.content -- 和header footer 對(duì)應(yīng)，用于主要內(nèi)容
.navigation -- 導(dǎo)航元素
.pagination -- 分頁(yè)
.tabs > .tab -- tab 切換
.breadcrumbs -- 導(dǎo)航列表盏道、面包屑
.dropdown -- 下拉菜單
.article -- 文章
.main -- 用于主體
.thumbnail -- 頭像稍浆，小圖像
.media -- 媒體資源
.panel -- 面板
.tooltip -- 鼠標(biāo)放置上去的提示
.popup -- 鼠標(biāo)點(diǎn)擊彈出的提示
.button、.btn -- 按鈕
.ad -- 廣告
.subnav -- 二級(jí)導(dǎo)航
.menu -- 菜單
.tag -- 標(biāo)簽
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登錄
.register -- 注冊(cè)
.username -- 用戶(hù)名
.password -- 密碼
.banner -- 廣告條
.copyright -- 版權(quán)
.modal或者 .dialog -- 彈窗
三猜嘱、CSS規(guī)范
語(yǔ)法
tab 用兩個(gè)空格表示
css的 :后加個(gè)空格衅枫， {前加個(gè)空格
每條聲明后都加上分號(hào)
換行，而不是放到一行
顏色用小寫(xiě)朗伶，用縮寫(xiě), #fff
小數(shù)不用寫(xiě)前綴, 0.5s -> .5s弦撩；0不用加單位
盡量縮寫(xiě)， margin: 5px 10px 5px 10px论皆； -> margin: 5px 10px;
聲明順序
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組益楼，并按照下面的順序排列：
Positioning
Box model
Typographic
Visual
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關(guān)的樣式点晴，因此排在首位感凤。盒模型排在第二位，因?yàn)樗鼪Q定了組件的尺寸和位置粒督。
簡(jiǎn)寫(xiě)形式的屬性聲明
在需要顯示地設(shè)置所有值的情況下陪竿，應(yīng)當(dāng)盡量限制使用簡(jiǎn)寫(xiě)形式的屬性聲明。常見(jiàn)的濫用簡(jiǎn)寫(xiě)屬性聲明的情況如下：
padding
margin
font
background
border
border-radius
示例：
.element { margin-bottom: 10px; background-color: red; background-image: url("image.jpg"); border-top-left-radius: 3px; border-top-right-radius: 3px; }
大部分情況下屠橄，我們不需要為簡(jiǎn)寫(xiě)形式的屬性聲明指定所有值族跛。例如捐康，HTML 的 heading 元素只需要設(shè)置上、下邊距（margin）的值庸蔼，因此解总，在必要的時(shí)候，只需覆蓋這兩個(gè)值就可以姐仅。過(guò)度使用簡(jiǎn)寫(xiě)形式的屬性聲明會(huì)導(dǎo)致代碼混亂花枫，并且會(huì)對(duì)屬性值帶來(lái)不必要的覆蓋從而引起意外的副作用。
四掏膏、居中有幾種實(shí)現(xiàn)方式劳翰，給出代碼范例
水平居中
CSS里實(shí)現(xiàn)水平居中非常容易，inline元素用text-align:center;馒疹，block元素用margin:auto;就行了佳簸。
demo：http://js.jirengu.com/judofubevu/1/edit
垂直居中
1、利用table-cell的作用和<td>一樣颖变，在<td>元素的文本是有規(guī)則的左對(duì)齊生均，在默認(rèn)情況下，其父容器display:table;加上vertical-align:middle;
demo：http://js.jirengu.com/gagitezino
說(shuō)明：因?yàn)楦冈氐膶挾茸冃×诵壬玻幌裨瓉?lái)是 100% 的寬度马胧。原因是 table 本質(zhì)上也是 inline 元素，因此現(xiàn)在變成 inline 的父元素衔峰，它的寬度將與子元素的寬度相同佩脊。當(dāng)然，我們也可以為父元素加上 width: 100% 來(lái)強(qiáng)制指定它的寬度垫卤。
2威彰、 利用相對(duì)定位和transform
demo: http://js.jirengu.com/qaqarodajo/1/edit
3、利用flex穴肘，彈性布局歇盼。先將元素定義為彈性容器，其子元素則成為彈性項(xiàng)目梢褐。值 flex 使彈性容器成為塊級(jí)元素旺遮。justify-content: center;使元素居中；flex-direction: column;使子元素與父容器主軸起始點(diǎn)一致盈咳。不過(guò)使用flex耿眉，IE11才開(kāi)始支持。
demo：http://js.jirengu.com/zuzupoquji/2/edit
4鱼响、可以使用calc()為一個(gè)對(duì)象設(shè)置一個(gè)左右兩邊相等的外邊距鸣剪，calc()的另外一個(gè)用例是用來(lái)確保一個(gè)域的大小適合當(dāng)前的可用空間,而不會(huì)在保持合適的外邊距的同時(shí),因擠壓超出其容器的邊緣。
demo：http://js.jirengu.com/fadisucefi/1/edit
5、 絕對(duì)定位實(shí)現(xiàn)垂直居中利用transform筐骇，或者不用债鸡，使用margin-left代替也行。只要知道寬高铛纬，如果不知道厌均，就用transform。
demo：http://js.jirengu.com/bowaqabafu/1/edit
五告唆、實(shí)現(xiàn)如下效果棺弊，每種效果都只使用一個(gè)html 標(biāo)簽來(lái)實(shí)現(xiàn) 效果范例
用三種不同的方法，創(chuàng)建相同的樣式擒悬。
demo：http://js.jirengu.com/vofeyenuzi/5/edit
參考資料：
1模她、https://google.github.io/styleguide/htmlcssguide.html#General_Style_Rules
2、http://codeguide.bootcss.com/
