70

Que es la metodología BEM y como se usa.

Si tu propósito al momento de crear Css es ser especifico, claro, legible, fácil de entender y por supuesto implementar una buena práctica al momento de crear estilos, la metodología BEM (Block Element Modifier) te será de gran ayuda para crecer en el ámbito profesional.

El propósito de BEM que en español seria modificador de bloques de elementos, es que tú puedas crear una estructura de codigo más consistente, no duplicar estilos y traer claridad al codigo definiendo y estableciendo mejor jerarquía en tu proyecto. Si quieres saber mas de como surgió esta metodología te recomiendo leer a fondo sobre su historia.

Lo anterior por supuestos nos ayuda a trabajar más de manera ágil y eficiente, tanto solo como en equipo, ya que como he dicho tendremos la oportunidad de crear un codigo totalmente legible hasta para los usuarios introvertidos que den clic derecho y en inspeccionar elemento.

Esta metodología surgiere incluir en la creación de estilos CSS y HTML una serie de reglas para el desarrollo del frontend de manera general, la cual consiste en crear o nombrar clases de elementos independientes haciendo las hojas de estilos más simples y fáciles de entender divididas en bloque, elemento y modificador. Las cuales describiré cada una.

Bloque: Es esa parte independiente en la cual se escrutará nuestro proyecto y donde se verán contenidos todos los elementos de este. es decir, esos contenedores principales que nos ayudaran a dividir las partes de nuestro documento y que son fácilmente identificadas. Ejemplos de esto serian header, footer, contenedor principal, ítems y demás. En realidad, depende de ti y tu forma de estructurar resaltando que los bloque serán los contenedores de los elementos y así mismo deben ser nombrados de forma coherente.
Ejemplo de cómo nombrar bloques:

.footer

Elemento: Es (valga la redundancia) el elemento que esta dentro de un bloque. En la metodología BEM no puede utilizarse por si solo si no se especifica a que bloque pertenece. Creando un marco de referencia general podemos resumir que el bloque contiene los elementos y así debe estructurarse el nombramiento de la clase. Estos se nombran con dos underscore después del nombre del bloque.
Ejemplo de cómo nombrar elementos

.footer__information

Modificador: Este juega un papel muy importante ya que nos referimos a modificador cuando queremos cambiar la aparicencia especifica de un bloque o un elemento, por ejemplo: si tenemos un menú en el header y estos tienen los mismos nombres de clase para que cada uno tome propiedades iguales, pero hay uno que quieres que sea de otro color y tome otras propiedades como focus, active o hover, pues le agregas un modificador para así de simple modificarlo a tu gusto junto con las propiedades de los demás elementos del menú. para crear un modificador agregamos dos guiones y su nombre.
Ejemplo de como nombrar o hacer llamado a modificadores:

.footer__information--aboutme

De esta manera nuestro codigo estará limpio y reusable, además de una cascada impecable que te ahorrara mucho tiempo al momento de crear estilos, estudairlos o revisarlos.
Y pueda que pienses que los nombres de las clases se alargan demasiado, que toma mucho tiempo planear y aplicar estos principios, que de cierta forma puede que sea complicado y que la implementación en proyectos pequeños no sea tan clara, pero en realidad vale mucho la pena resaltar los puntos positivos mencionados a lo largo de todo el escrito.

De pronto te faltaron algunos conceptos o ejemplos para aclarar lo que esto puede significar para un desarrollador somo el hecho de su utilidad en sass y demas. De mi parte esto solo fue una introducción, pues es lo que he aprendido leyendo e investigando y este artículo es la forma de aprender enseñando. Te invito a que sigas investigando y te apropies del tema con el fin e ejercer buenas prácticas en tu vida. Te pido por favor dejes tu comentario acerca de cómo te pareció para así poder mejorar.

Escribe tu comentario
+ 2
Ordenar por:
8
34673Puntos

Me encantó este artículo. Aquí también les adjunto una fuente que permitirá entender mejor a través de ejemplos las diferencias entre estos componentes de la metodología de BEM.(Por sias estará en Inglés -.- )

https://en.bem.info/methodology/key-concepts/

1
3440Puntos
5 meses

Gracias, me pareció un buen recurso.

3
19814Puntos

Gracias por compartir, había leído algo sobre esto pero me quedo bastante claro, lo único en el articulo es la presentación, los espaciados después de los puntos finales, para una mejor lectura.

