包含没有冲突的 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"。