css - 保护库组件不被消费者设计样式的标准方法

Question

我正在 Angular 中构建一个 UI 库，并且经常指定要使用通用类设置样式的元素，例如 .slider 或 .form-control。我遇到的问题是，有时消费者(使用该库的人)对其自己的元素使用相同的类，当他应用样式时，它会无意中破坏库的 UI。

Angular 确实提供了作用域类，所以如果我有这样的样式:

.form-control { line-height: 2em; }

然后在运行时，Angular 修改它以动态添加组件特定的属性:

.form-control[ng_content0] { line-height: 2em; }

并且因为该属性是动态添加到元素本身的，所以我的样式不会溢出并影响使用该库的客户端的元素。

太好了。但是我该如何防止逆转呢？基本上，当存在类名冲突时，我如何以一种限制消费者破坏事物的方式使用 CSS？我唯一想过的就是在所有类名前加上前缀。某种简陋的命名空间:

.mylib_form-control { line-height: 2em; }

什么是正确的方法？

Answer 1

Basically, how do I use CSS in a way that limits the consumer from breaking things when there is a conflict of class names?

我认为更重要的是尝试防止类名冲突，而不是处理发生冲突时发生的情况。如果有冲突，假设选择器有相同的 specificity最后定义的样式将获胜。因此，取决于消费者是在他们自己的样式之前还是之后添加您的库，这将影响适用的冲突规则。如果您认为您的库非常重要，您可以将 !important 添加到所有库样式中。这是个坏主意。你应该尽量避免冲突。

您或许可以为所有类添加一个前缀，例如 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;
}