如何避免第三方库对CSS的影响？

Question

我有一个使用名为 smDateTimeRangePicker 的库的angular项目，它包含以下代码:

链接在此处

.action {
  height: 30px;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  width: 100%; }

然而，在我的项目中，还有一个包含action类的代码

<div flex class="action cell">

这段文字的意思是：CSS的影响如何避免？

以下是需要考虑的几个点：

• 有一种方法可以避免项目和库之间的CSS影响。
• 该库使用了不好的实践，必须避免影响项目。这是库中的一个错误，必须修复。
• 这种影响通常会发生，因此我需要改变我的项目以避免冲突。

- Stephen

---

只有一种方法可以使它们同时工作，那就是将一个 .action 设为私有，另一个设为公共。 - Richa

嗨Stef，使用!important来覆盖库中对动作类的任何规则。 - Laazo

遵循CSS特异性规则以避免这种情况。https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0 - nmanikiran

你不能在项目内使用另一个类吗？ - Weedoze

@Weedoze 使用另一个类可能会导致我的项目发生巨大变化。 - Stephen

Answer 1

将您的项目动作类重命名为其他名称是最简洁的方法。否则，您必须采取被认为是糟糕做法的修复措施，例如！important，但这些仍然能够完成工作。

- SGalea

---

我不确定的是，如果一个项目受到第三方的影响，改变这个项目是否是一个好选择？此外，覆盖 CSS 很困难，例如，你设置底部的值来覆盖 0，但是并没有生效。 - Stephen

理想情况下，您应该知道要使用哪些第三方，并确保在此之前没有任何冲突。在这种情况下，重命名是为了使CSS不受黑客攻击的影响。出于正确性和未来可维护性的考虑，我会进行重命名。 - SGalea

Answer 2

您可以通过增加CSS规则的特异性来避免这种情况。有多种方法可以做到这一点：

1. 在自定义文件之前包含所有第三方CSS文件，以便具有相同优先级（在您的情况下）的CSS规则可以覆盖第三方CSS文件中的规则。
2. 上述解决方案在大多数情况下都可以起作用，但是第三方CSS可能具有更高的优先级顺序，因此您可以通过在父标记上添加类来增加CSS的权重：

.parent > .action {
  / * Some CSS Code */
}

<section class="parent">
  <div flex class="action cell"></div>
</section>

MDN有一篇关于CSS特异性的好文章，在这里。

- Yogesh Yadav

Answer 3

这种情况经常发生在我身上，所以为了解决它，我只需将一个父类添加到我的页面或该特定部分即可。

<div class="my-unique-class">

    ---
        <div class="action">
            ---
        </div>
    ---

</div> 

.my-unique-class .action {
  height: 30px;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  width: 100%; 
}

- Rahul

---

这段代码在库中，因此您无法修改它。 - Stephen

在这种情况下，您需要更改您的类（如果可能的话），或者您需要使用CSS特异性来覆盖那个特定的CSS。 - Rahul

Answer 4

如果您无法更改类名称，可以通过以下方式使样式唯一于您的元素：

.action.cell {

/*your styles here*/

}

通过在动作和单元格之间省略空格，您表明两个类都在同一个元素上。此外，请确保在第三方样式表之后加载您的样式表，以便您的样式可以覆盖它们的样式。

- user2945945

Answer 5

当你有一个CSS规则时，你可以在分号之前使用!important。

background: black !important ;

它将您的规则标记为“important”，并且不能通过任何CSS文件更改。

只有内联CSS可以覆盖它：

style="background: blue !important"

- jiwopene