基本上，我如何使用CSS的方式，限制消费者破坏的东西时，有一个冲突的类名？
我认为更重要的是尽量避免类名中的冲突，而不是处理如果有冲突会发生什么。如果存在冲突，假设选择器具有相同的specificity，则最后定义的样式将获胜。因此，取决于消费者是在他们自己的样式之前还是之后添加您的库，这将影响应用哪些冲突规则。如果你认为你的图书馆是超级重要的，你可以添加！对所有库样式都很重要。这可不是个好主意你应该尽量避免冲突。
你也许可以给你所有的类添加一个前缀，比如beetle-ui，我假设消费者没有任何以这个前缀开头的类。
你可以做一些像语义UI和HTML元素采取库的风格，它必须有类ui在它的类列表。然后所有的选择器看起来像这样：

.ui.input {
}
.ui.header {
}

相应的HTML类似于：

<input class="ui input" />

我会像我的第一个例子一样，使用BEM并使用SASS定义我的CSS，这样我的语法就可以更干净一点，并受益于前缀。

.beetle-ui-form {
    background-color: grey;
    &__input {
        outline: red;
    }
}

这将生成如下CSS：

.beetle-ui-form {
    background-color: grey;
}
.beetle-ui-form__input {
    outline: red;
}

根据我的经验，构建组件库依赖于在易于定制和保护组件库样式之间的平衡。我会说，对于库来说，使用前缀几乎总是一个好主意。我也同意ryanm的观点，使用!important不是一个好主意，它不允许定制任何风格。
在我的案例中，库是一些使用它的项目的关键/核心部分。这就是为什么我和我的同事们决定使用Sass进行样式化，并方便地将我们所有的类选择器嵌套在parent id选择器中，这带来了特异性，但不会为我们带来太多额外的工作。
另外，当我们为组件设置文本样式时，我们试图尽可能低地设置样式，例如，如果我想为div中的所有<a>标签设置样式，类为myParentName，我会这样做：

.myParentClass a {
    color: red;
}

而不是

.myParentClass {
    color: red;
}

除此之外，我们还创建了一个简短的文档，其中只有大约5个要点，以帮助开发人员使用我们的库，这样他们就不会无意中覆盖任何样式，而是故意覆盖。因此，警告他们例如不要在某些情况下使用下面的选择器可能是一个好主意，因为它们可能会影响库样式：

.myParentElement > div,
.myParentElement *