1、結構化命名 VS 語義化命名
結構化命名：比較容易理解元素在代碼中的位置，一旦網頁結構發生變化，元素需要重新命名，而且樣式也需要修改
語義化命名：讓人清楚元素在網頁中的角色，一旦網頁結構變化，不需要重新命名，只需要修改css樣式即可。
2、語義化命名tips
- Container：就是將你頁面中的所有元素包在一起的部分，這部分你還可以命名爲: ”wrapper“, “wrap“, “page“.
- Header：是網站頁面的頭部區域，一般來講，它包含網站的logo和一些其他元素。這部分你還可以命名爲:”top“, “logo“, “page-header”
- Navbar：橫向的導航欄，是最典型的網頁元素。這部分你還可以命名爲:“nav”, “navigation”, “nav-wrapper”.
- Menu：包含一般的鏈接和菜單，這部分你還可以命名爲: ”sub-nav ”, “links“.
- Sidebar： 部分可以包含網站的次要內容，比如最近更新內容列表、關於網站的介紹或廣告元素等…這部分你還可以命名爲: ”sub-nav“, “side-panel“, “secondary-content“.
- Footer：包含網站的一些附加信息，這部分你還可以命名爲: ”copyright“.
- topnav：頂部導航
3、css屬性的書寫順序
遵循佈局定位屬性-->自身屬性-->文本屬性-->其他屬性，儘量保證同類屬性寫在一起
- 佈局定位屬性：display，list-style，position，top，right，bottom，left，float，clear，visibility，overflow；
- 自身屬性：width，height，margin，padding，border，background；
- 文本屬性：color，font，text-decoration，text-align，vertical-align，white-space；
- 其他屬性：不常用的屬性；
4、必須爲大區塊樣式添加註釋，小區塊適量註釋
5、所有的圖片最好加上alt屬性
6、css樣式多個屬性可以分行寫，提高代碼的簡潔性可讀性
7、border：0 或者bord：0px，雖然頁面上看不見，但瀏覽器進行了渲染，會消耗內存，這種情況下，直接border：none，瀏覽器不會進行渲染，也不會消耗內存。
disp：none 不會做渲染，但是visiblity：hidden，則會做渲染，浪費瀏覽器內存。
8、使用外部樣式表：易於維護修改，而且可以提高頁面速度，因爲css文件會在瀏覽器中產生緩存。內置在html文檔中的css則會每次重新下載，。
9、代碼壓縮：當需要把項目部署到網絡上時，可以使用YUI compressor來除去代碼中的註釋和空格，提高網頁的加載速度。
10、命名爲兩個單詞中，首字母大寫
11、charset=“utf-8”是國際通用的編碼格式，什麼語言都可以正常訪問，charset=“gb2312”只能用於中文，遇到別國的語言就會出現亂碼的情況。
12、塊級元素會佔據一整行，而內聯元素會並列顯示在一行
13、瀏覽器一般會有默認的設置，所以需要重置樣式，把瀏覽器默認的樣式去掉。
14、css的命名方式有 駝峯式（sideshowWarp），用-連接（sideshow-Warp ），下劃線連接（sideshow_Warp ）,書寫規則統一，儘量不要混着來寫。
