Introducción a BEM

6/42
Recursos
Transcripción

BEM es la metodología que vamos a usar a lo largo del curso. El objetivo de BEM es dividir lógicamente las piezas de las que se compone una web.

BEM establece que debemos usar clases para nuestro selectores, clases que se dividen en:

  • Bloques. Los bloques son nuestros contenedores más grandes que a su vez contienen elementos u otros bloques.
  • Elementos. Los elementos siempre forman parte de un bloque, normalmente son los botones, textos, imágenes etc.
  • Modificadores. Los modificadores se usan para establecer estilos diferentes a un mismo bloque o elemento.

Aportes 71

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Introducción a BEM

BEM es la metodología que vamos a usar a lo largo del curso. El objetivo de BEM es dividir lógicamente las piezas de las que se compone una web.

BEM establece que debemos usar clases para nuestro selectores, clases que se dividen en:

.bloque__element--modificador{}
  • Bloques. Los bloques son nuestros contenedores más grandes que a su vez contienen elementos u otros bloques.

    .bloque{}
    .galeria{}
    
  • Elementos. Los elementos siempre forman parte de un bloque, normalmente son los botones, textos, imágenes etc.

    .bloque__elemento{}
    .galeria__foto{}
    
  • Modificadores. Los modificadores se usan para establecer estilos diferentes a un mismo bloque o elemento.

    .bloque--modificador{}
    .galeria__foto--circular{}
    
<h3>Ventajas de BEM</h3>
  • Menos repetición
  • Los bloques tienen Independencia absoluta
  • Mejoría en la herencia multiple
  • Evitar la especificidad (no se sentirá la necesidad de usar !important nunca más)

BEM es muy interesante, tanto que se desarrollaron varias metodologías basadas en ella, a mi me gusta una fusión de estos 3:

  • BEM (Bloque, elemento, modificador)
  • BEMIT (BEM + Triángulo invertido)
  • ABEM (Atomic BEM)

BEM (Block Element Modifier)

Ya comete la maldita naranja

Naming convention

BEM => camelCaseLower | CamelCaseUpper | snake_case

camelCaseLower

blockName-elemName_modName_modVal

CamelCaseUpper

BlockName-ElemName_modName_modVal

snake_case

block-name__elem-name_mod-name_mod-val

Que interesante esta la metodología BEM.
La comenzaré a utilizar desde hoy 😃

Atomic Desig

Organismo{}
Organismo__Molecula{}
Organismo__Molecula–Atomo{}

Podría ser…

BEM es la metodología que usaremos para nombrar y clasificar selectores CSS de manera estricta 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.

En la última parte mencionas que “BEM viene a ser un excelente complemento cuando trabajamos con preprocesadores” ¿si yo no uso preprocesadores me funciona BEM?

BEM es súper útil para tener orden en tu código 👩🏻‍💻 ten organización y semántica a la hora de trabajar y evita los errores ortográficos

Esta guía me sirvió de mucho, espero que a ustedes también
https://platzi.com/blog/bem/

Recomiendo esta pagina Me ha ayudado mucho y tiene unos ejemplos claros

    1. <h3>Introducción a BEM [6]</h3>
    • <h4>¿Qué es BEM?</h4>

Block Element Modifier: es una metodología de trabajo creada por Yandex (Google de Rusia) para proyectos web grandes o pequeños. El objetivo de BEM es dividir logicamente las piezas de las que se compone una web.

    • <h4>¿En qué consiste?</h4>

Consiste en organizar nuestra web con los siguientes 3 conceptos:

-Bloque: un componente lógico y funcionalmente independiente en una página, es equivalente a un web component. Un bloque encapsula su comportamiento (Javascript), las plantillas, los estilos (CSS) y otras tecnologías de implementación. La independencia de los bloques permite su reutilización, además de facilitar el proceso de desarrollo y soporte del proyecto.

Los bloques se pueden anidar dentro de otros bloques.

-Elemento: Una parte constituyente de un bloque que no se puede usar fuera de él.

La metodología BEM no recomienda el uso de elementos dentro de elementos.

-Modificador: Una entidad BEM que define la apariencia y el comportamiento de un bloque o elemento .

El uso de modificadores es opcional.

Los modificadores son similares en esencia a los atributos HTML. El mismo bloque se ve diferente debido al uso de un modificador.

    • <h4>Sintaxis BEM</h4>

Ejemplo con los conceptos:

.block{

}
.block--modifier{

}
.block__element{

}
.block__element--modifier{

}

Ejemplo real:

.header-nav{

}
.header-nav--cybermonday{

}
.header-nav__link{

}
.header-nav__link--cybermonday{

}
  • <h4>Ventajas de usar BEM</h4>

-Menos repeticiones.

-Independencia absoluta.

-Mejoría en la herencia múltiple.

BEM es una convención de nomenclatura muy útil, potente y simple que hace que su código de front-end sea más fácil de leer y comprender, más fácil de trabajar, más fácil de escalar, más robusto y explícito, y mucho más estricto.

no avia entendido BEM asta ahora ❤️

¿Quién diría que la mejor metodología de CSS es rusa? 😮

Excelente metodología para aplicar a mis páginas

6.-Introducción a BEM

Block Element Modifier (BEM), creada por yandex (google de Rusia) para proyectos web grandes o pequeños. Su objetivo es dividir lógicamente las piezas de las que se compone una web.

Los bloques son módulos que no dependen de otra parte de la página, son individuales. Como un menú o header.

El elemento es la parte básica de un bloque y este depende del bloque. Son todas las partes que componen al bloque, por ejemplo: Los botones, logos o cualquier otra parte del módulo.

