982
高質量的CSS
1.瀏覽器模式和DTD
我們平常用到的瀏覽器可能有多個模式，比如標準模式，兼容模式。在標準模式中，瀏覽器根據規範顯示頁麵。兼容模式為了兼容老版本瀏覽器下的代碼，用了很多非標準的解析方式。
DTD全稱Document Type Definition（文檔類型定義）。一個DTD包含元素的定義規則、元素間關係的定義規則、元素可使用的屬性、可使用的實體或符號規則。
如果漏寫了DTD，IE6，IE7，IE8就會觸發兼容模式。DTD詳細參考https://www.w3school.com.cn/tags/tag_doctype.asp
2.如何組織CSS代碼
《編寫高質量代碼》一書中推薦base+common+page的層疊結構。
2.1base層
base層力求精簡通用，提供CSS reset功能和力度最小的通用類——原子類。該層會被所有頁麵引用，與具體UI無關。
由於每個瀏覽器的默認樣式都不統一，所以可以在這層通過CSS reset覆蓋瀏覽器的默認樣式，統一定義成自己的樣式。
2.2common層
common層位於中間，提供組件級的CSS類。代碼盡可能封裝複用。
2.3page層
page層位於最高層，控製具體頁麵的精確樣式，所以每個頁麵都可能會有一個page。建議將網站所有page層代碼放在一個文件裏。分塊寫上注釋，便於維護。
3.麵向對象風格的CSS
顧名思義，CSS在書寫時的命名規範，結構組織可以參考麵向對象編程的一些規範。比如使用駝峰命名來區分單詞，.itemList，使用“-”來表示從屬關係，itemList-firstList。多用組合，少用繼承等。
另外，本書還推薦少用低權重原則。多用class，少用子選擇器。這樣樣式容易被覆蓋，易於維護。
4.CSS Sprite
Sprite看起來好用，其實還有一些注意點:
1.它能合並的隻能是用於背景的圖片，對於<img src="" />設置的圖片，是不能合並到CSS Sprite中的，這樣會影響可讀性。
2.不適用與橫向和縱向都平鋪的圖片。
3.CSS Sprite最大的好處是減少服務器壓力。這需要付出“降低開發效率”和“增大維護難度”的代價。如果你的網站流量並不大的話，並不推薦用這種方法。
5.其他問題
5.1 CSS hack
5.1.1 IE條件注釋法
<!--[if IE6]> 隻在IE6下生效 <![endif]--> <!--[if gt IE6]> IE6以上都生效 <![endif]--> <!--[if ! IE6]> 隻在IE6下不生效 <![endif]-->
這是微軟官方推薦的hack方式，它是最安全的hack方式。
5.1.2選擇符前綴法
在CSS選擇符前加一些隻有特定瀏覽器才能識別的符號，從而讓某些樣式隻對特定瀏覽器生效。例如“*html”隻對IE6生效。“*+html”隻對IE7生效。
5.1.3樣式屬性前綴法
在CSS屬性名前加一些隻有特定瀏覽器才能識別的符號，從而讓某些屬性隻對特定瀏覽器生效。例如“_l”隻對IE6生效。“*”隻對IE6,IE7生效。
.box{
width:60px;
_width:60px;
*width:60px;
}
5.2超鏈接樣式問題
隻要遵循love hate原則就沒問題：l(link )ov(visited)e h(hover)a(active)te。
5.3 hasLayout
IE奇葩的根源。這個在精通css係列中有講。觸發hasLayout會解決大部分IE下的bug。通過設置“zoom:1”和“posisiton:relative”來觸發是最有保障的方式。
hasLayout設計初衷是為了輔助塊級元素的盒模型解析的，如果用於行內元素，會有一些特殊的效果。
5.4塊級元素和行內元素
常見塊級元素：div,p,form,h1,caption,dd,dt,dl,table,ul,ol......
常見行內元素：a,img,strong,span,input,i,br......
區別：
1.塊級元素獨占一行，默認其寬度填滿父元素寬度。行內元素不會獨占一行，寬度隨元素內容變化，沒有width，height屬性；
2.塊級元素可以設置margin，padding。行內元素可以設置水平方向的margin，padding，豎直方向的不會產生邊距效果；
display還有inline-block屬性，IE6，IE7下會有bug，修複方法百度一下。
最後更新：2017-04-03 05:39:41