減少CSS代碼重複

我發現自己不斷重複使用各種CSS元素的各種代碼塊。一個是圓角。下面的實施例的代碼：減少CSS代碼重複

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-khtml-border-radius: 10px; 
border-radius: 10px;

我試圖2種不同的方法來減少碼重複，這兩者都具有缺點。

首先是在一個類來包裝的代碼，如.rounded10和這個類添加到需要圓角邊框（有一個很好的20+）的頁面上的所有元素。 Bootstrap做類似的事情，但我不喜歡這種方法，因爲它將非語義數據引入到HTML中。

二是創建CSS元素應該有圓角邊框喜歡的列表：

.offers, .welcome, .sidebar, .post { 
    ... Rounded corners code here ... 
}

我不知道，如果這種方法甚至用，我從來沒見過它。

是否有其他方法我錯過了或任何可以幫助我減少這種情況下的重複。事情變得混亂，特別是當你必須使用瀏覽器供應商屬性。

我不使用SASS或更少，或任何CSS框架或傭工如指南針（雖然我有）。我更喜歡用香草CSS編碼。這只是我工作的方式。請不要使用這些建議。

來源

2013-05-07 James Jeffery

我不認爲有那麼多規則需要供應商前綴。你當然不需要'border-radius'的廠商前綴 – 2013-05-07 23:07:57

@ExplosionPills我並不知道這一點，border-radius只是一個例子。 – 2013-05-07 23:09:24

如果您不願意使用「.rounded」類，則您建議的第二種方法似乎具有最少的問題。這當然不應該是一個問題，並且它可以更容易地更改所有角落的實例。唯一的潛在問題是如果你想要一堆有不同大小的角落。我同意下面的@Elliot Lings的答案：如果你不願意使用單一的樣式類來實現它，那麼在你的重用中可能會有一個更深層次的問題。 – 2013-05-07 23:12:28

除了給類爲元素的某些功能，並避免CSS預處理器沒有太多其它你能做到的。

如果您發現自己具有圓角大小約20多類，那麼你應該問你的設計的一致性。

上有HTML和CSS語義如http://nicolasgallagher.com/about-html-semantics-front-end-architecture/一些偉大的文章。

我不會建議你使用SASS或LESS之類的東西，但我強烈建議你這樣做。它將允許您輕鬆添加圓角類，並節省您輸出CSS的壓縮格式的時間。

來源

2013-05-07 23:10:33

+1;這基本上是我要寫的。我唯一要補充的是，只使用''rounded'類;這正是*正確的方式，不僅在CSS和HTML之間，而且在CSS內分離問題。 – 2013-05-07 23:14:21

我同意。擁抱可用於「修復」CSS缺陷並加速開發的工具。 – Bart 2013-05-07 23:17:04

@Elliot我會檢查出那篇文章謝謝。我可能會跳回到使用SASS。 – 2013-05-07 23:17:13

-2

削減CSS的一種方法是使用更好的選擇器。例如，如果你需要將所有div在菜單塊有一個背景顏色，你可以有：

#menu div 
{ 
    background-colour:red; 
}

一個良好的refrence見CSS selectors在Sitepoint。

來源

2013-05-07 23:46:43 mikek3332002

減少CSS代碼重複

回答

相關問題