Implementando BEM

Comparto mis apuntes del curso de Preprocesadores 😁
Documentación BEM

Acá un ejemplo de BEM.

Esta es una muy buena pagina para tener una mejor idea de como nombrar nuestros elementos utilizando BEM

https://9elements.com/bem-cheat-sheet/

align-self: center **si te hubiese conocido antes!!**😥

El profesor al cambiarle la dirrección al flex con flex-direction:column hizo que a su vez el justify-content cambiara su direecion de centrado. Por este motivo en las clases de mas adelante le cuesta centrar algunos contenedores. Para evitar esto añadan en el header align-items: center con esto solucionan algunas fallas en el centrado de los contenedores.

Un dato a tener en cuenta:
Según la metodología BEM, los Elements deben llevar el nombre como: block__element, usando dos guiones bajos y luego el nombre. Por otro lado, los Modifiers deben llevar el nombre como: block--modifier, usando dos guiones y luego el nombre.
En la clase se nombran los Elements como Modifiers, un pequeño detalle a la hora de hacer el naming de las clases.

Si quieren ver las reglas en el navegador le tienen que dar a la opción: Show rules

Mis apuntes:

IMPLEMENTANDO BEM (Block, Element, Modifier)
Es un enfoque basado en componentes para el desarrollo web, la idea es dividir la interfaz de usuario en bloques independientes.
Bem es la metodología que vamos a usar a lo largo del curso, su objetivo es dividir lógicamente las piezas de las que se compone una web.

Bem establece que debemos de usar clases para nuestros selectores, clases que se dividen en:

• Bloques: Los bloques son nuestros contenedores más grandes que a su vez se pueden anidar entre sí, pueden tener cualquier número de niveles de anidamiento.

Su sintaxis es: block

• El nombre del bloque: describe su propósito (¿Qué es?), no su estado (¿Cómo se ve?).

• Elementos: Una parte compuesta de un bloque que no se pueden utilizar por separado, normalmente son los botones, textos, imágenes, etc.
  Su sintaxis es:
  **block-name__element-name **
  dos guiones abajo

• El nombre del elemento describe su propósito(¿Qué es esto? - item, text, etc), no su estado(“¿Cual es, o lo que hace que parezca?- red, big, etc”)

• Los elementos se pueden anidar unos dentro de otros, puede tener cualquier número de niveles de anidamiento.

• Un elemento siempre es parte de un bloque, no otro elemento. Esto significa que los nombres de los elementos no pueden definir una jerarquía como:
  block__elem1__elem2

• Modificadores: Los modificadores se usan para establecer estilos diferentes a uno mismo bloque o elemento.
  Su sintaxis es: block–modifier
  dos guiones
  Segun BEM
  block_modifier
  _un guion abajo _

