6

当 JavaScript 库创建<div>. 时，它通常会在 div 上设置一个类，以便库的用户可以自己设置样式。然而，对于 JS 库来说，想要为<div>.

库执行此操作的最明显方法是使用内联样式：

<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 文件（让你的库保持独立是很好的）。

4

2 回答 2

2

当 JS 库具有应该使用但也应该被覆盖的默认样式集时，JS 库应该包含单独的样式表。

JavaScript 应尽可能避免直接添加样式，并在合理的情况下将所有样式推迟到 CSS。

打开和关闭一组样式是很常见的。优雅地处理这些情况的方法是使用 CSS 类。

简单地使用外部样式表可能不合理的情况是动画。当然可以使用 CSS 动画，但是为了支持跨浏览器，异步插值用于将样式从一个值设置为另一个值。

于 2013-04-01T02:41:39.747 回答
1

没有!notimportant或!unimportant在 CSS 中。而且我还没有遇到公认的最佳实践。似乎 CSS 文件是用户可修改样式的事实标准。

但是，如果您想将所有内容保存在一个库中，我会以您的第二个示例为例，使用您的应用程序默认样式，然后向其附加一个 CSS 类，并在类名前添加一些独特的东西。然后，如果实施者想要覆盖您的样式，实施者可以只使用!important覆盖您的用户样式。

在 CSS 文件中添加!important一个或两个样式应该不是什么大问题，但是如果您要创建一堆内联样式，这可能不是最好的解决方案。

于 2013-04-01T02:34:02.310 回答