Prefix all components' class names so their selectors' styles will be more "isolated" -
having less chance of "colliding" with the CSS selectors of the project which is using Webrix:
All internal class names, used within the components, should be made more resilient, meaning less
prone to having potential selectors clashes with the project which is using Webrix.
Ex. .collapsible .content-wrapper
content-wrapper is too generic class name which is likely to be used
in project and so, might cause unwanted styles to be applied to the Webrix Collapsible component, and
in the worst-case, completely interfere with its function.
Utilizing BEM naming is beneficial in such case:
.wx-collapsible__content-wrapper
Notes:
Can keep using static class names, instead of generated ones (via CSS-modules), so developers would be
able to easily modify the styles using the existing (Webrix) selectors, or alternatively switch to CSS-modules,
which gives the most isolation, but requires developers to pass a className prop whenever it is wished
want to modify styles.
I believe the first option is preferable, as it is isolated enough, and is easier for developers
to use existing class names instead of defining their own. It's also easier when it is wished
to modify Webrix components globally.
Prefix all components' class names so their selectors' styles will be more "isolated" - having less chance of "colliding" with the CSS selectors of the project which is using Webrix:
Main class names
Ex.
collapsible->wx-collapsibleInternal class names
All internal class names, used within the components, should be made more resilient, meaning less prone to having potential selectors clashes with the project which is using Webrix.
Ex.
.collapsible .content-wrappercontent-wrapperis too generic class name which is likely to be used in project and so, might cause unwanted styles to be applied to the WebrixCollapsiblecomponent, and in the worst-case, completely interfere with its function.Utilizing BEM naming is beneficial in such case:
Notes:
Can keep using static class names, instead of generated ones (via CSS-modules), so developers would be able to easily modify the styles using the existing (Webrix) selectors, or alternatively switch to CSS-modules, which gives the most isolation, but requires developers to pass a
classNameprop whenever it is wished want to modify styles.I believe the first option is preferable, as it is isolated enough, and is easier for developers to use existing class names instead of defining their own. It's also easier when it is wished to modify Webrix components globally.