跨站点小部件的CSS,最佳实践?

问题描述 投票:4回答:2

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

我有一个需要以某种方式设计的整个区域。 现在,我可以通过手动从对象中读取配置数据来做到这一点

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

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

或者我可以内联所有的CSS(我宁愿不)。

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

有关处理这个的最佳方法的任何想法?

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

javascript css
2个回答
3
投票

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

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


1
投票

给人两种选择:

  1. 样式作为参数( 对象 )传递。
  2. 使用您的类名应用的样式。

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

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

它可能看起来像这样:

  1. 如果有人不提供样式参数,则使用默认样式。 如果没有,那么
  2. 如果他提供任何样式,这些样式将覆盖适当的样式。 如果没有,那么
  3. 如果他通过例如。 false而不是styles参数,然后不应用任何样式并依赖CSS类并相信用户将自己应用样式。
© www.soinside.com 2019 - 2024. All rights reserved.