• El nombre del modificador describe su apariencia ( “¿De qué tamaño?” O "¿Qué tema?), su estado ( “¿Cómo es diferente de los demás?”) y su comportamiento ( "¿Cómo se comporta? “o” ¿Cómo responde al usuario? ").

Con mucho gusto hice un tutorial para este curso sobre 🚀 cómo utilizar BEM en nuestros proyectos Front-End, espero sea de su agrado y me den su retroalimentación.

#NuncaParesDeAprender 💚🤓

Hola compañeros! me surge una pregunta y es
¿Por qué usa un position relative en este caso para el header?

Pueden utilizar figma para tener una mejor idea de la distancia que existe entre los diferentes elementos

Compañeros, si no quieren estar dándole align-self: center a cada elemento del header, en este caso, ya que todo debe estar centrado, pueden ponerle al contenedor padre(header) la propiedad

align-items: center;

así todos sus hijos se alinearán al centro, y ya que estamos usando flex-direction: column, en este caso se alinearán al centro horizontalmente 😊

Tener en cuenta que si se usa flex-direction: column,
justify-content: center centra verticalmente y si se usa flex-direction: row,
justify-content: center centra horizontalmente.
Nota: Si justify content actua sobre el eje X, item-align lo hace sobre el eje Y y viceversa todo depende de la opción elegida en flex-direction.
Este punto en particular lamentablemente no se explicó en el curso anterior.

Les recomiendo poner bordes en las etiquetas que esten usando, solo para saber en donde empieza y en donde termina una etiqueta.

BEM (Block Element Modifier) es una metodología que usada para nombrar y clasificar selectores CSS de manera estricta, transparente e informativa.
Ejemplo: .header__button--red
header --> bloque
button --> elemento
red --> modificador

Estilos header:

      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      min-width: 320px;
      height: 334px;
      text-align: center;

Estilos header img:

      width: 150px;
      height: 24px;
      margin-top: 60px;
      align-self: center;

Estilos .header--title-container:

      width: 90%;
      min-width: 288px;
      max-width: 900px;
      height: 218px;
      margin-top: 40px;
      text-align: center;
      align-self: center;

Pregunta. Por qué el profesor está utilizando PX y no REM? en qué casos se usa rem, solo en textos?

Documentación de BEM: https://en.bem.info/methodology/quick-start/

¿Qué es BEM?
Block Element Modifier: es un enfoque basado en componentes para el desarrollo web. La idea de esta metodología es dividir en bloques independientes nuestro layout.
Bloque
Contenedor o contexto donde se encuentra un elemento. Conforma la raíz de una clase.
El nombre del bloque describe su propósito (¿Qué es?🤔) y NO su estilo (¿Cómo se ve?😎).

<!-- Bloque encabezado -->
<headerclass="encabezado">
	<!-- Bloque logo anidado -->
	<divclass="logo"></div>
<!-- Bloque formulario anidado -->
	<formclass="formulario"></form>
</header>

Elemento
Es una pieza del bloque. Se puede decir que el bloque es el todo y los elementos
son las piezas que lo conforman. No puede usarse separado de un bloque.
El nombre del elemento describe su propósito (¿Qué es?🤔) y NO su estilo (¿Cómo se ve?😎).
La estructura de un elemento es : bloque__elemento

<!-- Bloque “formulario-búsqueda” -->
<formclass="formulario-busqueda">
	<!-- Elemento “input” -->
	<inputclass="formulario-busqueda__input">
	<!-- Elemento “boton” -->
	<buttonclass="formulario-busqueda__boton">
	Search
	</button>
</form>

Modificador
Define la apariencia, estado o comportamiento de un bloque o un elemento.
El nombre del modificador describe su apariencia (“¿Qué tamaño? 📏”), su estado (activado✅/desactivado❌, enfocado📷, etc.) y su comportamiento (“¿Cómo se comporta?👨‍🔧”).
La estructura de un modificador es:
• bloque–-modificador
• bloque__elemento–-modificador

<formclass="form-busqueda form-busqueda--focused">
	<inputclass="form-busqueda__input">
	<button class="form-busqueda__boton
form-busqueda__boton--desactivado">Search</button>
</form>

Les comparto lo que aprendí y me di cuenta practicando, si en algo me equivoco porfa me retroalimentan 😃 :
///////////////////////////////////////////////////////////////
Diferencia entre align-items y align-self

El align-items sirve para alinear los elementos en modo vertical (inicialmente) esta alineará a los contenedores hijos, es decir si le colocas al header: align-items este alineará todos los elementos dentro del header (img, div, h1, p, a), mientras que el align-self alinea el contenedor actual al que le colocas la propiedad, es decir si le colocas align-self al div alinea al mismo div, mas no hereda al hijo como el align-items.

Ahora porque dije que alinea en modo vertical inicialmente el align-items? y es que por defecto al colocarle flex, la direccion de los elementos por defecto es en linea (row) por lo tanto el justify-content y el align-items alinea horizontal y vertical respectivamente, pero una vez que cambiamos la direccion a columnas (flex-direction:column) la disposicion del justify y align se invierten a vertical y horizontal. (Es algo que el profe se olvido de mencionarlo en el curso de HTML y CSS)

Con esto en mente creeria que solo con colocarle el align-items: center al header basta y funciona, mas no colocarle al header y luego align-self a c/contenedor-etiqueta xq se vuelve redundante.
Al igual que el text-align, si ya le coloco al header no hace falta colocarle al contenedor “div”, a menos que quiera darle un formato especifico a ese contenedor en especifico, caso contrario es redundante colocarle a ambos el center.

Hola comunidad, si quieren convertir todas las dimensiones de px to rem existe una extension en VScode que te lo permite:
https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem

• Para hacer el cambio solo necesitas presionar alt + z (Windows) o option + z (MacOS)

no termina de cerrarme el tema de BEM. Por ejemplo, el div con clase “header–title.container” se le puede agregar css poniendo “header div {}”. No veo el beneficio de usar nombres tan largos cuando se puede hacer más sencillo.

No agregue mas clases ya que en el header solo usaremos una etiqueta ancla <a> y podemos usar combinadores por descendencia

header>
        <img src="./assets/image/mainLogo.svg" alt="">
        <div class="header__title-container">
            <h1>La próxima revolución en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce Nuestros Planes <span>i</span></a>
        </div>   
    </header>

Css

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}
header img {
    width: 151px;
    height: 24px;
    margin-top: 78px;
    align-self: center;
}
.header__title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 36px;
    text-align: center;
    align-self: center;
}

