Question

我有一个JavaScript插件，可以将一些HTML和CSS代码注入网页。注入的一些代码来自我修改能力有限的第三方软件包。

鉴于主机页面上的样式是不可预测的（因为我无法预测用户将在哪个站点上运行插件），如何设计注入的代码（HTML + CSS）不受外部样式的影响，并且只能使用插件随附的样式。

例如，如果宿主页面具有DIV元素的样式，则我想确保这种样式不应用于所注入代码中的任何DIV

Answer 1

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

使用动态CSS类。构建生产版本时，可以使用一些捆绑工具，例如grunt，gulp等来生成动态的CSS类。

在开发模式下：

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

在生产模式下：

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

使用内联样式还是很重要的！指令

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（OOCSS）
原子CSS（ACSS）

隔离页面CSS

2 个答案: