将注入内容的样式与页面CSS隔离

Question

我有一个JavaScript插件，它注入了一些HTML&CSS代码到网页中。一些注入的代码来自第三方软件包，我修改它的能力有限。

考虑到主页上的样式是不可预测的(因为我无法预测用户将在哪些网站上运行插件(，我如何设计注入的代码(HTML+CSS(不受外部样式的影响，只使用插件包含的样式。

例如，如果主页面有DIV元素的样式，我希望确保这种样式不会应用于注入代码中的任何DIV

Answer 1

如果我理解正确，有两种方法：

1. 使用动态css类。你可以使用一些捆绑工具，比如咕哝、吞咽。。以在构建用于生产的版本时生成动态css类

关于开发模式：

<div class="box"></div>
css:
box{
.red{}
}

关于生产模式：

<div class="d2fdcdf_dfdafdaf"></div>
css:
.d2fdcdf_dfdafdaf{
.red{}
}

2. 使用内联样式或重要！指令

Answer 2

您必须维护一个清晰的CSS规则命名约定，该约定不受命名冲突的影响——与Bootstrap、Grid或Foundation等CSS框架的做法非常相似。

有一些不错的模型可以用来勾勒出最适合你大脑的惯例。例如，块元素修改器模型(BEM(:

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

例如

.stick-man {}
.stick-man__head {}
.stick-man__head--small {}
.stick-man__head--big {}
.stick-man__arms {}
.stick-man__feet {}
.stick-man--blue {}
.stick-man--red {}

围绕这一点的其他想法是：

• SMACSS——CSS的可扩展和模块化架构(SMACSS(
• 面向对象CSS
• 原子CSS(ACSS(