Algo nuevo muy interesante, que personalmente no había notado, parece que el inspector nos da una referencia más visual de lo que es display

Por qué para centrar la imagen utilizan align-self y no align-items? Estuve probando y utilizando align-items la imagen no se centra pero no comprendo la razón 🤔

Podemos también usar la función clamp

para manejar el width del contenedor

width: clamp(288px, 90%, 900px);

si ponen el align-items;center en el header se centra todos los contenedores del header, sin tener que colocar align-self en los demas contenedores

Las medidas del archivo en Figma son:

.header--title-container {
  width: 90%;
  min-width: 288px;
  max-width: 900px;
  height: 288px;
  margin-top: 36px;
  text-align: center;```

Si todos los elementos de un contenedor deben estar centrados se debe utilizar align-items: center en lugar de ir a cada selector y poner align-self: center.
align-self se debería usar sólo en el caso particular que un elemento del contenedor deba estar alineado en forma distinta a la establecida por default en el contenedor.

No estoy muy de acuerdo con la forma en que se implementó BEM. Precisamente los modifiers son aquellos diferenciadores que puede recibir un element. Es decir, como en Bootstrap que tenemos Header__button–primary o Header__button–danger. El modifier es esa parte del naming que nos permite diferenciar los posibles “estados” que puede tener un mismo elemento.

En esta ocasión yo propondría utilizar Header__title y Header__button ya que al no estar repetidos no necesitan modifiers.

Alguien sabe como puedo ocultar un menu en el heder cuando esta en movil y que solo aparezca un cuadrado al que se pueda desplegar el menu?

Etiquetas: Las etiquetas o tipos de elemento son el selector menos prioritario. Tanto las clases como los identificadores o los estilos en línea tendrán más prioridad.

Clases y pseudo clases: Las clases y pseudo clases tienen más prioridad que las etiquetas por ser selectores más específicos, pero menos prioridad que los identificadores y los estilos en línea. Los selectores de atributo también se ponderan como si fuesen clases en lo referente a su prioridad.

Identificadores: Los identificadores id son el selector más específico de las hojas de estilo, ya que hacen referencia a un único elemento. Solo los estilos en línea tienen mayor prioridad.

Estilos en línea: Los estilos aplicados en el código HTML a cada elemento mediante el atributo style siempre tendrán prioridad sobre todos los demás, gozando de la mayor especificidad.

BEM

Bloque: El bloque puede ser un menú de navegación o un header.

Elemento: Es la parte más básica de un bloque y la diferencia es que el elemento depende del bloque. Los elementos son todas las partes que conforman un bloque. Un elemento serían todos los botones, logos, todo lo que forma parte del bloque.

Modificador: Siguen siendo elementos que dependen del bloque, la única diferencia es que son modificaciones que se le hacen a los elementos. Por ejemplo algunos botones tienen variaciones como contener iconos o no contener texto.

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

Toda la galería es un bloque, todos los elementos dentro de la galería los llamaremos con el doble guion, la foto la llamaríamos como galería__foto. Y como tenemos una imagen diferente, aplicamos el modificador galeria__foto—circular. Y sí la aplicamos al texto, sería galeria__texto

Muy buena clase, solo que yo si le pondría clase a la etiqueta HEADER porque hay etiquetas como la etiqueta article que pueden o no tener un header, en este caso no vamos a necesitar articles pero en otros proyectos yo si le pondria clase a HEADER

Este video lo explica muy bien 😉:
https://www.youtube.com/watch?v=3vuW43Flw2o&list=PLROIqh_5RZeB92ME1GFyeqDVOa-gL0Ybd&index=13

Ventajas y desventajas de BEM
La metodología BEM se encuentra en constante evolución, pero ha demostrado su eficiencia al establecer una buena jerarquía en el desarrollo de plataformas.

En el tiempo que llevamos usándola hemos percibido las siguientes ventajas:

Añade especificidad: Usa un selector único para cada regla, lo que permite reducirla y hacer menos repeticiones.
Aumenta la independencia: Los bloques se pueden mover a cualquier parte del documento, sin afectar los estilos.
Mejora la herencia múltiple: Se puede cambiar cualquiera de las tres partidas sin afectar a las demás.
Permite la reutilización: Es posible reciclar ciertas áreas de código desde un proyecto hacia otro, esto debido a la no existencia de dependencias mayores en cuanto a la implementación de cada uno de los bloques estructurados.
Entrega simplicidad: Permite un fácil entendimiento una vez conocido el proceso lógico sobre el cual se basa. A su vez, las convenciones a la hora de nombrar las clases permiten tener un control absoluto al saber a qué, quién y hacia dónde hacemos referencia dentro de una estructura.
Sin embargo, existen algunas opiniones en contra de esta metodología. Las más comunes son:

Las convenciones pueden ser muy largas.
A algunas personas les puede tomar tiempo aprender la metodología.
El sistema de organización puede ser difícil de implementar en proyectos pequeños.
Cabe destacar que es posible aplicar esta metodología en diferentes lenguajes y contextos. Por ejemplo, destacando la estructuración en HTML5, en CSS y sus preprocesadores (como SASS o LESS) y en programación con JavaScript, considerando su utilización en frameworks como AngularJS o ReactJS.

Además, se puede usar en la organización a nivel de archivos y cualquier otro sistema en el que sea necesario mantener un orden modular.

Puedes encontrar más información en el sitio oficial de la metodología BEM.

No entendía bien la diferencia entre align-items y align-self. Les comparto:

align-items

determinará cómo se muestran todos los elementos flexibles.
Mientras que:

align-self

es para anular esto en elementos individuales.

" El div es una etiqueta comodín que utilizamos cuando ya no existe una etiqueta que semánticamente nos diga donde estamos"
-Diego De Granda

información que cura

Me está gustando mucho este curso, me está despejando muchas dudas, por ejemplo cómo mantener un width constante antes y después de ciertas resoluciones:

min-width: Establece el ancho mínimo de un elemento al redimensionar su contenedor, como una pantalla y tal.

max-width: Establece el ancho máximo del mismo al redimensionar.

De esta manera, casi sin darnos cuenta, estamos previendo una conducta responsive en nuestro sitio web y evitando que en el futuro, al redimiensionar, se deforme nuestro trabajo de diseño.

Otra propiedad increíblemente útil será el “align-self”, yo comentía el error de hacer un nuevo contenedor para centrar ese elemento “rebelde” usando “justify content”, aunque sabía que debía haber una mejor práctica que esa. Aquí encontré la solución!!! jeje Es suficiente usar dicha propiedad para organizar el contendido en flex

Yo centre el div con margin-rigth y margin-left: auto…en vez de align-self, me funciono, no se si es buena o mala practica

Leí la documentación del método Bem. Muchas gracias por compartir esa info. Lo voy a implementar en mis futuros diseños.

Acabo de encontrar una mejora en el estilo del profesor. Cuando declaró en el header la propiedad de flex: justify-content: center creo que lo hizo pensando en que así se alinearian al centro los elementos en el eje X pero no paso asi, todo lo contrario, se alinearon en el eje Y.

Eso no debería de pasar así, e estado leyendo sobre el tema y esto es debido a que la etiqueta flex-direction: column invierte el comportamiento de justify-content y align-items.

Entonces lo que deberíamos de hacer es esto:

.header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; 👈️ 
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}

Y eso nos ahorra escribir mas codigo para centrar el .header–title-container

El div es una etiqueta comodín que utilizamos cuando ya no existe una etiqueta que semánticamente nos diga donde estamos, son etiquetas de relleno que nos ayudan a generar un poco más de forma y contexto a nuestro layout. Son etiquetas de apoyo nada más.
El min-width: 320px quiere decir que el width no se va a hacer mas chico de 320px que es la dimensión más chica en los celulares.

En muchos casos se usa un BEM simplificado sin _(underscores). Por ejemplo: bloque-elemento–estado.
También, ya que esta definido el font-size en 62.5%. es posible usar 1rem equivalente a 10px. Entonces, 334px son 33.4rem por ejemplo.

Espero sirva de ayuda

Wow siempre tenia el problema de no saber centrar cuando definía un width: n%;, ahora entiendo el align-self: center.

Estoy re aprendiendo display flex.

header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}
header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}
.header--title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}```

Comparto mi código de la clase:
HTML

<header>
            <img src="./assets/imgs/logo.svg" alt="">
            <div class="header--title-container">
                <h1>La próxima revolución en el intercambio de criptomonedas.</h1>
                <p>Batabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
                <a href="" class="header--button">Conoce Nuestros Planes <span>i</span></a>
            </div>
</header>

CSS

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}

