覆蓋速記背景屬性的一個屬性

可以說我使用shorhand背景屬性定義多個properties..eg：覆蓋速記背景屬性的一個屬性

.img 
{ 
    background: url('/Content/images/a.png') no-repeat scroll 100% 3px; 
}

如果我現在要重寫只是圖像的背景，現在的位置，我應該使用完整的速記符號與像更新的位置：

.img 
{ 
    background: url('/Content/images/a.png') no-repeat scroll 0 3px; 
}

或只是覆蓋類的背景位置屬性：

.img 
{ 
    background-position: 0 3px; 
}

如果是這樣，有什麼問題？只有壓倒位置纔有輕微的表現收益？

來源

2012-09-09 Danield

沒有問題。覆蓋整個速記的問題是，你可能會複製和粘貼錯誤或改變一些簡寫，但忘記其他，而事情變得不一致。 – BoltClock

只需覆蓋您需要的屬性。事實上，這種技術經常用於所謂的CSS精靈：

[class*=" icon-"] { 
    background: url("../img/glyphicons-halflings.png") no-repeat scroll 14px; 
} 

.icon-glass { 
    background-position: 0 0; 
} 

.icon-music { 
    background-position: -24px 0; 
} 

.icon-search { 
    background-position: -48px 0; 
}

這種方法（首先定義一個通用的全面規則，然後用速記規則，指定它爲每個特定的類）有兩個明顯的優勢：

這是相當短的（...當你重複完整的定義有一個屬性更新比），所以CSS文件會更小
它也是相當的可讀性（沒有人會不得不猜測是否你我們錯誤地覆蓋了一些先前的規則）。

來源

2012-09-09 08:05:46 raina77ow

感謝raina77ow，只是想知道......這兩種方式之間有什麼實際區別嗎？如果我已經這樣做了，那麼另一種方式是否有理由去重寫css來覆蓋這個位置？ – Danield

@Denield好吧，如果您先爲某個泛型選擇器定義一個通用規則，然後稍後重寫_specific_選擇器的某些部分，那麼這就很有意義。 – raina77ow

覆蓋速記背景屬性的一個屬性

回答

相關問題