当两个类具有一些常见样式时，如何减少CSS

Question

我对CSS并不熟悉。但是我正在为我的项目相关工作。

我遇到了两个CSS课程具有一些常见数据，如下所示：

.KPIDashboardContainerInertiaMatrixCell_data
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 120px;
-moz-column-width: 120px;
column-width: 120px;
}
.data_right_column
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;
}

我试图将其减少如下：

.KPIDashboardContainerInertiaMatrixCell_data.data_right_column
{
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;    
}

并且在html中指定类名称时，我正在指定：

KPIDashboardContainerInertiaMatrixCell_data data_right_column

，但它不起作用。有人可以告诉我我在这里做错了吗？还有其他方法可以做同样的事情吗？

Answer 1

.KPIDashboardContainerInertiaMatrixCell_data, .data_right_column {
    display: table-cell;
    font-size: 18px;
    padding-top: 30px;
    font-weight: bold;
    text-align: left;
}
.KPIDashboardContainerInertiaMatrixCell_data {
    -webkit-column-width: 120px;
    -moz-column-width: 120px;
    column-width: 120px;
}
.data_right_column {
    -webkit-column-width: 80px;
    -moz-column-width: 80px;
    column-width: 80px;
}

Answer 2

创建一个基类，然后添加不同的样式的其他类

例如，想象一些按钮：

我们有一个基本按钮类，可以设置一些默认值（所有按钮之间共享）

.btn {
  padding: 10px 30px;
  display: inline-block;
  box-shadow:2px 2px #444;
  border-radius:50px;
}

然后您可以开始添加在样式上不同的类

.btn-red {
  background: red;
  color: #fff;
}
.btn-green {
  background: green;
  color: #fff;
}

html：

<div class="btn">Base btn</div>
<div class="btn btn-green">Green btn</div>
<div class="btn btn-red">Red btn</div>

这样做可以使您的代码保持干燥，并更容易更改共享样式。

演示https://jsfiddle.net/zzv09a67/2/