隔离大量CSS文件以仅定位网站的一部分（CMS）

Question

我正在开发一个CMS，其中一个设计挑战是将CSS隔离到网站构建器页面的某些部分

|||||||||||||||||||||||
|      CMS HEADER     | 
|||||||||||||||||||||||
| C |                 |
| M |                 |
| S |   BUILDER       |
|   |   CANVAS        |
|   |                 |
|||||||||||||||||||||||

我需要从builder-canvas中隔离标题和侧边栏的CMS CSS。 我还需要在画布上构建的网站的CSS才能应用到画布。

我试过..

• 使用CSS作用域和jQuery插件来做到这一点，但是由于CSS数量很大，这会使已经过重javascript的构建器减慢到很远的程度。
• iFrame不是选项，因为我需要使用大量的JavaScript来同时从这两个部分获取数据。

我能想到的另一件事是将ID添加到某些部分，并将这些ID添加到相应CSS文件中的每个选择器。 我会用SASS来完成这个。

这将花费大量时间，主要是因为我也在CMS中使用插件CSS文件和Bootstrap，我需要隔离一切。

问题

1. 将这些CSS ID添加到每个选择器会降低性能吗？
2. 还有其他选择吗？

Answer 1

1. 不明显，只是避免嵌套太多层次。
2. 我知道你提到iframe不是一个选项，但很多现有的网站（shopify，wordpress）似乎都使用iframe来实现这一目标 - 对我来说这似乎是最干净的方式，因为人们不一定需要知道其他。如果您的页面托管在同一个域中，则可以使用window.parent从iframe传递数据和正常访问方法。

有人here建议使用可以提供给你的postmethod API     更多传递数据的范围，以及来回发送指令。