Включить HTML + CSS файлы без коллизий - PullRequest
Новая
       24

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

1 голос
/ 15 октября 2011

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

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

Мой вопрос: как мне «включить» этот HTML-файл в существующий веб-сайт без полной перекодировки?

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

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

1 Ответ

2 голосов
/ 15 октября 2011

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

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

Например, возьмем следующее: 

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

и сделайте так: 

#NewyThingy .nav
{
  blah: blah;
}

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

Или 

.NewyThingy .nav
{
  blah: blah:
}

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

...