Html 如何为css类添加更多的特殊性。背景颜色为蓝色，以便覆盖默认的div'；背景色

我有这个CSS类

.background-color-blue {
    background-color: #00C0FF;
}

如果需要，我希望能够在某些元素上使用它

我现在认为它不是很语义化，但它用于HTML模板，这意味着易于使用，体积小，通用性强

我想能够使用它的元素，如一些面板，侧边栏，模态，顶栏菜单，或任何我想要的

当然，它可以工作，但仅适用于尚未指定背景色的div

在这种情况下：

<div class="modal background-color-blue"></div>

及

我不确定这些。。。哪种解决方案更好？或者还有其他更有效的解决方案吗

我认为这个方法：

.modal.background-color-blue {
    background-color: #00C0FF;
}

是不好的，因为我将不得不做任何类似的元素

及

---

也不好，因为模态已经有了一些填充。

只需使用

！重要信息

这将有助于覆盖

   .background-color-blue {
    background-color: #00C0FF !important;
}

---

看看这个：

如果你认为modal可以有不同的颜色，我想你会喜欢这个（受ITCSS-BEM启发）。这将帮助您保持较低的特定率，防止您在将来的类中遇到一些问题或必须覆盖它们

例如：

HTML:

<div class="container">
  <div class="modal modal--grey">
    <h1 class="modal__title"> Modal Title</h1>
    <p class="modal__text">Hello this is the content of the modal !</p>
  </div>
</div>

正确的用法是

! important

通常它应该是蓝色背景。也许还有别的东西阻止了蓝色元素

---

但别忘了这一点；最后！考虑到重要信息。

使用：.modal.background-color-blue{background-color:#00C0FF；}的问题是什么？无法清晰地显示您的代码，请共享您的代码。@LuísFerreira它可以工作，但选择器太长，例如：

.background-color-blue、.modal.background-color-blue、.top-bar.background-color-blue、，.whatever.background-color-blue{background color:#00C0FF；}

它是用于html模板的，所以应该更通用，我也这么认为！在这种情况下，“重要”是有意义的，但我不确定，因为MDNi试图找出阻止它的原因，这被认为是不好的做法，问题是它在css中声明的位置。如果在.modal之前声明了.background color blue，则modal将保持白色。否则它是蓝色的。所以这可能是我问题的另一个解决方案：将.background颜色蓝色放在CSS文件的末尾。但是依赖于它在css中声明的位置对我来说似乎不是一个好的实践-但是我真的不知道。。。

   .background-color-blue {
    background-color: #00C0FF !important;
}

<div class="container">
  <div class="modal modal--grey">
    <h1 class="modal__title"> Modal Title</h1>
    <p class="modal__text">Hello this is the content of the modal !</p>
  </div>
</div>

/*Base Class */

.modal{
  width:40%;
  margin:0px auto;
  padding:20px;
  text-align:center;
  border-radius:10px;
  box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}

/*Attribute classes for the modal, just make a choice in your HTML ! */

.modal--grey{
  background:rgb(220,220,220);
  border:1px solid rgb(200,200,200);

}

.modal--blue{
  background:rgb(65,105,225);
  border:1px solid rgb(58,95,205);

}

! important