聲明相同的CSS類中的多個時間

<div class="big_box">haha</div> 
<div class="small_box">haha</div>

這（1型）似乎可行： -聲明相同的CSS類中的多個時間

.big_box, .small_box { border:1px solid #ccc; /* lengthy attributes*/} 
.big_box { width:150px; height:150px; } 
.small_box { height:140px; width:140px; }

這（2型）也可以工作： -

.big_box { border:1px solid #ccc; width:150px; height:150px; /* same lengthy attributes*/} 
.small_box { border:1px solid #ccc; width:150px; height:150px; /* same lengthy attributes* }

當然，2型是冗長並且對於大多數常用屬性（具有相同的值）重複，
使用類型1是否存在任何問題？
（或簡稱，這是允許的？）

PS 3型工程太（但我發現很難管理）...... 如果

<div class="box big">haha</div>

而且

.box { border:1px solid #ccc; /* lengthy attributes*/} 
.big { width:150px; height:150px;}

來源

2012-02-24 ajreal

是的！它是100％允許的！這是一種常見做法。 – 2012-02-24 14:39:14

哦，真的嗎？因爲我有這樣的印象，就像宣佈編程中不允許使用同一個班級 – ajreal 2012-02-24 14:40:13

那只是不是css的工作原理。它應該是級聯的。但是請注意，你甚至沒有多次重新聲明相同的選擇器，'.big_box，.small_box'是與'.big_box'不同的選擇器。但如果你有的話，它會很好。 – 2012-02-24 14:45:33

類型1實際上很常見，當聲明多個類與一些共享相同的屬性和一些擁有其獨特的屬性。 2型是有點髒維持，而3型與類型1

它是所有作品，只是一個編碼維護

來源

2012-02-24 14:42:27 vicker313

使用第一個語法沒有問題。

它實際上是有用的，因爲你注意到，以避免重複相同的造型。

它也是有用的獨立的造型類型：定位，字體，顏色。

例如，您可以在一個文件中定位元素，在另一個文件中定義顏色/背景的樣式，只需更改對您的CSS文件負責即可更改網站的「主題」顏色，而不會破壞佈局本身。

這是例如在jQuery UI CSS Framework中使用的。您有：

的jQuery UI的基礎CSS
所有的jQuery的主題文件

來源

2012-02-24 14:41:02

所有三種可能性是允許的。我更喜歡第三個簡潔。

來源

2012-02-24 14:41:08 jammon

我會使用選項3，以便兩個框都繼承類框，然後您可以定義該框是小還是大。

但是，有很多方法可以做到這一點，但這肯定是我的建議。

來源

2012-02-24 14:41:20 Chris

我實際上需要的尺寸是不同的 – ajreal 2012-02-24 14:43:00

的風格和輕鬆的事，我更喜歡複姓類。

這樣你可以做這樣的事情：

<div class="box-big">haha</div> 
<div class="box-small">haha</div> 

div[class|=box]{ 
     /* shared attributes*/ 
} 

.box-big{ 
    /* stuff */ 
} 
.box-small{ 
    /* stuff */ 
}

來源

2012-02-24 14:44:01 Christoph

這是否被認爲是一種表達？ '的div [類| =盒]' – ajreal 2012-02-24 14:45:22

聲明相同的CSS類中的多個時間

回答

相關問題