包含没有冲突的HTML + CSS文件

Question

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

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

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

我虽然如下：处理模板中的样式并为每个样式指定一个唯一的名称。所以每个'#body'变成“＃body-1”，每个“.nav”bocomes“.nav-1”等等。手工完成这个需要一段时间。

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

Answer 1

使用我所说的“CSS Namespacing”。

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

例如，拿这个：

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

并且这样做：

#NewyThingy .nav
{
  blah: blah;
}

用div =“NewyThingy”围绕div中新包含的页面。

或者

.NewyThingy .nav
{
  blah: blah:
}

并将新包含页面的body标签更改为class =“NewyThingy”。