3
3455Puntos

Buen articulo. Claro y conciso. Muchas gracias!

2
3440Puntos

Necesitaba introducirme a esta metodología, gracias por este artículo.

2
3110Puntos

No me quedó claro, estas hablando del css o js?

2
4536Puntos
un año

Que deberas eres imbécil???

3
5771Puntos
un año

no hay preguntas tontas, pero si te pasastes xD

5
5414Puntos
8 meses

prybedev, por comentarios así, se abstienen de participar activamente en la comunidad, por favor mas empatía con los demás.

2
5395Puntos
6 meses

Sin insultos porfavor, respetemos a los demás.

1
3440Puntos
5 meses

Sin insultos por favor, no hay pregunta tonta.

2
3609Puntos

bien, a seguir investigando!!

2
19514Puntos

Buen articulo, estuvo bastante claro.

2
2211Puntos

Excelente. Empezare a aplicarlo.

2
9517Puntos

Muy útil

2
8494Puntos

Muy de acuerdo yo estoy empezando a profundizar en el tema para aplicarlo a mis proyectos, ya que tiene sus ventajas aplicar esta metodología, como a la hora de depurar código.

1

Buen aporte, claro y preciso en cuanto a la metodología BEM, y pues viendo que es mas de ir practicando y aplicándola a cada desarrollo que realicemos.
Muchísimas gracias.

1
4974Puntos

Perfecto, hay que implementarla para tener un código mas ordenado y accesible a otros miembros del equipo, gracias por la explicación!

1

Un gran articulo para hacer más provechoso mi curso definitivo de HTML y CSS

1
433Puntos

Gracias justo estaba investigando sobre esta metodología

1
8Puntos

tengo un problema, cuando quiero cambiar el color de un input text en especifico no me deja, en este caso el primer input le quise cambiar el color y sigue igual, soy nuevo en esto perdon.

<html>

<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=, initial-scale=1.0”>
<title>Css test </title>
</head>
<body>
<div class=“contact-form”>

<input type="text" class="contact-form__input--active">
<input type="text" class="contact-form__input">
<input type="text" class="contact-form__input">
<input type="password" class="contact-form__input">

</div>
</body>
</html>

<css>

.contact-form__input–active {
color: red;
}

1
8Puntos
5 meses

corrijo, el css es
.contact-form__input–active {
color: red;
}

0
8484Puntos
4 meses

soy nuevo, en realidad hace 15 minutos me entere que existe BEM y no se desde cuando hizo esta pregunta pero lo que veo que esta mal es que en el codigo html puso dos guines medios para despues poner el modifair y luego en el css lo intento llamar pero fracazo porque puso solo un guion medio antes del modificador

1
5395Puntos

Me olvide de como usar BEM, gracias a este articulo pude recordar.

1
5414Puntos

¡Un buen articulo introductorio al tema!

1
1679Puntos

muy claro!. gracias por la explicación

1
4685Puntos

Muy buen artículo, me sirvió mucho.
¡Muchas gracias!!!

1
17723Puntos

Gracias por este artículo, desconocía totalmente esta metodología.

1
4628Puntos

Un tema interesante y practico,gracias

0

Que buena explicación, me quedo muy claro el uso de la metodología. Mil gracias

0
5771Puntos

Seria mi primera metodologia para implementar CSS si lo veo claro y facil de usar, lo implementare en adelante y se que cualquier otra persona que vea mi codigo me agresera por esta metodologia y no usar todo esparsido al azar como muchos al empezar

0
6956Puntos

¡Este artículo es más que excelente! Muchísimas gracias 💚👨‍🚀🚀

0
6034Puntos

Muy buen artículo, gracias!

0
6312Puntos

¡Excelente! Tienen mucha razón al momento de estar nombrando las clases y más cuando estás avanzando en el proyecto, se complica uno más las clases. Estoy aplicando este método en estos momentos, me aseguraré que lo haga bien.
¡GRACIAS!

0
9371Puntos

Muy buen artículo, me ayudó para comprender mejor esta metodología.

0
7170Puntos

Excelente artículo. Me había quebrado la cabeza como nombrar mis clases con sus respectivos Items, BEM es una muy buena metodología que sin duda facilita el ordenamiento de la hoja de estilos.