No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

BEM

3/19
Recursos

Aportes 26

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Aqu铆 presento un ejemplo de c贸mo aplicar BEM (Block, Element, Modifier) en un caso de la vida real. Imaginemos que est谩s trabajando en el dise帽o de un sitio web para una tienda en l铆nea que vende productos electr贸nicos. Vamos a aplicar BEM para estilizar una lista de productos y un bot贸n de compra.

Supongamos que el c贸digo HTML para la lista de productos es el siguiente:

<ul class="products-list">
  <li class="product">
    <div class="product__image">
      <img src="producto1.jpg" alt="Producto 1">
    </div>
    <div class="product__details">
      <h3 class="product__title">Producto 1</h3>
      <p class="product__description">Descripci贸n del producto 1.</p>
      <span class="product__price">$99.99</span>
      <button class="product__buy-button">Comprar</button>
    </div>
  </li>
  <!-- Otras listas de productos -->
</ul>

Ahora, apliquemos BEM para estilizar estos elementos:

  1. Block: El bloque m谩s grande y significativo es 鈥減roducts-list鈥. Representa la lista de productos.
/* Estilos para el bloque "products-list" */
.products-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
  1. Element: Los elementos dentro del bloque 鈥減roducts-list鈥 son 鈥減roduct鈥, 鈥減roduct__image鈥, 鈥減roduct__details鈥, 鈥減roduct__title鈥, 鈥減roduct__description鈥 y 鈥減roduct__price鈥.