header img {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

3. Implementando BEM

Les comparto el código de la clase:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="header">
        <img src="./assets/icons/batata_icon.svg" alt="">
        <div class="header--title-container">
            <h1>La próxima revolución en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="" class="header--button">Conoce nuestros planes <span>i</span></a>
        </div>
    </header>
    <main class="main">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer class="footer"></footer>
</body>
</html>

CSS:

/*
1. Posicionamiento
2. Modelo de caja (Box Model)
3. Tipografía
4. Visuales
5. Otros
*/
/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*VARS*/
:root {
    /*Colores*/
    --bitcoin-orange: ##F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warn-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
html {
    /*para usar rem*/
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
/*HEADER*/
.header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}
.header img {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}
.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

Trato de usar siempre BEM, pero muchas veces me confundo en el Modifier. Por ejemplo, no entiendo por qué se considera title-container como un modifier? No deberia ser un elemento de header (osea, header__title-container)?

Respecto a la alineación de los elementos del header mi solución fue establecerla desde la misma etiqueta de header para no tener que estar repitiendo la misma regla varias veces asi

header{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    align-items: center;
}

Yo también tenía el problema del scroll horizontal a poner el vp en 320px, por alguna razón que aún desconozco se arreglo una vez que le di click al enlace que tenemos en el header. Por si a alguien le sirve.

en el minuto 06:58 para que no se desalinee la img, podiamos haberle dado un align-items en el header y quedaria perfecto

Esta pagina valida el html que escribes y esta hecho por la W3C 😉:
https://validator.w3.org/nu/#textarea

Si alguno tiene alguna duda de como funciona flex-direction aca dejo esta explicación :

No tenía muy en claro la propiedad position pero este me ayudó a comprender mejor 😉

Que función cumple el position relative en este caso?

Para aprender bien la metodologia Bem https://css-tricks.com/bem-101/

De los que conozco OOCSS, BEM y SMACSS. Dichas metodologías hace que sean mas fáciles de leer y mantener el código, yo utilizo OOCSS-BEM.

Tengan en cuenta

Metodología BEM

Tutorial de donde saque la info

Qué es BEM?

BEM (Block, Element, Modifier)
Es una metodología de CSS, que nos ayuda a crear componentes reutilizables, código claro y mantener la especificidad al mínimo.
Esto gracias a su nomenclatura.

-> Mantener la especificidad al mínimo.
-> Código modular.
-> Código limpio.
-> Nomenclatura (Bloque, Elemento, Modificador)

Qué es un Block?

Un bloque en BEM, es una entidad independiente, no necesita de nadie más para existir. (Header, Nav, Formulario, Footer, Contenedor)

Se les nombre con la funcionalidad del bloque.

<nav class="nav"></nav>

<header class="header"></header>

<section class="container"></section>

Qué es un Element?

Un elemento en BEM, depende directamente de un Bloque, por lo que este debe estar dentro de un bloque. (Es dependiente a un bloque y está ligado a él.)

Se les nombra con el nombre de su bloque contenedor, dos guiones bajos y la descripción (funcionalidad) del elemento.

<form class="form">
	<input type="text" class="form__input">
	<input type="submit> class="form__send">
</form>

<nav class="nav">
	<a href="#" class="nav__item">Inicio</a>
	<a href="#" class="nav__item">Inicio</a>
</nav>

Qué es un Modifier?

Un modificador en BEM, puede ser un bloque o un elemento, estos indican una modificación a dicho elemento o bloque.

Se les nombra, con el nombre que tenían anteriormente (bloque o elemento) se le agrega dos guiones medios y la descripción de la modificación.

<nav class="nav">
	<a href="#" class="nav__link"></a>
	<a href="#" class="nav__link nav__link--disabled"></a>
</nav>

<header class="header header--blue></header>

<input type="text" class="form__input form__input--color-gray">

Curiosidades BEM

Se nombran como un elemento

<header class="block">
	<section class="block__elem1">
		<div class="block__elem2">
		</div>
	</section>
	<div class="block__elem3">
	</div>
</header>

Se le llama mix en BEM y si se puede.

<div class="block1 block2">
</div>

No se recomienda porque puede generar especificidad extra.

<button class="button disabled"></button>

Ejemplo:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEM</title>
    <link rel="stylesheet" href="./estilos.css">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="nav__logo">
                <img src="./logo-spotify.png" class="nav__img">
            </div>
            <div class="nav__links">
                <a href="#" class="nav__link nav__link--color">Inicio</a>
                <a href="#" class="nav__link">Acerca de</a>
                <a href="#" class="nav__link">Contacto</a>
            </div>
        </nav>
    </header>
    <nav class="nav">
        <div class="nav__logo">
            <img src="./logo-spotify.png" class="nav__img">
        </div>
        <div class="nav__links">
            <a href="#" class="nav__link nav__link--color">Inicio</a>
            <a href="#" class="nav__link">Acerca de</a>
            <a href="#" class="nav__link">Contacto</a>
        </div>
    </nav>
</body>
</html>

estilos.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;    
}
.nav{
    background: slateblue;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav__logo {
    height: 100%;
    background: #fff;
}

.nav__img {
    height: 100%;
}   

.nav__link{
    color: #fff;
}

.nav__link--color{
    color: #000;
}

Estilos:

:root{
    /* colores */
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --gray: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-family: 'DM Sans', sans-serif;
    font-size: 62.5%;
}
body{
    font-size: 1.6rem;
}
header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}
header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}
.header--title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

