高品質代碼之HTML、CSS篇

標籤：style   color   使用   os   strong   io   re   c   

HTML篇

1. 使用語義化標籤<strong><fieldset><legend><ul>等等，少用<div><span>
2. 判斷網頁標籤語義化是否良好的方法：去掉樣式，看看網頁結構是否依然有序。
3. 當頁面內標籤無法滿足設計時，才會適當添加div和span
4. 少用純樣式標籤b font u等，改用strong em等
5. 即可以用div又可以用p時，盡量使用p

CSS篇

1. CSS結構

            一般分為base common page三個層次。

            base層：提供CSS Reset功能和粒度最小的通用類。被所有頁面所引用，相對穩定，基本不用維護；

            common層：提供組件級的CSS類。即模組化後的CSS類。

                 拆分模組技巧：1）模組與模組之間盡量不要包含相同的部分，如果有，應拆分出來，成為一個獨立的模組。

                                         2）模組應該保證數量儘可能少的原則下，做到儘可能簡單

            page層：網頁中非高度重用的模組。

      2.   CSS命名空間

            駝峰命名法與底線“-”或“_”命名法

            一般情況下，駝峰法用於區分不同單詞，底線用於表明從屬關係。如timeList/timeList-lastItem

            通過給body定義class,該頁面樣式均包含在這個class裡面以防止重複定義

     3.   多用組合，少用繼承

           合理利用多個類進行定義

     4.   如果處理上下margin

           如果不確定模組上下margin，最好不要把它寫到模組的類裡，而是使用類的組合，單獨定義原子類（如mt10代表margin-top:10px的類）。最好不要混用margin-top和margin-            bottom

     5.   低權重原則-避免過多嵌套

           少使用子選取器，CSS選擇符權重儘可能低；盡量多用class，少用id

     6.   CSS sprite

           1）只適用於背景的圖片，對<img src=""/>設定圖片不適用

           2） 橫向縱向都平鋪的圖片不適用，如果是橫向平鋪，sprite圖應該豎直排練，反之亦然

     7.   CSS hack

           _ IE6  * IE6/IE7  \9 IE8;盡量少用hack

     8.   hover樣式

           l(link)ov(visited)e h(hover)at(active)e

     9.   hasLayout觸發

           zoom：1；或 postion:relative；等