Include HTML + CSS files without collisions

Question

I have a HTML header template with its own style sheet. This HTML code is complex, it contains menu's, different blocks and other floating elements. The CSS file contains styles from whole website. It total 800 selectors.

When I just include the HTML and the CSS in my existing website, it breaks. This is due the fact that a lot of CSS rules are interfering with the rules of the website. For example CSS from the header template has a selector with name ".nav" and the website has that too. Because both of them have different rules, the website breaks.

My question is how do I 'include' this HTML file in an existing website without complete recoding.

I though the following: process the styles from the template and give each a unique name. So every '#body' becomes "#body-1", every ".nav" bocomes ".nav-1", etc. Doing this by hand will take a while.

Is there a tool which could do this?

Answer 1

Use what I call "CSS Namespacing".

Change the CSS rules for the new page such that they are contextual to an ID or class.

For example, take this:

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

and make it this:

#NewyThingy .nav
{
  blah: blah;
}

And surround the newly included page in div with id="NewyThingy".

Or

.NewyThingy .nav
{
  blah: blah:
}

and change the body tag of the newly include page to have class="NewyThingy".