En el caso de que se requiera una variación de ese bloque usamos el modificador, que siguen siendo elementos dependientes de un bloque pero son modificaciones a estos.

Ventajas:

  • Menos repeticiones.
  • Independencia absoluta.
  • Mejoría en la herencia múltiple. El bloque ni los elementos dependen de otros.

BEM es la metodología que vamos a usar a lo largo del curso. El objetivo de BEM es dividir lógicamente las piezas de las que se compone una web.

.bloque{}
.bloque__elemento{}
.bloque__elemento--modificador{}

6. Introducción a BEM:

BEM: Block, Element and Modifier, o Bloques, Elementos y Modificadores.

Sintaxis:

.bloque {
}
.bloque__elemento {
}
.bloque--modificador {
}

Aquí comparto un ejemplo:

Ok, lo compartí en la clase pasada pero paso para que no se pierdan el blog de Teff, donde explica como usar BEM. Está super bien explicado y complementa muchísimo.

¿Cómo funciona la metodología BEM?

Block Element Modifier es una metodología que nos ayuda a organizar nuestro código html y le da nombre a las clases de los elementos de una manera entendible.
.
Block: Es un modulo que no depende de otro bloque en el archivo html, un ejemplo de este es el <header>, aunque un <section> también funciona bien.
Element: Es la etiqueta mas básica en el html, la diferencia con el Bloque, es que el elemento depende completamente de su contenedor padre.
Modificador: Este nos ayuda a identificar algunas diferencias entre los elementos, tales como el color, tamaño, forma, etc.
.

Sintaxis

Para utilizar esta metodología, funciona de la siguiente manera:
.bloque{}
.bloque__elemento{}
.bloque–modificador{}
.bloque__elemento–modificador{}
.

Ejemplo

En el código abajo puedes ver un header actuando como Bloque, botones actuando como Elementos y distintos identificadores.

<header>
	<button class="header__button--black"></button>
	<button class="header__button--red"></button>
	<button class="header__button--icon-twitter"></button>
	<button class="header__button--icon-fb"></button>
</header>

Por fin entendí claramente la correcta implementación de BEM

Bem Stiller

anotado

la metodologia que utilizo para estructurar mi codigo

En el siguiente caso:

![](

Hasta donde entiendo, menu es un elemento del bloque header (.header__menu), pero: ¿qué pasa con los hijos de menu? ¿Cuál debe ser el bloque para determinar la clase de link? ¿Debe ser .header__link o .menu__link?

genial, ahora me queda muy claro BEM

.bloque{}
.bloque__elemento{}
.bloque–modificador{}

Wooow excelente explicación! Espero poder aplicarla correctamente 😄

BEM = Block Element Modifier

Sintaxis BEM:
.bloque{}
.bloque__elemento{}
.bloque–modificador{}

Hace mucho llevaba escuchando sobre BEM pero apenas hasta ahora lo entiendo por completo muchisimas gracias…

Genail, Muy claro la metodoligia BEM, Muchas gracais

Que buena explicación, esta metodología es excelente.

Excelente explicación. Todo me queda muy claro.

Muy buena explicación, para organizar el código!

Habia visto explicaciones de BEM en otros cursos y es la primera vez que lo entiendo claro. Muchas gracias!

muy buena clase

Les recomiendo mucho “BEM”, inclusive para los que van comenzando. Es una forma muy práctica. Pueden reforzar sus conocimientos cuando vean estos tres cursos: “Frontend Develooper”, “Desarrollo Web Online”, y “Práctico de HTML, CSS”.

Muy buenas y útiles anécdotas

buena clase!

Entendida la introduccción a BEM , se ve muy interesante.

Que interesante eso… css se volverá mucho mas eficiente

Yandex es el google de Rusia.

B E M = Bloque, Elemento, Modificador

Guaau! BEM es muy interesante lo que se puede hacer con el

header__box {}
header__box--bordered {} 

Muy buen repaso 😄

Creía que lo usaba bien al BEM, pero faltan implementar mejores prácticas, no tenía ni idea de los modificadores. 😎

  • Bloque: El bloque es un objeto de nuestro sitio web, es independiente del resto del sitio web, lo que significa que puede vivir sin el resto de bloques, por ejemplo, un encabezado de un sitio web, un encabezado no necesita de otro Objeto para existir dentro de nuestro sitio web
css
.header {
...reglas
}
  • Elementos: Los elementos son las partes que necesitan un Bloque para existir, lo que significa que los elementos deben ser dependientes de otro Objeto. Podemos ver que los elementos son el contenido que construye un Bloque, como los enlaces de navegación en un encabezado en nuestro sitio web.
css
.header__links {
...reglas
}
  • Modificadores: Los modificadores son las posibles variaciones de los elementos dentro de un Bloque, a veces algunos elementos que podemos crear necesitarán pequeños cambios como el color o el tamaño o la forma, para estas variaciones usamos los modificadores.
css
.header__links--especial {
...reglas
}

Buena clase!

Excelente! vamos por más 😄

BEM = Bloques, Elementos y Modificador


Sintaxis


.bloque{}
.bloque_elemento{}
.bloque--modificador{}


Ejemplo

.card{}
.card_img{}
.card_img--round{}// Si se tiene que modificar siempre se utiliza este

Por fin encuentra una forma de estructurar bien mi codigo css

Excelente, sigamos 😃

Así se hace en la madre Rusia

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.

Les comparto un Cheat Sheet de BEM
https://9elements.com/bem-cheat-sheet/

Parce ando emocionado con estos temas

Por el bien de los ositos polares usaré BEM en mis proyectos en adelante

nnn

No se ve complicado. Veremos como nos va con el proyecto.