Question

我正在构建基于jqWidgets库的single-page application（SPA）（它依次构建在jQuery UI的顶部）。

现在我想使用另一个框架构建的widget组件（可能性为Ext JS或jQuery UI）。

我担心CSS兼容性可能出现的问题;我在这个主题上阅读了很多，并找到了所谓的CSS Scope属性。不幸的是，我没有看到关于这个主题的最新文本，所以我不确定它的状态。

在SPA中还有其他可能性来解决这个问题吗？或解决方法？

Answer 1

如果我理解正确并且您关注（基本上也是多少）与CSS的冲突，那么在库之后包含您自己的自定义样式表是最好的起点;正如@rthor指出的那样。

然而，这可能无法解决所有问题，纯粹是因为它还取决于CSS选择器的特殊性。这里有一篇关于CSS specificity的好文章 - 这也可以让你有效地解决任何出现的CSS冲突。

现在范围？这是一个不同的主题，而且更令人困惑的一个 - 纯粹是因为（意外惊喜）浏览器实现不同。你可以只为旧浏览器使用polyfill，但这并不好。 It's purely a HTML5 feature it seems Unless you're talking about the :scope psuedo-selector.. which is working draft for CSS Selectors 4

我确定某些前端wiz能够专门针对范围给你低调，因为我希望我的解决方案有点不尽如人意。你总是可以使用容器元素（喘息......我知道，不理想。）并确保所有样式专门针对容器元素的子元素。

基本上..

<div id="widgetA" class="scope">  <div id="bla bla">.....</div> </div>

确保所有CSS选择器都以容器元素开头：

div#widgetA{ /* We essentially get a scoped namespace */ }

然而，这会带来诸如非语义标记和过度特定的选择器等对性能有害的恶意软件。但是，它有传统的支持，并且很容易......虽然有点黑客攻击。 如果您使用像Sass / Less这样的东西，您甚至可以快速将整个库CSS文件包装在div.widget{ }规则中并进行编译;给出范围（虽然有上述缺点）。

或者，从javascript视图 - 如果您定位特定元素（并且只定位那些元素），我无法看到图书馆应用自己的样式所产生的太多问题 - 因为图书馆不应该是真的篡改其他因素。
祝你好运

Answer 2

确保在库之后添加自己的样式然后你应该非常安全。如果您遇到一些奇怪的错误，只需删除这些特定的CSS规则并将其应用于不同的类。

我认为大多数错误都会与box-sizing，定位，margin / padding和尺寸直接相关。

干杯！

Answer 3

我最近不得不在一个页面上使用两个不同框架的小部件（ExtJS和jxlib，一个基于mootools的遗留小部件库。

我遇到两个问题：

第一个与盒子大小有关。 ExtJs使用box-sizing: border-box和jxLib box-sizing: content-box。将此添加到css是我所需要的：

.jxDialog * {
    box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    -ms-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
}

在Javascript方面，我只遇到一个问题got the solution in this question。使用jQuery，我不知道你是否会遇到问题。

单页面应用程序（SPA）中的不同JavaScript库

3 个答案: