Question

我正在尝试使样式表中的所有class / id名称都是唯一的，例如Bootstrap或其他一些开源CSS框架。

我在Bootstrap 3中找到了所有类名的列表，例如：

.col-sm-1
.col-sm-2
.col-sm-3
...

我将使用将在其他网站上使用的Bootstrap CSS构建一个表单（想想Stripe的模态，你粘贴到你的网站并保持它们的样式）。

但是，如果我保持Bootstrap CSS类和id不受影响，那么与其他网站的样式存在冲突会出现各种问题。

有没有办法在样式表中为每个单独的样式添加或附加我公司的名称或随机字符串，以便不会出现冲突样式的问题？

例如：

.col-sm-1-abc123
.col-sm-2-abc123
...

拥有上述样式很可能不会导致样式冲突的问题。但是，它需要在每种风格上添加“-abc123”。

有办法做到这一点吗？如果是这样，怎么样？如果没有，那么完成我想要做的事情的替代方案是什么？

Answer 1

如果您需要预先知道名称问题，那么您应该使用名称空间。使用Less可以很容易地做到，例如：

.your_namespace_name {

   // Here your Less/CSS code, for example the whole bootstrap css/less
}

然后你给你的身体或顶部div你的your_namespace_name的类：

<body class="your_namespace_name">

Answer 2

是的，可能。您可以使用他们的文档从源代码重建样式名。

您的网站中有Customize Bootstrap的很多选项，您可以为所有类提供前缀和后缀。