Включить HTML + CSS файлы без коллизий

Question

У меня есть шаблон заголовка HTML с собственной таблицей стилей. Этот HTML-код сложен, он содержит меню, различные блоки и другие плавающие элементы. Файл CSS содержит стили со всего сайта. Всего 800 селекторов.

Когда я просто включаю HTML и CSS в мой существующий веб-сайт, он ломается. Это связано с тем, что многие правила CSS влияют на правила сайта. Например, CSS из шаблона заголовка имеет селектор с именем ".nav", и веб-сайт также имеет это. Поскольку у них обоих разные правила, сайт ломается.

Мой вопрос заключается в том, как мне "включить" этот HTML-файл в существующий веб-сайт без полной перекодировки.

Я думаю следующее: обработать стили из шаблона и дать каждому уникальное имя. Таким образом, каждый "#body" становится "#body-1", каждый ".nav" bocomes ".nav-1" и т. Д. Выполнение этого вручную займет некоторое время.

Есть ли инструмент, который мог бы сделать это?

Answer 1

Используйте то, что я называю "CSS Namespace".

Измените правила CSS для новой страницы, чтобы они были контекстными для идентификатора или класса.

Например, возьмите это:

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

и сделать это так:

#NewyThingy .nav
{
  blah: blah;
}

И окружить недавно включенную страницу в div с id ="NewyThingy".

Или же

.NewyThingy .nav
{
  blah: blah:
}

и измените тег body новой включаемой страницы на class ="NewyThingy".