Question

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

这（类型1）似乎可行： -

.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的问题？
（或者只是允许这样做？）

P.S 类型3也有效（但我觉得很难管理）... 如果

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

和

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

Answer 1

类型1在声明多个类时实际上非常常见，其中一些类共享相同的属性，而另一些类具有其拥有的唯一属性。类型2有点脏，而类型3类似于类型1。

这一切都有效，只需要编码风格和易于维护

Answer 2

使用第一个语法没有问题。

它实际上很有用，因为您注意到以避免重复相同的样式。

分隔样式的类型：定位，字体，颜色也很有用。

例如，您可以在一个文件中具有定位元素的样式，在另一个文件中具有颜色/背景的样式，允许您通过更改负责颜色的css文件来更改站点的“主题” ，而不会破坏布局本身。

这是jQuery UI CSS Framework中使用的内容。你有：

jquery ui base css
所有jquery主题文件

Answer 3

允许所有三种可能性。我更喜欢第三种，因为它简洁。

Answer 4

我会使用选项3，以便两个框都继承类框，然后您可以定义该框是小还是大。

但是，有很多方法可以做到这一点，但这肯定是我的建议。

Answer 5

我更喜欢带连字符的课程。

这样你可以这样做：

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

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

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

多次声明相同的CSS类

5 个答案: