1

当我们使用 HTML、JavaScript 和 CSS 编写小部件并将小部件打包为一个库时，我们可能有

.foobarwidget-sidebar-section .sub-section { border: 1px solid #000 }

所以我们将实现 JavaScript 来处理我们定义的这个小部件的行为，它可以在我们网站上的任何页面或其他人使用。

但是，如果有这个小部件的用户，并且他在自己的网页中有 HTML 用于“子部分”：

.sub-section { color: green }

然后几乎他.sub-section将添加到我们小部件的 CSS 样式中。

他确实可以使用

#the-main-content .sub-section { color: green }

或者

.a-main-content-box .sub-section { color: green }

这样它就不会影响我们的小部件，但是如果他的设计是该#main-content框包含我们的sidebar小部件（或搜索框小部件，或社交链接按钮小部件）怎么办？在这种情况下，他.sub-section将再次影响小部件的 CSS。

当然，我们可以为我们的小部件定义所有可能的 CSS 样式，例如

.foobarwidget-sidebar-section .sub-section { color: blue !important;
                                             font-weight: bold !important;
                                            /* ... and all possible CSS styles ... */
                                           }

但这看起来不是一个很好的可行解决方案。我们也可以使用

.foobarwidget-sidebar-section > .sub-section { ... }

所以.sub-section必须是直接的孩子，但它不会影响独立.sub-section影响我们小部件的CSS。在这种情况下，有什么好的解决方案来处理它？

4

4 回答 4

1

你应该为你的小部件使用一个不太通用的类，比如.my-custom-widget-name-sub-section

于 2013-04-28T00:49:34.643 回答
1

需要处理这类事情的 Disqus 选择通过将他们的小部件放在iframe父样式表不会影响它的地方来解决他们的问题。我相信其他流行的小工具也可以做到这一点。

于 2013-04-28T00:40:02.283 回答
0

您可以使用 jQuery 将您的 css 文件放在最后：

$('head').append('<link rel="stylesheet" href="yourcss-last.css" type="text/css" />');
于 2013-04-28T01:19:49.820 回答
0

我只会使用一个id. CSS 之神对 ID 不屑一顾，但我认为这是完全可以接受的，因为您可能或可能无法控制标记/用户样式。这将减少用户意外破坏您的布局的机会，同时仍然允许他们在需要时这样做。无论好坏，我在许多处理类似问题的 jQuery 模块中都看到了这种模式。

拥有更通用的“模块化”类也将有所帮助，该类描述了的一般功能foobarwidget并且不依赖于诸如.sidebar-section. 从那里，添加构成foobarwidget. 这将使您的 css 更干净，并允许您部署foobarwidget到页面的任何区域，而无需创建全新的类名。

所以， .foobarwidget-sidebar-section .sub-section { border: 1px solid #000 }变成：

#foobarwidget {
  border: 1px solid #000;
  background:white;
}

#foobarwidget .subsection {
  /* this could probably be declared in #foobarwidget */
  color:black; /* one could use !important here, if absolutely necessary */
}
于 2013-04-28T02:07:20.357 回答