769
技術社區[雲棲]
精通css（1）-規範
之前學過css，但沒有深入研究，現在在做一些web的東西，有時遇到布局的問題要弄很久，所以本著嚴肅認真的態度，還是要把css好好再學一遍！
傳說，在css沒有出現之前，html的結構是非常混亂的，因為它將文檔表現部分與內容結合在一起，看起來非常糟糕，所幸的是css的出現解決了這一問題。
既然css的出現帶來了更好的代碼結構，那我們在書寫的時候就不得不考慮一下規範問題，讓結構更加清晰。下麵是一些通用規範：
1.讓標記更有意義
有意義的標記更容易讓人理解，包括語義化的標簽，通俗易懂的變量命名等，這在團隊開發時尤為重要。
2.ID和類名
類應用於概念上相似的元素，ID應用於不同的唯一元素。所以，不到萬不得已的情況下，最好不要用id，除非它在頁麵真的隻出現一次。
另外，給id和class命名時，要盡可能保持名稱與表現方式無關。例如現在有一個紅色的警告框，很顯然我們可以給他一個，而不是。
還有啊，類用起來的確讓人感覺很爽，但要適度，不要使用過度或濫用，不然對身體不好的。
3.div和span
很多人以為div是木有語義的，其實它是有的，叫做部分（division）。它可以將文檔分為幾個有意義的區域。但是當有現有元素能實現區域分割功能時，應當避免使用div以減少標記。比如下麵的寫法
<div > <ul> <li> ... </li </ul> </div>
完全可以刪除div：
<ul > <ul> <li> ... </li> </ul>
使用span也是一樣的，隻不過它是內聯元素而已。
4.微格式
由於HTML缺少相應的元素，很難突出顯示人、地點、時間等類型的信息，於是就有人開發了一套命名標準來解決這個問題。這些命名基於vCard和iCalendar等現有的數據格式，現在成為微格式。
微格式讓我們以一種特定的方式標記數據，讓其他程序和服務可以訪問它。許多大型網站已經支持微格式了，但與LZ沒關係，避而不談，需要時去百度。
5.規劃和維護樣式表
站點越大越複雜，css就越難管理，養成一個好的習慣是十分重要的。這裏有兩種策略：
一個是創建多個不同類別的樣式表。這樣的確容易分類，但多個文件會導致從服務器發送更多的數據包，這些包會影響下載時間。從性能上來考慮的話最好不要用太多樣式表。
還有一個就是寫在一個或兩個文件裏，一個用來排版，一個用裝飾。然後在文件中務必做好注釋。如果css文件特別長，可以在注釋頭中加入標誌：
/*@group typography*/大家也可以自定義注釋規則，總之方便查看和編碼就行。也可以規定一個代碼結構，比如像下麵：
/*-----------@group 一般樣式-----------*/ /*主體樣式*/ /*reset樣式*/ /*鏈接樣式*/ /*標題樣式*/ /*其他樣式*/ /*-----------@group 輔助樣式-----------*/ /*表單*/ /*通知和error*/ /*一致的條目*/ /*-----------@group 頁麵結構樣式-----------*/ /*標題，頁腳，導航*/ /*布局*/ /*其他頁麵結構樣式*/ /*-----------@group 頁麵組件-----------*/ /*各個頁麵樣式*/
一旦養成一個好的代碼習慣，對今後寫代碼或看以前的代碼都是非常有利的。
6.其他
規範這東西一時半會總結不玩，等以後慢慢添加吧，再說，這也不是重點哈哈。
最後更新：2017-04-03 14:54:03