logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 12. Sistema de diseño: BEM ======
Vamos ahora a ver lo mas importante de todo el módulo. ¡Como organizar nuestras clases CSS!. Antes de empezar puede leer este artículo que habla sobre la importancia de una arquitectura CSS: [[https://www.paradigmadigital.com/techbiz/por-que-nos-olvidamos-de-arquitectura-css/|¿Por qué nos olvidamos de la Arquitectura CSS?]]


===== Arquitectura CSS =====


Cuando nos enfrentamos a proyectos grandes, puede que nuestros compañeros no entiendan nuestras líneas de código, para eso se crearon las arquitecturas de CSS.

Los objetivos son:
  * Predecible: Escribir reglas claras.
  * Reutilizable: No escribir código redundante.
  * Mantenible: Que sea fácil de leer y adaptarnos a los estándares.
  * Escalable: Que pueda crecer fácilmente pero sin afectar el rendimiento.

Buenas prácticas
  * Establecer reglas para que el equipo se entienda.
  * Explicar la estructura base o dar los fundamentos del proyecto a un nuevo integrante.
  * Evitar hojas de estilo muy extensas.
  * Tener una buena documentación explicando ciertos aspectos del código.


===== BEM =====
A partir de ahora, como arquitectura CSS vamos a seguir una llamada [[https://getbem.com/|BEM]].

[[https://platzi.com/tutoriales/1640-frontend-developer-2019/9913-oocss-bem-smacss-itcss-y-atomic-design/|OOCSS, BEM, SMACSS, ITCSS y Atomic Design]]

Mas información:
  * Metodología BEM
    * [[https://css-tricks.com/bem-101/|BEM 101]]
    * [[https://webdesign.tutsplus.com/es/articles/an-introduction-to-the-bem-methodology--cms-19403|Una introducción a la metodología BEM]]
    * [[https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/|BEM: A New Front-End Methodology]]
    * [[https://seesparkbox.com/foundry/bem_by_example|BEM by Example]]
    * [[https://en.bem.info/methodology/|BEM Methodology]]
    * {{ :clase:daw:diw:css_beers.pdf |CSS and Beers is Awesome.Presentación}}
    * [[https://youtu.be/qnSbqv6rqx4|Video:Buenas prácticas en arquitecturas CSS. Codemotion]]
    * [[https://youtu.be/07lk3GLKoa4|Vídeo:Guía rápida para escribir CSS mantenible y escalable. Codemotion]]
    * [[https://github.com/calidae/normandy-css/blob/master/README.md|Normandy is a CSS boilerplate that gives you an initial structure for your CSS]]
    * [[https://thoughtbot.com/blog/tailwind-versus-bem|Tailwind versus BEM]]
    * BEM Avanzado
      * [[https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/|Battling BEM CSS: 10 Common Problems And How To Avoid Them]]
      * [[https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/|BEMIT: Taking the BEM Naming Convention a Step Further. BEM+ITCSS]]
      * [[https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/|More Transparent UI Code with Namespaces]]
      * [[https://css-tricks.com/abem-useful-adaptation-bem/|ABEM. A more useful adaptation of BEM.]]
      * [[https://seesparkbox.com/foundry/thoughtful_css_architecture|Thoughtful CSS Architecture]]
  * Otras metodologías o arquitecturas
    * [[http://cssguidelin.es/|CSS Guidelines]]
    * [[https://smacss.com/book/|Scalable and Modular Architecture for CSS (SMACSS)]]
    * [[https://philipwalton.com/articles/css-architecture/|CSS Architecture]]
    * [[https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/|ITCSS: Scalable and Maintainable CSS Architecture]]

===== Bloques y Elementos =====

Lo primero es identificar los bloques de nuestra página. Esos bloque son como componentes u objetos que la página. En las siguientes imágenes podemos ver ejemplos de bloques.

{{:clase:daw:diw:head-marked2.jpg?|}}
{{:clase:daw:diw:list-of-goods.jpg?|}}

Vemos que un bloque puede o no tener dentro otro bloque. En bloque "head" tiene dentro muchos bloques.

Como los bloques pueden ser muy complejos, cada bloque puede tener si lo necesita de "elementos". Veamos un ejemplo:

{{:clase:daw:diw:menu-items2.jpg?|}}

El componentes de "Tab" tiene 4 pestañas.

Por último nos quedarían los modificadores que luego veremos. 

Así que BEM significa lo siguiente:
  * **B**loque
  * **E**lemento
  * **M**odificador

Así que vamos a tener clases CSS que serán de tipo Bloque, de tipo Elemento o de tipo Modificador. Pasemos a ver un ejemplo.

Imaginar el siguiente panel:

{{:clase:daw:diw:panel.png|}}

Su HTML sería una cosa así:

<sxh html>
<div>
    <div>Cabecera</div>
    <div>
        <p>Contenido</p>
        <p>Mas contenido</p>
    </div>
</div>
</sxh>

Todo ese HTML forma el bloque "Panel" que está compuesto dos por elementos "Titulo" y "Contenido".
Así que las clases CSS van a ser las siguientes
  * Bloque: panel
  * Elemento: <nowiki>panel__titulo</nowiki>
  * Elemento: <nowiki>panel__contenido</nowiki>

<sxh html>
<div class="c-panel">
    <div class="c-panel__titulo">Cabecera</div>
    <div class="c-panel__contenido">
        <p>Contenido</p>
        <p>Mas contenido</p>
    </div>
</div>
</sxh>

Como vemos el nombre de la clase CSS de un bloque es como el nombre del bloque con el prefijo "c-". Mientras que el nombre de un elemento es como el nombre del elemento prefijado con el nombre del bloque y <nowiki>"__"</nowiki>. Es importante recordar que son necesarias las <nowiki>"__"</nowiki>. No se puede poner otra cosa que no sea eso.

¿Que ocurre con el tag <p>. No forma parte del panel . Es otro bloque que podemos meter dentro del panel pero no forma parte del bloque "panel".

Veamos otro ejemplo con un botón:

{{:clase:daw:diw:primary.png|}}

Solo hay un bloque llamado "c-boton" y no hay elementos.

<sxh html>
<div class="c-boton">Mas información</div>
</sxh>

Por último nos faltan los modificadores. Imaginar que queremos que el panel pueda tener varios colores:

{{:clase:daw:diw:paneles.png|}}


===== Modificadores =====

¿Como modificamos el CSS para incluir esos nuevos colores? Pues con un modificador.

<sxh html>
<div class="c-panel c-panel--warning">
    <div class="c-panel__titulo c-panel__titulo--warning">Cabecera</div>
    <div class="c-panel__contenido c-panel__contenido--warning">
        <p>Contenido</p>
        <p>Mas contenido</p>
    </div>
</div>
</sxh>

Vemos que hemos añadido a todas las clases una nueva clase que se llama igual a la que ya hay pero acabada "--warning". Pues bien , esa nueva clases, es el modificador. El modificador realmente se llama "warning" pero para que se sepamos que es un modificador y para saber a que bloque o elemento pertenece se separa por "--" (dos guiones) al nombre del bloque o elemento.

Así que pasemos ahora a ver una serie de reglas:
  * En cada tag solo puede haber una clase de bloque o de elemento
  * Las clases de elemento siempre estarán en un tag que está dentro de otro tag de tipo bloque.
  * Un elemento o un bloque puede tener mas clases CSS siempre que sean de tipo modificador y que sean modificadores del bloque o elemento al que pertenecen.

{{ :clase:daw:diw:bem.svg |}} [[https://ray.so/?title=BEM&theme=candy&spacing=128&background=true&darkMode=false&code=PGRpdiBjbGFzcz0iYmxvY2siPjwvZGl2PgoKPGRpdiBjbGFzcz0iYmxvY2siPgogIDxkaXYgY2xhc3M9ImJsb2NrX19lbGVtZW50Ij4KICA8ZGl2IGNsYXNzPSJibG9ja19fZWxlbWVudCI-CjwvZGl2PgogCjxkaXYgY2xhc3M9ImJsb2NrIGJsb2NrLS1tb2RpZmllciI-CiAgPGRpdiBjbGFzcz0iYmxvY2tfX2VsZW1lbnQgYmxvY2tfX2VsZW1lbnQtLW1vZGlmaWVyIj4KICA8ZGl2IGNsYXNzPSJibG9ja19fZWxlbWVudCBibG9ja19fZWxlbWVudC0tbW9kaWZpZXIiPgo8L2Rpdj4KICAgIA&language=xml|source]]

Hemos visto que los bloques empiezan por "c-" , eso es porque son como componentes visuales. Veamos los prefijos que pueden haber:
  * **c-**: Para bloques que son componentes visuales. Como paneles, botones, árboles, etc.
  * **l-**: Para bloques que son de Layout. El layout es un tipo de bloque que solo se dedica a indicar como se colocan otros bloques dentro de él. Sirve para organizar los divs dentro de la página. Un componente visual también dice como se organizan sus elementos dentro de la página pero no se dedica en exlusiva a colocar cosas.


Dentro de los modificadores hay de otro tipo que es el modificador global que empieza por **g--** (la letra g y dos guiones). Es un modificador que se puede usar con cualquier componente. Se suele usar para definir cosas como los margenes, los paddings, etc. De esa forma no es necesario tener el mismo modificador en cada componente.

Veamos ahora un ejemplo un poco mas complejo

<sxh html>
<body class="c-body">    
    <div class="l-page">
        <div class="l-page__header">
            <img class="c-logo">
            <div class="c-menu">
                <div class="c-menu__item ">Nuevo</div>
                <div class="c-menu__item c-menu__item--active">Editar</div>
                <div class="c-menu__item c-menu__item--disable">Borrar</div>
            </div>
        </div>
        <div class="l-page__body">
            <form class="c-form g--margin-4 g--margin-bottom-6">
                <input class="c-input" >
                <input class="c-input" >
                <input class="c-input" >
                <button class="c-boton c-boton--primary c-boton--normal">Guardar</button>
            </form>
        </div>     
        <div class="l-page__footer">
            <div class="l-horizontal">
                <img class="c-social" src="facebook.png">
                <img class="c-social" src="youtube.png">
                <img class="c-social" src="instagram.png">
                <img class="c-social" src="twitter.png">
            </div>    
        </div> 
    </div>
</body>
</sxh>

Están los siguientes bloques de tipo componentes y sus elementos:
  * c-body
  * c-logo
  * c-menu
    * <nowiki>c-menu__item</nowiki>
  * c-form
  * c-input
  * c-boton
  * c-social

Luego están los Layouts
  * l-page
  * l-horizontal

Están los modificadores de cada componente o elemento
  * <nowiki>c-menu__item</nowiki>
    * <nowiki>c-menu__item--active</nowiki>
    * <nowiki>c-menu__item--disable</nowiki>
  * c-boton 
    * c-boton--primary
    * c-boton--normal

Y por último están los modificadores globales:
  * g--margin-4
  * g--margin-bottom-6

{{:clase:daw:diw:globales.jpg|}}

===== Mejorando BEM con SASS =====
El CSS del panel con su modificador ''warning'' sería así:

<sxh css>
.c-panel {
  border: 1px solid #c0c0c0;
  border-radius: 6px;
}

.c-panel__titulo {
  padding: 8px;
  font-weight: bold;
  color: #ffffff;
  background-color: #0056b8;
}

.c-panel__contenido {
  padding: 8px;
}

.c-panel--warning {
  border-color: #ed8936;
}

.c-panel__titulo--warning {
  background-color: #ed8936;
}

.c-panel__contenido--warning {
  background-color: #fef5e6;
}
</sxh>

Hay que repetir ''c-panel'' en cada clase. Con el selector padre ''&'' de SASS todo el bloque queda junto y el nombre del bloque se escribe una sola vez:

<sxh sass>
.c-panel {
  border: 1px solid #c0c0c0;
  border-radius: 6px;

  &--warning {
    border-color: #ed8936;
  }

  &__titulo {
    padding: 8px;
    font-weight: bold;
    color: #ffffff;
    background-color: #0056b8;

    &--warning {
      background-color: #ed8936;
    }
  }

  &__contenido {
    padding: 8px;

    &--warning {
      background-color: #fef5e6;
    }
  }
}
</sxh>

<note tip>
Un fichero SASS por bloque y dentro de él un único ''.c-xxx { }'' con todos sus elementos y modificadores anidados.
</note>

===== Ejercicios =====

==== Ejercicio 1.A ====
Crea un componente que tenga lo siguiente:

{{:clase:daw:diw:articulo.png|}}


La imagen es esta: [[https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:monitor.webp|monitor.webp]]


Los caracteres de la estrella y el camión son:
  * ⭐
  * 🚚


<sxh html>
<c-articulo
  nombre="Monitor Acer Nitro KG241YX3BIP 23.8' FHD 200Hz VA FreeSync Premium HDR10"
urlImagen="https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:monitor.webp"
[precioActual]="89.99"
[precioAnterior]="99.99"
[valoracion]="4.6"
[numeroOpiniones]="1472"
[fechaEntrega]="fechaEntrega"
[precioEnvio]="0.00"
[otrosEnvios]="true"
/>
</sxh>


<sxh ts;title:c-articulo.ts>
import {Component, Input} from '@angular/core';
import {CommonModule} from '@angular/common';

@Component({
  selector: 'c-articulo',
  imports: [CommonModule],
  templateUrl: './c-articulo.html',
  styleUrl: './c-articulo.scss'
})
export class CArticulo  {
  @Input() nombre:string="";
  @Input() urlImagen:string="";
  @Input() precioActual:number=0;
  @Input() precioAnterior:number=0;
  @Input() valoracion:number=0;
  @Input() numeroOpiniones:number=0;
  @Input() fechaEntrega:Date=new Date();
  @Input() precioEnvio:number=0;
  @Input() otrosEnvios:boolean=false;


}

</sxh>


<sxh html;title:c-articulo.html>
<div class="c-articulo">
  <img class="c-articulo__image" src="{{urlImagen}}" >
  <h3 class="c-articulo__title">{{nombre}}</h3>
  <p class="c-articulo__precios">
    <span class="c-articulo__precio c-articulo__precio--actual">{{precioActual | currency}}</span>
    &nbsp;
    <span class="c-articulo__precio c-articulo__precio--anterior">{{precioAnterior | currency}}</span>
  </p>
  <p>
    <span class="c-articulo__valoracion">{{valoracion}}/5</span>&nbsp;
    <span class="c-articulo__valoracion c-articulo__valoracion--estrella">⭐</span>&nbsp;
    <span class="c-articulo__opiniones">{{numeroOpiniones}} opiniones</span>
  </p>
  <p>
    🚚&nbsp;
    <span class="c-articulo__entrega c-articulo__entrega--positivo">{{precioEnvio | currency}}</span>&nbsp;
    <span class="c-articulo__entrega c-articulo__entrega--negativo">{{fechaEntrega| date:'shortDate'}}</span>
  </p>
  <p class="c-articulo__otras-opciones">
    Otras opciones disponibles
  </p>
</div>
</sxh>

<sxh sass;title:c-articulo.scss>
.c-articulo {
  font-family: "Open Sans", Arial, sans-serif;
  width: 197px;
  color: #333;

  &__title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  &__precios {
    margin: 8px 0;
  }

  &__precio {
    &--actual {
      font-size: 17px;
      font-weight: 700;
      color: #bf0019;
    }

    &--anterior {
      font-size: 14px;
      color: #6e6e6e;
      text-decoration: line-through;
    }
  }

  &__valoracion {
    font-size: 13px;
    font-weight: 600;
    color: #333;

    &--estrella {
      font-size: 16px;
    }
  }

  &__opiniones {
    color: #333333;
    font-size: 13px;
  }
  &__entrega {
    font-size: 13px;
    font-weight: 700;

    &--positivo {
      color: #008000;
    }

    &--negativo {
      color: #333333;
    }
  }

  &__otras-opciones {
    margin-top: 8px;
    font-size: 13px;
    color: #777;
    font-weight: 600;
  }

}
</sxh>



==== Ejercicio 1.B ====
Modifica ahora el componente para que
  * Si los gastos de envío 
    * Son 0€ se muestre "Entrega gratis." de color verde 
    * Sino que no es muestre nada.
  * Si la fecha de entrega es 
    * Mañana que muestre  "Recíbelo mañana" en color verde
    * Sino mostrara "Recíbelo a partir del jueves 13 de noviembre" en color negro. (Obviamente hay que poner la fecha de entrega en letras)
  * Si no hay precio anterior que no lo muestre
  * Si no hay otras opciones disponibles que no muestre el texto

{{:clase:daw:diw:articulo2.png|}}