css中的继承和单独样式

我正在为电子邮件制作一份时事通讯。包含30个列，所有列都具有以下类：

.content-text {
    padding: 10px 10px 10px 10px !important;
    font-size: 16px;
    line-height: 1.3;

  }

每一列都需要有上面的类，但是每一列都需要有不同的背景色。例如：

.column--left__content {
    background-color: #bebab1;
  }

也就是说，列--左内容应该继承内容文本中的所有内容。我怎样才能做到最好

HTML

<table class="row">
  <tbody>
    <tr>
      <th class="small-12 large-1 columns first first--column__color " style="width:1%;">
        <table>
          <tr>
            <th>
              <p></p>
            </th>
          </tr>
        </table>
      </th>
      <!-- Here is how I solved this until now -->
      <th class="small-12 large-5 columns first content-text column--left__content">
        <table >
          <tr>
            <th>
              <h5><strong>This is headline 1</strong></h5>
              <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </th>
          </tr>
        </table>
      </th>
     </tr>
   </tbody>
</table>

这是标题1
Lorem ipsum door sit amet，Concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作

目前，我正在调用sam

中的

内容文本和
列--left\u content
，这看起来不太好

这样做的最佳实践是什么？我认为fx
列--左内容必须继承
。内容文本
，但也有单独的样式

编辑

假设您的HTML如下所示：

<section class="wrapper">
    <div class="col1"> col 1</div>
    <div class="col2"> col 2</div>
    <div class="col3"> col 3</div>
</section>

并为每个类指定一种颜色：

.col1 {
    background-color: red;
}

.col2 {
    background-color: green;
}

我希望这会有帮助，一个好的选择就是少用CSS。你可以少用@extend这个CSS概念

.contest-test {
   .context-text(); /* Copies everything from .context-text down here */
   border: 1px solid red;
}

首先，请遵循以下步骤：如果元素的每个迭代都有相同的类，那么您就做错了

第二：您可以通过不指定类，而是将基本CSS提供给元素本身来轻松解决问题

例如这样的事情：

.wrapper > div {
    padding: 10px 10px 10px 10px !important;
    font-size: 16px;
    line-height: 1.3;
}

th {
 padding: 10px 10px 10px 10px !important;
 font-size: 16px;
 line-height: 1.3;
}

然后根据需要添加背景色类
 一种可能的方法是在CSS中使用第n个子项选择器


.wrapper{
颜色：#fff；
背景色：无；
宽度：50%；
高度：3雷姆；
线高：3rem；
字体大小：1.5rem；
}
.包装纸{
填充：0 1rem；
}
.p:第n个子项（1）{
背景：红色；
}
.p:n个子项（2）{
背景：绿色；
}
.p:n个子项（3）{
背景：棕色；
}

第1列

第2列

第3列

非常感谢您的回答。我刚刚更新了我的问题。如果你有时间，我想让你看看。您是否仍然认为您的解决方案是最好的方法？原则仍然适用，您可以为您的通用样式创建一个通用类（这意味着有30个类做同样的事情，我个人更喜欢上面的解决方案“.wrapper>div”），并为每种颜色创建一个特定的类。。。回答你的问题。。是的，谢谢你的回答。不幸的是，我不得不使用CSS。