Si le estás dando macizo a los cursos, usa estas banderitas para usarlas como pausa a tu aprendizaje. Es bueno despejar tu mente y relajar tu vista un poco

Me imagino que ya varios se habrán dado cuenta, pero aun así quiero escribir este pequeño comentario en un intento de aclararles algunas cositas a mis demás compañeros que recién están aprendiendo 👉👈.
·
La forma en la que se aplica la Metodología BEM en esta clase (y en el resto de este curso en general) no es correcta. Está mal implementada.
·
Por tanto, si de verdad te interesa aprender BEM, no es muy recomendable que uses este código como ejemplo o como guía. Preferiblemente si quieres aprender BEM, investiga por tu cuenta o directamente revisa los increíbles aportes y tutoriales que otros estudiantes han dejado aquí en este mismo curso. Con darles una ojeada rápida te darás cuenta que no se está implementando la Metodología BEM como corresponde.
·
Igualmente quiero aclarar, que a pesar de lo anterior, el curso está super genial y estoy aprendiendo un montón poniendo en práctica lo visto en los anteriores cursos ✨. Adoro la forma de explicar del Profesor Diego y me gustan mucho sus clases 😊. Por lo que este comentario no va con la intención de criticar ni desprestigiar a nadie, meramente es una pequeña aclaratoria y un pequeño aviso de un humilde estudiante para sus compañeros ❤.
·
Además, quiero recordar también que la Metodología BEM son una serie de “recomendaciones” para ayudarnos a escribir mejor nuestro código. Pero no son reglas estrictas que todos debemos usar sí o sí ni mucho menos, así que incluso si a lo largo de este curso no se implementa correctamente dicha metodología, eso no quiere decir que la página web vaya a quedar mal (todo lo contrario, en realidad como se ve al final del curso la página web realizada por el Profesor Diego está perfecta; aun incluso sin seguir adecuadamente las pautas indicadas en la Metodología BEM).
·
En resumen: Este solo es un mensajito para indicar (con cariño) que en este curso se implementó de forma incorrecta la Metodología BEM, por lo que si de verdad te hace mucha ilusión aprender cómo usarla en tus proyectos, es preferible que investigues por tu cuenta y no te guíes por la forma en la que se utiliza aquí. Absolutamente todo lo demás del curso está perfecto~
·
Dejaré por aquí algunos enlaces que —en lo personal— me han ayudado a entender y aprender mejor las reglas BEM:

