Cursos Empresas Blog Live Conf Precios

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Clase 3 de 21 • Diseño web con PostCSS, el futuro de CSS

Clase anteriorSiguiente clase

Resumen

Antes de iniciar a usar PostCSS en nuestro proyecto, vamos a modificar el código de Invie a una nomenclatura de clases llamada BEM.

BEM significa Bloque, Elemento, Modificador, y nos permite separar por bloques, cada parte del código, haciéndolo mucho más legible.

Aquí encuentras el código base:

https://github.com/platzi/invie-responsive/blob/master/index.html

Nicolas Alejandro Herrera

student•

En la clase  class="guitarras contenedor"

Carlos asigno InvieGuitars u-wrapper a el id del section....

No deberia ser en la clase????

pd: como uso los anclas??? jajajajaj

Carlos Pérez

student•

Lo hizo así por un error pero debió haberlo colocado en la class y no en el id

Erick Neftalí Sarmiento Cortes

student•

todos podemos equivocarnos, jejeje

Juan David Pino Reyes

student•

Me gusto mucho esta nomenclatura, soy nuevo en esto pero me parece una forma muy limpia de nombrar las clases de css

.

student•

Ciertamente, por eso Carlos menciona que es el CSS del futuro. :)

Leonel Vega Vargas

student•

Me parece radical llamarlo el "futuro de css" me parece muy bueno pero no creo que sea "el futuro" jajaja pero cada quien le llama como quiera lo importante es lo aprendido.

Lester Fibla Saavedra

student•

¿No se supone que la nomenclatura BEM debe ser así:
Bloque__Elemento–Modificador ??

Diego Forero

Team Platzi•

La nomenclatura BEM es
bloque__elemento_modificador
Los guiones al medio son usados para separar palabras si el componente es de dos palabras por ejemplo
search-from

Annia J. Flores

student•

@lesterfibla Lo mismo pensaba yo, me confundió algo el video y tuve que revisar la documentación pero me encontré con lo mismo, ojalá puedan aclarar esa parte.

David Daniel Castillo Nava

student•

Seria bueno recordares que las tag a tienen un atributo llamado target que si le pasan un valor llamado _blank permite que se abra en otra ventana el link correspondiente. El link del la descripción no lo tiene y me quito el video T.T xD

Nicolas Alejandro Herrera

student•

<h1>ITCSS – PRIMER PASO HACIA BEMIT</h1>

Jonatan Ruben Sosa Caycay

student•

Para los que tienen problemas en la nomenclatura BEM:

BLOCK: es un componente de la página, ejemplo: header, logo, search-form. (block-name).
ELEMENT: es un componente del bloque, ejemplo: input, button, (element-name).
MODIFIER: entidad que define la apariencia, estado o comportamiento de un bloque o elemento, ejemplo: disable, enable, left-top (modifier-name).

para verlo mas claro veamos el ejemplo de un formulario:

    <!-- bloque -->
    <form class="block-name">
        <!-- elemento | modificador-->
        <button class="block-name_element-name block-name_element-name_modifer-name">button</button>
    </form>```

vemos que cada elemento es separado por un _ y que cada palabra de cada elemento se separa con un -,

otro ejemplo.
bloque_elemento_modificador esta descrito correctamente porque cada componente esta divido por un _
bloque_elemento-modificador, esta erróneo ya que elemento y modificador son componentes los cuales debes dividirlos con un _
bloque-nombre_elemento-nombre_modificador-nombre esta correctamente ya que cada componente se divide con un _ y cada nombre se divide con un -.

espero les sirva, arriba esta la documentación

Juan Di Nella Di Nella

student•

Qué mal me hace que empiece las class con mayuscula

Diego Forero

Team Platzi•

Cuando trabajas con React esto es muy común, de hecho cuando comienzas a utilizarlo vez la utilidad al poder identificar de manera visual que es una clase, que es una utilidad, que es un modificar, etc.

Tamara

student•

ok ya varios videos que no he podido ver voy a cancelar mi suscripción

Kath Sánchez

teacher•

Hola, Tamara
¿Qué problemas tienes con los vídeos?
Escríbeme a cursos@platzi.com para que verifiquemos lo que está pasando.

Liz Villegas Villegas

student•

Tiene que ser “InvieHero” I con mayuscula? Tengo entendido que los id son con mayusculas la primera letra, las clases para diferenciarlas serían con minúsculas y separarlas con - es decir invie-hero. Bueno, mi punto de vista, estoy empezando con postcss, se less, stylus, sass… y me gusta la nomenclatura que uso, no me gusto la que estan usando en este curso, por el momento, seguire usando la nomenclatura y espero que en los proximos videos se centre en otras cosas.

Marcos

student•

Llevo unas dudas sobre selectores css hace ya un tiempo aprovecho esta clase para preguntar

Alguien podria explicarme que significan los siguientes selectores, no se como interpretarlos

#app-header h1.danger {
  color: red;
}

#app-footer {
  width: 100%;
  min-height: 10vh;
}

.tv-show.liked:hover {
  background-color: #F1A9A0;
}

.tv-show.liked button.like {
  font-size: 40px;
}

José Reyes

company_admin•

Hasta el momento es mi segunda vez viendo este curso, he considerado importante este curso, para proyectos grandes es muy importante manejar este tipo de herramientas, y que formen parte de un workflow.