/* Estilos para el elemento "product" */
.product {
  display: flex;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

/* Estilos para el elemento "product__image" */
.product__image {
  flex: 1;
  padding: 10px;
}

/* Estilos para el elemento "product__details" */
.product__details {
  flex: 2;
  padding: 10px;
}

/* Estilos para el elemento "product__title" */
.product__title {
  font-size: 18px;
  margin: 0;
  margin-bottom: 5px;
}

/* Estilos para el elemento "product__description" */
.product__description {
  margin: 0;
  color: #555;
}

/* Estilos para el elemento "product__price" */
.product__price {
  font-weight: bold;
}
  1. Modifier: Los modificadores cambian el aspecto o el comportamiento de un bloque o elemento. Por ejemplo, podr铆amos tener un modificador para el bot贸n de compra cuando un producto est谩 en oferta:
/* Estilos para el modificador "product__buy-button--on-sale" */
.product__buy-button--on-sale {
  background-color: #ff9900;
  color: #fff;
  border: none;
  cursor: pointer;
}

Ahora, en tu c贸digo HTML, puedes aplicar el modificador cuando sea necesario:

<button class="product__buy-button product__buy-button--on-sale">Comprar</button>

Recuerda que BEM es una metodolog铆a de nomenclatura para escribir CSS m谩s estructurado y modular. Cada clase tiene su prop贸sito y se evitan selectores complejos o anidados. Con BEM, el c贸digo es m谩s mantenible y escalable, lo que es especialmente 煤til en proyectos grandes y equipos de desarrollo. 隆Espero que este ejemplo te ayude en tu aprendizaje de arquitectura CSS y BEM!

Esto fue lo primero que vi al realizar una b煤squeda en el navegador.

驴Qu茅 es BEM?

BEM es una serie de televisi贸n japonesa de anime de aventuras de terror sobrenatural.
Las siglas BEM significan 鈥淏lock, Element, Modifier鈥 y es un enfoque para estructurar y nombrar clases CSS de manera m谩s organizada y escalable.

  • Block: Componentes independientes y reutilizables que representan una entidad significativa.

  • Element: Partes que forman parte del bloque y no tienen uso fuera de 茅l.

    Se nombran con doble guion bajo.
    Ejemplo: [Block]__[Element]

  • Modifier: Variaciones o estados de bloques o elementos que cambian su aspecto o comportamiento.

    Se nombran con dos guiones.
    Ejemplo: [Block]--[Modifer]

Estructuras que podemos encontrar:

  • [ Block ]
  • [ Block ]__[ Element ]
  • [ Block ]--[ Modifier ]
  • [ Block ]__[ Element ]--[ Modifier ]
  • [ Block ]--[ Modifier ]

BEM 馃殌

.

  1. BEM (Block Element Modifier): Es una metodolog铆a que se centra en la estructura del HTML y nombra las clases de manera descriptiva para formar bloques (componentes), elementos y modificadores.
    .
    Ejemplo:
<div class="comment">
  <img src="imagen-usuario.jpg" alt="Imagen de usuario" class="comment__avatar">
  <p class="comment__text">Este es un comentario.</p>
  <button class="comment__button comment__button--like">Me gusta</button>
</div>
/* Estilo base para el bloque de comentario */
.comment {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Estilos para el avatar del usuario en el comentario */
.comment__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* Estilos para el texto del comentario */
.comment__text {
  font-size: 1rem;
}

/* Estilos para el bot贸n de "Me gusta" en el comentario */
.comment__button {
  background-color: #3b5998;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Estilos para el modificador de bot贸n de "Me gusta" destacado */
.comment__button--like {
  background-color: #1877f2;
}

Informaci贸n s煤per 煤til de BEM https://bem-cheat-sheet.9elements.com/

aqu铆 les recomiendo sobre todo losbque somos nuevos, que no usen _ al pegar palabras, lo que se conoce como nomenclatura snake case, por que en mo caso por ejemplo en el bloque de un menu lo llamaba "menu_principal" luego un elemento quebllamada "productos-digitales" y luego un modoficador que cuando pasaran el mouse hiciera un efector hover no se que de nombre fuera "color_hover" cuando empezaba a juntar todo me confundia porque tenia que poner menu_principal__productos-digitales--color_hover aqu铆 les recomiendo mejor usen nomenclatura pascal o camello y quedar铆a as铆. por ejemolo con camello: "menuPrincipal__productosDigitales--colorHover" as铆 ya no hay confusi贸n y saben cual es elnbloque, cual es el elemento y cual el modoficador, espero y me haya explicado, saludos.

Este ser铆a mi c贸digo HTML con la metodolog铆a BEM

	<section class="museum">
		<h2
			class="museum__title"
			data-text-one="Modern"
			data-text-two="Art Gallery"
		>
			Modern Art Gallery
		</h2>
		<p class="museum__description">
			The arts in the collection of the Modern Art Gallery all started from a
			spark of inspiration. Will these pieces inspire you? Visit us and find
			out.
		</p>
		<a class="museum__link" href="/location">
			<span class="link__text">Our location</span>
			<span class="link__icon"></span>
		</a>
	</section>

El objetivo de la metodologia BEM es hacer que los nombres de los selectores CSS sean lo mas informativos y transparentes posibles.
El nombre del bloque suele ser una sola palabra como .header, pero si tiene una definici贸n de bloque m谩s larga, se divide con un solo gui贸n -

<.lang-switcher {/* Styles */}> 

El nombre del elemento comienza con doble gui贸n bajo __:

<.lang-switcher__flag_basic {/* Styles */}> 

Solo hay una regla muy cr铆tica en la metodolog铆a BEM: un modificador no se puede usar fuera del contexto de su propietario.

<.btn_big {/* Styles */}> 

Puede usar btn_bigsolo si el encabezado tambi茅n est谩 definido.

<<div class=鈥漛tn_big鈥>...</div>>  Mal ejemplo
<<div class=鈥漛tn_big鈥>...</div>>  Buen ejemplo

Adem谩s de estos estilos BEM originales, existen esquemas de nombres alternativos como los estilos Harry Roberts y CamelCase.

<.block-name__element-name--modifier-name {/* Styles */}>  Estilo Harry Roberts 
<.BlockName__ElementName_ModifierName {/* Styles */}>  Estilo CamelCase
Un ejemplo de la vida real usando BEM referente a un automovil: ```html <main class="automovil">
</main> ```

Block

Standalone entity that is meaningful on its own.
Examples
header, container, menu, checkbox, input

Element

A part of a block that has no standalone meaning and is semantically tied to its block.
Examples
menu item, list item, checkbox caption, header title

Modifier

A flag on a block or element. Use them to change appearance or behavior.
Examples
disabled, highlighted, checked, fixed, size big, color yellow


source

que cool鈥!


**Sandwich con BEM** ````html <section id="sandwich-container">
</section> ```\<section id="sandwich-container"> \
\
\
\
\
\
\
\
\
\
\</section> ````
Les comparto un tutorial que fue el proyecto final del curso anterior de Estefany (teffcode): ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcnBrb3JiNmcxMGh1a3Yyb2Iyb3RwNzFtZHdreWZuNGVjbmd0cjFmcCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/acZZL8l3DzrWjMfHp3/giphy.gif) 猸怲utorial: <https://www.youtube.com/watch?v=QAoaVlBgBUo&t=336s> 猸怐emo: <https://raulsr92.github.io/reproductor-musica-proyecto/> 猸怰epo: <https://github.com/raulsr92/reproductor-musica-proyecto>
**BEM** ![](https://static.platzi.com/media/user_upload/BEM-c0e7b7bc-d89b-48ec-a508-c5987774451b.jpg)
Espero no estarme confundiendo, si no espero que mi linda comunidad me ayude a corregir :) `
` ` ``<image class="card-image"></image>` ` ``

card-title

` ` ``

card-text

` `
`
Un ejemplo pr谩ctico de BEM podr铆a ser: tel茅fono\_\_auriculares-color
Con la profe Teff no solo aprendemos sobre arquitectura css, de paso tambien aprendemos sobre cohetes y su estructura base
tengo mi portafolio trate de utilizar BEM en ella, les comporto <https://gianalbornoz.com/> Saludos
`<criptocoin class=鈥漃epe Pepe鈥攄own鈥>` `<phase class=鈥漃epe__pre-sale鈥></phase>` `<phase class=鈥漃epe__launch鈥></phase>` `<phase class=鈥漃epe__sale鈥></phase>` `</criptocoin>`
![](https://static.platzi.com/media/user_upload/2023-10-10_16h00_40-31529659-f311-4d51-b854-d39789a8d885.jpg)![](file:///C:/Users/Jarvis%20xd/Pictures/Screenpresso/2023-10-10_16h00_40.png)
/**
    Platzi Navbar header
    --------------------
    PD: Prefiero usar single slash para separar palabras en nombre de entidades
*/

.sidebar {
    width: 32px;
    height: 100px;
    transition: width .3s;
    overflow: hidden;
    background-color: #24385b;
    position: fixed;
    left: 0;
    top: 0;
}

.sidebar-header--active {
    width: 240px;
}

.sidebar-header__drawer {
    background-color: #33b1ff;
    width: 32px;
}

.sidebar-header {
    display: flex;
}

.sidebar-header__info {
    padding: 12px;
    color: white;
}

.sidebar-header__icon {
    border-radius: 50%;
    height: 32px;
    width: 32px;
}

Les dejo un video corto por si quieren profundizar un poco: https://www.youtube.com/watch?v=wDUwGo98JTA

Y unas recomendaciones:

  • Usa nombres de bloques descriptivos que sean f谩ciles de entender.
  • Usa nombres de elementos descriptivos que sean espec铆ficos del bloque.
  • Usa nombres de modificadores que sean claros y concisos.
  • Evita usar modificadores globales, como disabled o active.
  • Usa la metodolog铆a BEM de manera consistente en todos tus proyectos.

Esta interesante BEM

As铆 se mira BEM aplicado en una barra de navegaci贸n鈥

<nav class="navbar">
  <a href="#" class="navbar__item">Inicio</a>
  <a href="#" class="navbar__item">Productos</a>
  <a href="#" class="navbar__item navbar__item--active">Nosotros</a>
  <a href="#" class="navbar__item">Contacto</a>
</nav>

.navbar {
  background: #333;
  padding: 1em;
  display: flex;
}

.navbar__item {
  color: #fff;
  text-decoration: none;
  margin-right: 1em;
}

.navbar__item--active {
  color: #f00;
}