JavaScript库应该如何设置默认的CSS样式(是否有“!notimportant”?)

前端之家收集整理的这篇文章主要介绍了JavaScript库应该如何设置默认的CSS样式(是否有“!notimportant”?)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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文件(保持库自包含很好).

解决方法

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

JavaScript应该尽可能避免直接添加样式,并将所有样式推迟到合理的CSS.

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

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

猜你在找的JavaScript相关文章