충돌없이 HTML + CSS 파일 포함

Question

고유 한 스타일 시트가있는 HTML 헤더 템플릿이 있습니다. 이 HTML 코드는 복잡하며 메뉴, 다른 블록 및 기타 부동 요소가 포함되어 있습니다. CSS 파일에는 전체 웹 사이트의 스타일이 포함되어 있습니다. 총 800 개의 셀렉터.

기존 웹 사이트에 HTML과 CSS를 포함하기 만하면 끊어집니다. 이것은 많은 CSS 규칙이 웹 사이트의 규칙을 방해하고 있기 때문입니다. 예를 들어 헤더 템플릿의 CSS에는 이름이 ".nav"인 선택기가 있으며이 웹 사이트에도 이름이 있습니다. 둘 다 서로 다른 규칙을 가지고 있기 때문에 웹 사이트가 중단됩니다.

내 질문은 어떻게이 HTML 파일을 기존의 웹 사이트에 '완전히 포함하지 않고'포함시키는 것입니까?

나는 다음과 같습니다 : 템플릿에서 스타일을 처리하고 각 고유 한 이름을 지정하십시오. 따라서 모든 '#body'는 '# body-1'이되고, 모든 ".nav"는 ".nav-1"등의 보 코드가됩니다.

이렇게 할 수있는 도구가 있습니까?

Answer 1

내가 "CSS 네임 스페이스"라고 부르는 것을 사용하십시오.

새 페이지의 CSS 규칙을 ID 또는 클래스와 관련이있는 것으로 변경하십시오.

#NewyThingy .nav 
{ 
    blah: blah; 
} 

그리고 ID = "NewyThingy"와 DIV에 새로 포함 된 페이지를 둘러싸고 :

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

을하고이합니다

예를 들어,이 걸릴.

또는

.NewyThingy .nav 
{ 
    blah: blah: 
} 

새로 페이지를 포함의 body 태그를 변경 클래스 = "NewyThingy"가 있습니다.