4

soy nuevo con la metodología BEM para CSS, y tengo una duda respecto a los hijos de un modificador.

Digamos que tengo este HTML:

<div class="block-container">
    <div class="block-container__element"></div>
</div>

Al block-container le añado el modificador block-container--modifier.

El CSS se vería de la siguiente manera:

.block-container {
    ...
}
.block-container__element {
    ...
}
.block-container--modifier {
    ...
}

Y esta es mi pregunta: ¿cómo puedo cambiar algunos atributos CSS de __element cuando añado el modificador?

He leído, que debemos evitar hacer "nesting" (que nada dependa de un padre), pero supongo que en algunas ocasiones, como esta, esa regla o sugerencia debe romperse para lograr cambiar algunos estilos, ¿verdad?

Uso CSS puro, ningún pre-procesador como SASS o LESS.

1 respuesta 1

4

Si necesitas modificar atributos a .block__element, simplemente crea una clase la cual utilice selector descendiente para el mismo, es decir, .block--modifier .bock__element.

Ejemplo

.bock--mod .bock__element {
  /* stuff */
}

Fuente: Can a block modifier affect elements?

Al crear el selector anidado, declara que una entidad depende de otra. Debido a que BEM introduce componentes independientes, este enfoque no se sugiere cuando estamos hablando de 2 bloques diferentes.

Pero cuando se trata de un bloque y su elemento, no tienen un significado equivalente. Por definición, un elemento no tiene ningún sentido fuera de su bloque principal. Entonces, un elemento es una entidad dependiente de bloques. Suponiendo esto, es bastante normal y lógico que un elemento se vea afectado por el estado actual del bloque.

1
  • Vale si, es como lo estaba realizando. ¡Gracias!
    – Zander
    Commented el 30 may. 2019 a las 15:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.