JavaScript库应该如何设置默认CSS样式（是否有“！notimportant”）？

Question

当JavaScript库创建一个

时，通常会在div上设置一个类，以便库的用户自己进行样式设置。然而，JS库也经常希望为

设置一些默认样式。最明显的方法是使用内联样式：

<div style="application's default styles" class="please-style-me">
  ...
</div>

然而，这将使应用程序的默认样式优先于用户的样式。一种解决方法是使用嵌套的div：

<div style="application's default styles">
  <div class="please-style-me">
    ...
  </div>
</div>

这对于像'font'这样的许多样式非常有效，但对于其他样式（如'position'）则失败了，其中内部div的样式将无法覆盖外部div的样式。

在JavaScript库中创建具有默认值的用户可样式化元素的最佳实践是什么？我不想要求用户包含默认值的CSS文件（保持库的自给自足很好）。

- danvk

---

在CSS中，“!important”只是表示重要，而在任何编程语言中，“!important”都已经表示“不重要”。 - Hanky Panky

@HankyPankyㇱ 这就是为什么CSS不是一种编程语言的原因 :D - Deepak Kamat

如果您正在使用外部CSS样式表进行样式设置，请确保将应用程序的CSS文件放在默认样式表之后。同时，使用更明确定义的选择器，如div.container而不是.container，这将覆盖其他较弱的选择器。 - Deepak Kamat

@Hanky웃Panky 只是一则旁注，我很好奇你如何发音“!important”？我会说“不重要”。 - Danubian Sailor

@ŁukaszL。我的意思是，对于任何程序员来说，这听起来像不重要，但在CSS中它意味着重要。 - Hanky Panky

Answer 1

当JS库具有默认样式集并应被覆盖时，JS库应包含单独的样式表。

JavaScript应尽可能避免直接添加样式，并将所有样式都推迟到CSS中进行。

经常需要切换一组样式。优雅处理这些情况的方法是使用CSS类。

动画可能是不合理使用外部样式表的场景。可以使用CSS动画，但为了跨浏览器支持，使用异步插值将样式从一个值动态地变化到另一个值。

- zzzzBov

---

但是，“JS库应该包括一个单独的样式表”意味着与库一起提供的样式表和库本身必须达成一致并使用唯一的类名。似乎没有办法让使用库的开发人员注入在其应用程序中唯一的类名。或者在2021年有更好的方法吗？https://dev59.com/wGs05IYBdhLWcg3wANLj#7516030可能是一种方式，也许。 - Harald

Answer 2

在CSS中没有“!notimportant”或“!unimportant”。我也没有遇到过被广泛接受的最佳实践。似乎CSS文件是应该用户可修改的样式的事实标准。

但是，如果您想将所有内容保留在一个库中，我会采用您的第二个示例，使用应用程序默认样式，然后附加一个CSS类并在类名前面添加一些唯一的内容。然后，如果实施者想要覆盖您的样式，实施者可以使用“!important”来覆盖您的用户样式。

在CSS文件中向一个或两个样式添加“!important”不应该是什么大问题，但如果您正在创建大量的内联样式，则可能不是最佳解决方案。

- Steven V