Imagine que tengo un componente complejo como un menú desplegable y quiero que tenga algunos estilos personalizados cuando lo uso en diferentes lugares. No solo los colores, sino también los espacios y los iconos.
Si estoy usando algo como reaccionar o vue, podría pasar parámetros a los accesorios.
También podemos usar solo scss, y hay muchas formas de sobrescribir los estilos:
.dropdown{ width: 100px } //overwrite for my custom menu .my-custom-menu{ .dropdown{ width: 120px; } }O si uso algo como BEM, incluso podría hacer que el nombre de la clase principal sea una variable y cambiarlo:
.dropdown{ &__container{ width: 100px; } } //custom .other-dropdown{ &__container{ width: 120px; } }¿Cuál es la mejor manera? ¿Hay otras formas de hacer esto?
Haga que su componente sea reutilizable. Solo agrega estilo para estados modificados o contexto como oscuro, claro, grande, pequeño**, etc.
.dropdown{ &__container{ width: 100px; } } //custom .dropdown{ &.dark { color: dark; } &.light { color: white; } }Y esto es trabajo para todos los componentes hasta ahora.
tu tenias:
--dropdown --dropdown__container --container-small --container-big