跨站点小部件的CSS，最佳实践？

Question

所以我有一些代码可供人们剪切+将小部件粘贴到他们的网站中（类似于谷歌分析或谷歌地图插件，如果你看过那些）。

我有一个需要以某种方式设计的整个区域。现在，我可以通过手动从像

这样的对象读取配置数据来做到这一点

var x = {idWhatever: {bg-color: red, etc....}}

或者我可以document.appendChild("style")

或者我可以内联所有的CSS（我宁可不会）。

无论发生什么事情，我都不能搞砸其他人的网页。

有关处理此事的最佳方法的任何想法吗？

编辑：理论上，我可以使用data-uri在同一个请求中发送CSS。

Answer 1

我建议您仔细选择元素类名和ID，以便它们都以小部件的名称为前缀（如<myWidget>_mainDiv和.<myWidget>_headerText）。然后确保您的样式仅定位具有这些ID /类名的元素（或至少元素内的元素）。

然后使用描述为here的方法或使用document.appendChild("style")方法包含样式表。理想情况下，您希望将CSS保存在自己的文件中，或者至少在某些地方，您仍然可以像CSS那样编写和维护它。如果你把它放在某个对象里面，或者如果你内联它，你就无法真正做到这一点。

Answer 2

给人们两个选择：

1. 样式作为参数传递（对象）。
2. 使用您的班级名称应用的样式。

在第一种情况下，您可能知道该怎么做。

在第二种情况下，添加有意义的类名，正如@aroth在答案中建议的那样（这样可以最大程度地降低干扰实现小部件的页面上应用的类的风险）。

看起来像这样：

1. 如果有人不提供样式参数，则使用默认样式。如果没有，那么
2. 如果他提供任何样式，这些样式会覆盖适当的样式。如果没有，那么
3. 如果他通过，例如。 false代替styles参数，然后不应用任何样式并依赖CSS类并相信用户将自己应用样式。