CSS基礎知識之精簡代碼

精簡CSS代碼可以協助減小樣式檔案的大小，使代碼清晰，方便維護。

使用簡寫屬性及預設值

{:;:;:;:;}{:;    }{:;:;:;:;:;:;}{:;}

常用簡寫屬性包括 animation、background、border、font、margin、padding、transition...

 

省略了部分簡寫屬性值的時候，缺失的部分就會使用該屬性的預設值，

{:;}{:; }{:;:;}

 可以指定不帶顏色的邊框實現變化效果

{:;  :;}{:;  }

過渡效果可以精簡到只需要指定一個期間就可以了

:;    :;

 

background-position 的預設值為 0% 0%，

:; 

如果只省略其中一個，省略掉的那一個會變成 50%/center，

:;:;

 

有幾個例外的簡寫屬性省略了的部分並不會使用預設值，而是從已有的值複製（可以這麼理解），

比如包括 border-color, border-style, border-width, border-radius, margin, padding...

這些屬性的特點是一個屬性通常有4個值分別對應4個不同的方向，

:; :;  :; :;  :; :; 

 

有這麼一種情況，就是多餘地用預設值去覆蓋預設值，比如

{:; }

一個 div 本來預設的就是 block，再重新定義一遍起不了任何作用

 

合理利用繼承

通常情況下，指定了樣式的元素的後代會自動繼承某些樣式屬性，比如 color

.content div,
.content p,
.content ul,.content li {:;}{:;}

注意，有些元素會帶有瀏覽器預設樣式，比如 h1 的 font-size，該預設樣式會覆蓋掉繼承值

常用可繼承屬性包括 color, font, text-align, text-indent...

也可以強制指定一個不能繼承的屬性實現繼承效果

{:; }

 

群組選取器

{:;}{:;}{:;}{:;}{:;}{:;}{:;}

 

十六進位RGB顏色值

如果每兩位都相等，則可以簡寫

:;:;

 

使用具體數值的字型粗細

{:;}{:;}{:;}{:;}

數字 400 等價於 normal，而 700 等價於 bold。

 

簡化背景圖片路徑

背景圖片路徑可能會是這樣，

:;

背景圖片和CSS檔案分這麼開起什麼作用呢？兩者本來就是密切相關的，

所以應該把背景圖片檔案夾和CSS檔案放在同一目錄下，那路徑就會變成這樣

:;

簡單多了，甚至圖片檔案夾根本沒必要命名為複數型式，雙引號也可以去掉，

:;

再進一步，

:;

雖然檔案夾的名字已經沒有語義了，但是，通常在這個目錄下常用的也就兩個檔案夾而已，

一個圖片檔案夾，一個字型檔夾，還有可能會有一個放置其它檔案的檔案夾，都可以這樣簡化。

 

去掉 0 值的單位

:;:;

 

Firefox暫時不支援去掉為0的時間值的單位，也就是說 

:; 

與其這樣，不如乾脆就不指定這類值，通常情況下預設的值就是 0秒

:; 

 

去掉浮點數兩端的0

{:;:}

對於不透明度，去掉小數點前面的0也可以很好的理解，因為它不會大於1

{:;:;}

不過對於其它可能大於1的浮點值來說，也許會讓其他人以為你是忘記了小數點前面的數，

:;

 

去掉ID選取器前面的限定符

ID本來就是唯一的，在前面加上元素限定和祖先元素通常情況下都是沒有意義的

{ }{ }

 

下面的內容多多少少有點喜新厭舊的意思了

去掉老舊瀏覽器安全色代碼

{:;}{:;:;:;}{:;:;}

請始終使用標準模式，如今IE6/7/8 都要面臨淘汰了。

 

去掉多餘的瀏覽器首碼

還在你的CSS代碼中寫一大堆瀏覽器廠商首碼嗎？那你就out了！

{:;:; :; :; :;}{:;:;}{:; }

 

還有，就是壓縮代碼了！關於代碼壓縮的內容，就不在這裡說了！

 

參考資料：

• http://www.w3school.com.cn/css/index.asp
• http://caniuse.com/
• http://css3please.com/
• Smashing CSS: Professional Techniques for Modern Layout, by Eric A. Meyer
• Pro CSS for High Traffic Websites, by Antony Kennedy & Inayaili de león