html - CSS 中的命名空间和样式冲突

Question

我正在开发一个网络产品，当使用时，它会生成用户将嵌入到他们网站中的代码。

生成的代码包含 HTML、JavaScript 和 CSS。当嵌入到页面中时，它将与我无法控制的页面中的其他内容一起显示。换句话说，我的产品生成的代码将嵌入到已经包含其他内容的网页中。我无法控制该页面的样式和内容。

现在，我担心样式命名冲突。假设我正在使用一个名为 .amazing-color 的 CSS 类，它以特定方式设置特定组件的样式。

假设使用我的代码的网页恰好有一个样式也命名为 .amazing-color，它会有不同的样式代码，并且可能会覆盖我自己的样式。

我的问题是，如何防止这种情况发生？如何防止 CSS 中的命名冲突？

您可能会建议我的样式名称很复杂，所以我会使用 .my-super-amazing-color-212321，但这会导致复杂的 CSS 类不可读。我认为更好的解决方案是使用 namespace 。但是我不确定CSS中是否有命名空间，如果存在，我该如何使用它们。那么，CSS 中有命名空间吗？您能否提供使用它们的示例代码？

谢谢。

Answer 1

首先，您不是在询问 CSS 中的 namespace ，而是在类 中的 namespace 。类是一种 HTML 特性，而不是 CSS 特性。

现在，类没有正式的命名空间机制，但在这种情况下的惯例是使用通用缩写或首字母缩写词作为您使用的所有类的前缀。因此，您可以将“mwp-”用于“我的网络产品”。

由于您要生成 HTML、CSS 和 JS，因此您可能可以使这个前缀可配置，这样您的产品的用户可以在冲突时选择不同的前缀。

最后，在您的产品使用文档中明确说明您使用的是什么前缀，以及使用您的产品的人如何在需要时更改前缀。