CSS 및 스타일 충돌의 네임 스페이스

Question

웹 제품을 사용할 때 사용자가 자신의 사이트에 삽입 할 코드를 생성합니다.

생성 된 코드에는 HTML, JavaScript 및 CSS가 포함되어 있습니다. 페이지에 삽입되면 해당 페이지의 다른 콘텐츠와 함께 내가 제어 할 수없는 콘텐츠가 표시됩니다. 즉, 내 제품에서 생성 된 코드는 이미 다른 콘텐츠가 포함 된 웹 페이지에 삽입됩니다. 나는 그 페이지의 스타일과 내용을 제어 할 수 없다.

이제 이름 지정 충돌을 스타일링하는 것에 대해 걱정합니다. .amazing-color이라는 CSS 클래스를 사용한다고 가정하고 특정 구성 요소에 특정 방식으로 스타일을 지정합니다.

내 코드를 동시에 사용하는 웹 페이지가 다른 스타일 코드를 사용하는 .amazing-color이라는 스타일링을 동시에 가지고 있고 내 자신의 스타일을 덮어 쓸 수 있다고 가정합니다.

제 질문은 어떻게 이런 일이 발생하지 않도록 할 수 있습니까? CSS에서 명명 충돌을 방지하려면 어떻게해야합니까?

내 스타일에 복잡한 이름이 있다고 제안 할 수 있으므로 .my-super-amazing-color-212321을 사용 하겠지만 복잡한 CSS 클래스는 읽을 수 없습니다. 나는 네임 스페이스를 사용하는 것이 더 나은 해결책이라고 생각한다. 그러나 CSS에 네임 스페이스가 있는지 잘 모르겠습니다. 존재한다면 어떻게 사용할 수 있습니까? 그렇다면 CSS에는 이름 공간이 있습니까? 그들을 사용하는 샘플 코드를 제공 할 수 있습니까?

감사합니다.

Answer 1

우선 CSS의 네임 스페이스에 대해서는 묻지 않지만 클래스의 네임 스페이스는입니다. 클래스는 CSS 기능이 아닌 HTML 기능입니다.

이제 클래스에는 공식적인 네임 스페이스 메커니즘이 없지만 이러한 상황에서 규칙은 사용하는 모든 클래스의 접두사로 공통된 약어 또는 이니셜을 사용하는 것입니다. 따라서 "내 웹 제품"에 "mwp-"를 사용할 수 있습니다.

HTML, CSS 및 JS를 생성하기 때문에이 접두사를 구성 가능하게 만들 수 있습니다. 따라서 제품 사용자는 충돌하는 경우 다른 접두사를 선택할 수 있습니다.

마지막으로 제품에서 사용중인 접두어와 제품을 사용하는 다른 사람이 접두사를 변경할 수있는 방법을 문서에서 분명히하십시오.