包括 HTML + CSS 文件无冲突

Question

我有一个带有自己的样式表的 HTML 标头模板。该 HTML 代码很复杂，它包含菜单、不同的块和其他浮动元素。 CSS 文件包含整个网站的样式。总共有 800 个选择器。

当我在现有网站中包含 HTML 和 CSS 时，它就会崩溃。这是因为很多 CSS 规则干扰了网站的规则。例如，标题模板中的 CSS 有一个名为“.nav”的选择器，网站也有这个选择器。由于两者的规则不同，网站就崩溃了。

我的问题是如何在不完全重新编码的情况下将此 HTML 文件“包含”到现有网站中。

我执行以下操作：处理模板中的样式并为每个样式指定一个唯一的名称。因此，每个“#body”都会变成“#body-1”，每个“.nav”都会变成“.nav-1”，等等。手动执行此操作将需要一段时间。

有没有一个工具可以做到这一点？

Answer 1

使用我所说的“CSS 命名空间”。

更改新页面的 CSS 规则，使它们与 ID 或类相关。

例如，采用这个：

.nav // nav for new page
{
  blah: blah;
}

并将其设置为：

#NewyThingy .nav
{
  blah: blah;
}

并用 id="NewyThingy" 将新包含的页面包围在 div 中。

或者

.NewyThingy .nav
{
  blah: blah:
}

将新包含页面的正文标记更改为 class="NewyThingy"。