1.背景介紹
真正閱讀程序的是人，而不是計算機，所以所寫代碼具有良好的可讀性，是優秀程序員必備的素質之一。在大型的系統開發中，往往需要很多人的通力配合，例如，開源軟件Linux 之所以能夠爲全球頂尖程序員共享、協作開發，也得益於規範化和標準化的編碼規範。
規範應該儘量一致；即使有例外，也只能是少數情況，而不能是很多例外。好的代碼規範能夠提高代碼的可讀性便於協作溝通，好的模式能夠在上層設計上避免不必要的 bug 出現。
2.知識剖析
基本準則
符合web標準,語義化html,結構表現行爲分離,兼容性優良.頁面性能方面,代碼要求簡潔明瞭有序,儘可能的減小服務器負載,保證最快的解析速度.
html規範
頁面的第一行添加標準模式聲明!DOCTYPEhtml
代碼縮進：tab鍵設置四個空格（通常在軟件右下角設置相應空格大小）
html中除了開頭的DOC和'UTF-8'或者head裏特殊情況可以大寫外，其他都爲小寫，css類都爲小寫
建議爲html根元素指定lang屬性，從而爲文檔設置正確的語言lang="zh-CN"
不同doctype在不同瀏覽器下會觸發不同的渲染模式
非特殊情況下樣式文件必須外鏈至…之間;非特殊情況下JavaScript文件必須外鏈至頁面底部
儘可能減少div嵌套.
在頁面中儘量避免使用style屬性,即style="…";寫在相應的樣式文件中
對於屬性的定義，確保全部使用雙引號，絕不要使用單引號
背景圖片請儘可能使用sprite技術,減小http請求
給區塊代碼及重要功能(比如循環)加上註釋,方便後臺添加功能
不要使用@import,與<link>標籤相比,@import指令要慢很多,不光增加了額外的請求次數,還會導致不可預料的問題。
css規範CSS書寫順序
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
排版規範
如果是在html中寫內聯的css，則必須寫成單行
每一條規則的大括號{前後加空格
屬性名冒號之前不加空格，冒號之後加空格
每一個屬性值後必須添加分號;並且分號後空格
多個selector共用一個樣式集，則多個selector必須寫成多行形式
規則書寫規範
使用單引號，不允許使用雙引號
每個聲明結束都應該帶一個分號，不管是不是最後一個聲明
除16進制顏色和字體設置外，CSS文件中的所有的代碼都應該小寫
除了重置瀏覽器默認樣式外，禁止直接爲htmltag添加css樣式設置
每一條規則應該確保選擇器唯一，禁止直接爲全局.nav/.header/.body等類設置屬性
class命名
規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或_
命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合+
不允許通過1、2、3等序號進行命名；避免class與id重名
class用於標識某一個類型的對象，命名必須言簡意賅
儘可能提高代碼模塊的複用，樣式儘量用組合的方式
規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的信息。應該用意義命名，而不是樣式顯示結果命名
佈局類：header, footer, container, main, content, aside, page, section
包裹類：wrap, inner
區塊類：region, block, box
結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表類：list, item, field
主次類：primary, secondary, sub, minor
狀態類：active, current, checked, hover, fail, success, warn, error, on, off
導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
分割類：group, seperate, divider
等分類：full, half, third, quarter
表格類：table, tr, td, cell, row
圖片類：img, thumbnail, original, album, gallery
論壇類：forum, bbs, topic, post
方向類：up, down, left, right
其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
3.常見問題
問題1:class命名有什麼常用方式？
4.解決方案
在實際編程中，命名問題一直是很麻煩的問題，要想代碼可讀性高，維護方便，就必須規範命名。這裏介紹幾種命名方法
原子類命名規則
將複用性高的單條屬性直接命名成類
.ml5{margin-left:5px;}
模塊命名規則
按照職能劃分命名規則
例如，模塊是nav，便可以命名nav-tittle、nav-left
BEM
BEM思想是由於項目開發中，每個組件都是唯一無二的，其名字也是獨一無二的，組件內部元素的名字都加上組件名，並用元素的名字作爲選擇器，自然組件內的樣式就不會與組件外的樣式衝突了。這是通過組件名的唯一性來保證選擇器的唯一性，從而保證樣式不會污染到組件外。
BEM的命名規矩很容易記：block-name__element-name–modifier-name，也就是模塊名+元素名+修飾器名
5.編碼實戰
暫無
6.擴展思考
問題一:原子類的優劣？
原子類簡單方便，但是不宜維護，控制困難。原子類其實不是一種工具，而是一種編寫CSS的思想，即：抽出高度複用的樣式模塊，獨立成一個原子類，爲對應的模塊添加。但是不宜過度使用，否則就和直接添加style沒有區別了,在組件開發中其實不推薦使用原子類，因爲這會降低組件的可複用性。可複用性的最理想狀態就是組件不僅僅在不同的頁面中表現一致，在跨項目的情況下，也能夠運行良好。
在項目中，使用原子類之前應該考慮一下，這個場景是否變動大而且不可複用，如果是的話，我們可以放心的使用原子類。
7.參考文獻
如何規範CSS的命名和書寫？
HTML+CSS日常編碼規範
CSS命名規範-BEM
8.更多討論
問：導航欄一般怎麼命名的
答:一般用nav或者navbar
問：box-sizing 在css書寫順序中的位置
答：這個是屬於盒子寬度大小，放在前面，屬於第一類。
問：單個類書寫的規範？比如很多屬性的那種
答：
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
技能樹.IT修真院
“我們相信人人都可以成爲一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裏是技能樹.IT修真院，成千上萬的師兄在這裏找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。
快來與我一起學習吧~邀請鏈接 http://www.jnshu.com/login/1/14303208