• Video en YouTube | ¿Qué rayos es la Metodología BEM? Explicado con un ejemplo
• Página Web | Ejemplos de Referencia para nombrar clases usando BEM
• Tutorial en Platzi | BEM: la mejor manera de nombrar tus clases de HTML
• Blog en Platzi | Guía de BEM para CSS (Cohete Falcon 9 de SpaceX)

Es una practica poner algunas comentarios en el css y en el html por si trabajhamos en equipo y que podamos entender el código de los demas o si nos quedamos mucho tiempo sin entrar en nuestro codigo

<code> 
/* Inicio estilo imagen de la cabecera -- comentario en css */

 <!-- Vamos a hacer una estructura formal de la pagina -- Comentario en html -->

Espero que ayude

Hice el intento de realizar mis propios estilos antes que los del profesor y para mi sorpresa hay distintas maneras de obtener el mismo resultado. Algunas con mayores o menores lineas de estilos. Resultado muy interesante

la sintaxis correcta para nombrar las clases usando BEM es

block__element

y

block–modifier

Aplicando la optimización, podríamos quitar los align-self: center; en header img y en title-container y usar align-items: center; en el header, con esto ahorramos unas cuantas lineas de código, tendremos los flex items alineados en vez de ir alineando uno a la vez.

Apuntes en Notion

