¿Qué es BEM CSS?
BEM CSS es una metodología de nomenclatura para definir las clases en los
nodos HTML del documento. Es decir, es una manera de nombrar las clases de
los nodos de tu HTML para posteriormente atacarlos con CSS de una manera
fácil, sencilla y clara.
El propósito de BEM que en español seria modificador de bloques de
elementos, es que tú puedas crear una estructura de código más consistente, no
duplicar estilos y traer claridad al código definiendo y estableciendo mejor
jerarquía en tu proyecto.
¿Cómo es la metodología?
BEM constituye la metodología que usaremos para nombrar y clasificar selectores
CSS de manera estricta, transparente e informativa. Este método se basa en
nombrar las clases en un modo muy específico, ayudándonos a distinguir de
manera simple de qué objeto hablamos y si tiene o no aplicado algún tipo de
modificador en su estilo, ya sea por interacción del usuario, o por tipología del
objeto. Cuando utilicemos la metodología BEM, deberemos tener en cuenta que
solamente usaremos nombres de clases, nunca IDs, para fomentar así la
reutilización de código.
BEM distingue claramente 3 conceptos: el Bloque, el Elemento y el Modificador.
El Bloque
Representa la entidad independiente, es decir, el objeto al que aplicar el estilo. Un
bloque puede componerse de otros bloques. Un buscador simple es un bloque
simple, mientras que la cabecera de una web es un bloque compuesto.
El Elemento
Figura como una pieza concreta, de un Bloque cualquiera, que cumple una
función. Evidentemente, un bloque puede estar compuesto de varios elementos.
Las clases con las que identificamos cada elemento las escribiremos después del
nombre del bloque, y las separaremos con dos guiones bajos.
El Modificador
Son las entidades que usaremos para definir la apariencia o comportamiento de
un Bloque o Elemento concreto. Su uso es opcional, pero nos será muy útil para
separar claramente el objeto de su estilo gráfico.
Ventajas
Añade especificidad: Usa un selector único para cada regla, lo que
permite reducirla y hacer menos repeticiones.
Aumenta la independencia: Los bloques se pueden mover a cualquier
parte del documento, sin afectar los estilos.
Mejora la herencia múltiple: Se puede cambiar cualquiera de las tres
partidas sin afectar a las demás.
Permite la reutilización: Es posible reciclar ciertas áreas de código desde
un proyecto hacia otro, esto debido a la no existencia de dependencias
mayores en cuanto a la implementación de cada uno de los bloques
estructurados.
Entrega simplicidad: Permite un fácil entendimiento una vez conocido el
proceso lógico sobre el cual se basa. A su vez, las convenciones a la hora
de nombrar las clases permiten tener un control absoluto al saber a qué,
quién y hacia dónde hacemos referencia dentro de una estructura.
Desventajas
Las convenciones pueden ser muy largas.
A algunas personas les puede tomar tiempo aprender la metodología.
El sistema de organización puede ser difícil de implementar en proyectos
pequeños.
Referencias
¿Qué es BEM CSS? #2 - AnimatiCSS. (2021). Retrieved 15 May 2021, from
https://animaticss.com/articulo/que-es-bem-css/
Metodología CSS: Block Element Modifier (BEM). (2021). Retrieved 15 May
2021, from https://blog.interactius.com/metodolog%C3%ADa-css-block-
element-modifier-bem-f26e69d1de3
Ayancán, N. (2021). Introducción a la metodología BEM para desarrollo
front end | IDA Chile. Retrieved 15 May 2021, from
https://blog.ida.cl/desarrollo/metodologia-bem-desarrollo-front-end/
