Standard way to protect library components from being styled by consumer - css

Question

I am building a UI library in Angular and often designate elements to be styled with generic classes such as .slider, or .form-control. The problem I run into is that sometimes the consumer (who uses the library) uses the same classes for its own elements and when he applies styling it inadvertently breaks the library's UI.
Angular does provide scoped classes so that if for instance I have the style:
.form-control { line-height: 2em; }
then at runtime, Angular has modified it to dynamically add a component specific attribute:
.form-control[ng_content0] { line-height: 2em; }
And because that attribute is added to the element itself dynamically, my styles don't bleed out and impact the elements of the client who consumes the library.
That's great. But how do I prevent the reverse? Basically, how do I use CSS in a way that limits the consumer from breaking things when there is a conflict of class names? Only thing I've thought about is to prefix all class names with a prefix. Some kind of janky namespacing:
.mylib_form-control { line-height: 2em; }
What's the right approach?

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?
I think it's more important to try to prevent a conflict in class names, instead of dealing with what happens if there is one. If there is a conflict, assuming the selectors have the same specificity the style defined last will win. So, depending on if the consumer adds your library before or after their own styles, that would affect what conflicting rules would apply. If you think your library is super important, you can add !important to all your library styles. Which is a bad idea. You should just try to avoid the conflict.
You could perhaps add a prefix to all your classes, say beetle-ui and I would assume the consumer doesn't have any classes that start with that.
You could do something like Semantic UI and for an HTML element to take on the style of the library, it must have the class ui in it's class list. Then all your selectors kind of look like:
.ui.input {
}
.ui.header {
}
The corresponding HTML would like something like:
<input class="ui input" />
I would do something like my first example, and use BEM and define my CSS using SASS so my syntax can be a bit cleaner and benefit from the prefixing.
.beetle-ui-form {
background-color: grey;
&__input {
outline: red;
}
}
Which would generate CSS like:
.beetle-ui-form {
background-color: grey;
}
.beetle-ui-form__input {
outline: red;
}