Comparto mis apuntes en Notion, con un cambio en el height de la imagen del header (height : auto;), porque estoy usando imágenes y logos distintos :B

en “.header–title-container” si le quito el text-align:center, el resultado es el mismo.
Porque lo pondría?

en el minuto 7:00 donde se muestra la ruptura de la declaracion
justify-content: center; del header me di cuenta que la ruptura se origina por la declaracion widht: 150px; del img.

Ruptura de la declaracion justify-content: center; del header

Para los que desean ahondar el la metodología BEM, dejo un curso bastante recomendable.

header{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 320px;
    height: 334px;
    justify-content: center;
    text-align: center;
}

header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header--title-container{
    width: 90%;
    height: 218px;
    min-width: 288px;
    max-width: 900px;
    margin-top: 40px;
    align-self: center;
    text-align: center;
}

Para saber que dimensiones (en pixeles) están trabajando entran al navegador de Google le dan a inspeccionar y luego le dan a Ctrl + Shift + M y ya desde ahí pueden ajustar las dimensiones para trabajar mas cómodos.

Según BEM para separar el nombre de la clase del nombre del elemento se debe usar dos guiones bajos entonces quedaría de la siguiente forma:
header__title-container

BEM: Bloques, elementos, modificadores

Link útil para BEM: https://9elements.com/bem-cheat-sheet/

Dividir lógicamente las piezas de las que se compone una web

.bloque{}

.bloque__elemento{}

.bloque–modificador{}

ETIQUETAS <div></div>

Es una etiqueta comodina que utilizamos cuando ya no hay una etiqueta semántica que nos diga donde estamos, nos ayuda a darle forma y contexto a nuestro layout.

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
}

header img {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

bueno asi va quedando mi codigo

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;  
}

