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:
.footerElemento: 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__informationModificador: 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--aboutmeDe 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.
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/
Gracias, me pareció un buen recurso.
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.
Buen articulo. Claro y conciso. Muchas gracias!
No me quedó claro, estas hablando del css o js?
css
Que deberas eres imbécil???
no hay preguntas tontas, pero si te pasastes xD
prybedev, por comentarios así, se abstienen de participar activamente en la comunidad, por favor mas empatía con los demás.
Sin insultos porfavor, respetemos a los demás.
Sin insultos por favor, no hay pregunta tonta.
Necesitaba introducirme a esta metodología, gracias por este artículo.
bien, a seguir investigando!!
Gracias por el artículo
Buen articulo, estuvo bastante claro.
Excelente. Empezare a aplicarlo.
Excelente articulo, Muchas Gracias
Muy útil
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.
Hola tengo una consulta, si ubico el modificador antes que un elemento, ¿esto me sobre escribe propiedades?
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.
Perfecto, hay que implementarla para tener un código mas ordenado y accesible a otros miembros del equipo, gracias por la explicación!
Un gran articulo para hacer más provechoso mi curso definitivo de HTML y CSS
Gracias justo estaba investigando sobre esta metodología
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”>
</div>
</body>
</html>
<css>.contact-form__input–active {
color: red;
}
corrijo, el css es
.contact-form__input–active {
color: red;
}
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
Me olvide de como usar BEM, gracias a este articulo pude recordar.
¡Un buen articulo introductorio al tema!
muy claro!. gracias por la explicación
Muy buen artículo, me sirvió mucho.
¡Muchas gracias!!!
Muy util, gracias
Gracias por este artículo, desconocía totalmente esta metodología.
Un tema interesante y practico,gracias
Que buena explicación, me quedo muy claro el uso de la metodología. Mil gracias
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
¡Este artículo es más que excelente! Muchísimas gracias 💚👨🚀🚀
Muy buen artículo, gracias!
¡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!
Muy buen artículo, me ayudó para comprender mejor esta metodología.
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.