No tienes acceso a esta clase

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

Implementando BEM

9/31
Recursos

Aportes 101

Preguntas 65

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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(鈥溌緾ual 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鈥搈odifier
    dos guiones
    Segun BEM
    block_modifier
    _un guion abajo _

  • El nombre del modificador describe su apariencia ( 鈥溌緿e qu茅 tama帽o?鈥 O "驴Qu茅 tema?), su estado ( 鈥溌緾贸mo es diferente de los dem谩s?鈥) y su comportamiento ( "驴C贸mo se comporta? 鈥渙鈥 驴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?

驴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 鈥渇ormulario-b煤squeda鈥 -->
<formclass="formulario-busqueda">
	<!-- Elemento 鈥渋nput鈥 -->
	<inputclass="formulario-busqueda__input">
	<!-- Elemento 鈥渂oton鈥 -->
	<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 (鈥溌縌u茅 tama帽o? 馃搹鈥), su estado (activado鉁/desactivado鉂, enfocado馃摲, etc.) y su comportamiento (鈥溌緾贸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 鈥渄iv鈥, 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 鈥渉eader鈥搕itle.container鈥 se le puede agregar css poniendo 鈥渉eader 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鈥損rimary o Header__button鈥揹anger. El modifier es esa parte del naming que nos permite diferenciar los posibles 鈥渆stados鈥 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鈥攃ircular. 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 鈥渁lign-self鈥, yo coment铆a el error de hacer un nuevo contenedor para centrar ese elemento 鈥渞ebelde鈥 usando 鈥渏ustify 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鈥n 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鈥搕itle-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鈥揺stado.
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)

<h5>C贸mo nombramos a los bloques?</h5>

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.)

<h5>C贸mo nombramos a los elementos?</h5>

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.

<h5>C贸mo nombrar a los modificadores?</h5>

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

<h5>Qu茅 pasa si tengo un hijo dentro de un elemento?</h5>

Se nombran como un elemento

<header class="block">
	<section class="block__elem1">
		<div class="block__elem2">
		</div>
	</section>
	<div class="block__elem3">
	</div>
</header>
<h5>Una etiqueta puede tener 2 clases de un bloque?</h5>

Se le llama mix en BEM y si se puede.

<div class="block1 block2">
</div>
<h5>Podemos usar modificadores globales?</h5>

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 鈥渞ecomendaciones鈥 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 鈥攅n lo personal鈥 me han ayudado a entender y aprender mejor las reglas BEM:

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鈥搈odifier

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鈥搕itle-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鈥搈odificador{}

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;
}
align-self: center;. para alinear un objeto dentro de un contenedor con display flex

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鈥搕itle-container, el text-align:center como que sobra鈥i 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.