header img {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header--title--container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

Dentro de header , agregando la linea de abajo:
align-items: center;
Te ahorras el align-self:center de la linea 43 y el text-align:center de la linea 52

Acá está el link de un post que hicieron hace poco sobre BEM, me pareció muy bueno incluyendo posibles casos de error.
https://platzi.com/blog/bem/

Aca una aclaracion.

En el header, cuando diego establece el height (alto) de la caja utiliza 334px, pero segun el figma, el header ocupa un height de 295px solo que se agregaron 39px de la barra del navegador.

Good class! 👏🏻

Hola, compañeros comparto video donde se explica la metodologia BEM
Metodologia BEM

El código BEM sirve para que tu código sea más limpio y entendible, practicar con BEM es fácil les dejo algo práctico y entendible https://youtu.be/bvnzyXGkNY4

Bem es algo muy necesario para ordenarnos.

Para que se muestren nuestros cambios automáticamente, les recomiendo descargar la extensión Live Server de Vs code: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Para los que no conocen les dejo el link de CodePen para ir haciendo el codigo y viendo los cambios. Es solo alternativa

Buenas le dejo,un generador de la metodología BEM, y asimismo la misma contiene descripción y orden para incluir la misma en su proyecto: BEM

Son ideas mias o esta explicando el bem mal?

Link Documentación Metodología BEM del Curso Definitivo de HTML y CSS

https://en.bem.info/methodology/faq/#why-bem

BEM significa Modificador de Bloques de Elementos (Block Element Modifier) por sus siglas en inglés. Sugiere una manera estructura de nombrar tus clases, basado en las propiedades del elemento en cuestión. Si alguna vez has visto un nombre de una clase como header_from-email eso es precisamente BEM en acción. Cuando utilices la metodología BEM, debes tomar en cuenta que solamente usarás nombres de clases (no IDs). Los nombres de clases te permiten repetir el nombre BEM si es necesario, y crear una estructura de código más consistente (en ambos archivos el HTML y CSS/Saas). Ahora vamos descifrarlo.

Bloque
El bloque es un contenedor o contexto donde el elemento se encuentra presente. Piensa como si fueran partes estructurales de código más grandes. Puede que tengas un encabezado, pie de página, una barra lateral y un área de contenido principal; cada uno de estos sería considerado como un bloque. Mira la imagen de abajo:

Elemento
El elemento es una pieza de un bloque. El boque es el todo y los elementos son las piezas. Cada elemento se escribe luego del bloque conectado por dos barras bajas.

.header__logo {} 
.header__tagline {} 
.header__searchbar {}
.header__navigation {}

Modificadores
Cuando necesitas modificar el estilo de un elemento específico, puedes usar un modificador (¡por supuesto!). Para lograr esto, añades un doble guión – luego del elemento (o bloque). Aquí tenemos un corto ejemplo:

.block--modifier {}
.block__element--modifier {}

yo escribi

margin:36px auto 0px;

para que se de los 16px de margen que otorga en el diseno de Figma 😃

Cual es la funcion del width: 100% en el header (loa ctivo y desactivo y no veo nada) en este caso especifico no entiendo.

header {
position: relative;
display:flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 320px;
height: 334px;
text-align: center;
}

Tip de atajo de teclado: con ( CTRL + / ) podemos comentar una línea de código ahorrandonos tiempo en escribir <!-- -->

Bendito sea quien invento la metodologia BEM

Antes, cuando en la programación se excedía en el uso de la etiqueta <div>, se decía que tenías divitis y se convirtió en una mala praxis, aún es una mala práctica.

No se si me equivoque, pero se me hace que en el .header–title-container, el text-align:center como que sobra…si estoy equivocado, alguien podría explicarme por que es necesario ? ya que al mirar en chrome tools da el mismo efecto si lo desactivo o no.

Si tienen instalado NodeJS y quieren que los cambios en sus archivos se reflejen automáticamente en su navegador sin necesidad de recargar la pagina, pueden instalar el paquete live-server.
Para instalarlo ejecutan desde su terminal el comando:

npm install -g live-server

Y una vez instalado, para correr el servidor ejecutan este comando ubicándose en el directorio raíz de su proyecto :

live-server

Y ya pueden acceder al preview de su proyecto desde la url:
127.0.0.1:8080/

En vez de repetir codigo con align-self, podemos decirle al padre directamente que sus hijos se centren, con align-items: center, en vez de justify-content que no nos sirve ahi ya que estamos usando margenes para separar los elementos verticalmente.

header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid black; */
    width: 100%;
    min-width: 320px;
    height: 334px;
}

header img {
    width: 151px;
    height: 24px;
    margin-top: 6rem;
}

.header__content {
    margin-top: 4rem;
    text-align: center;
    /* border: 1px solid black; */
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
}

Diego es muy buen profesor, todo va quedando claro.