Máster en Diseño Web | Módulo III | Introducción I

Módulo III
Programación Frontend

Componentes

Componentes modulares

“It's a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS and possibly JavaScript.”

Características de un componente:

  • Son un fragmento de la interfaz que cumple una única función.
  • Son independientes, tanto de su contexto como del resto de componentes.
  • Son reutilizables.
  • Son autocontenidos, no filtran estilos a otros componentes.

Enlaces relacionados:

Especificidad (specificity)

En CSS, la especificidad, es lo que determina que estilo será el que acabará aplicandose a un elemento determinado.

Cuando a un elemento se le aplica más de un selector con reglas que actúan sobre la misma propiedad, es la especificidad la encargada de resolver este conflicto.

A grandes rasgos podemos ordenar los diferentes tipos de selectores de menor a mayor peso específico de la siguiente manera:

  1. Selectores de elemento
  2. Clases
  3. IDs
  4. Estilos inline

Calcular especificidad

0,0,0,0 

p {
    color: red;
}

0,0,0,1

.text {
    color: red;
}

0,0,1,0

#main strong {
    color: red;
}

0,1,0,1

header ul#main-nav .sub-menu li.child a:hover {
    color: red;
}

0,1,3,4

<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

1,0,0,0

p {
    color: red !important;
}

0,0,0,1 0,0,0,0

Selectores

Carcterísticas de un buen selector

  • Tiene baja especificidad
  • Es sólido (no depende del contexto)
  • Es autodocumentado (su función se entiende solo con leerlo)

El gráfico de especificidad es una representación de cómo se distribuye la misma a lo largo de una hoja de estilo.

Es recomendable que la especificidad vaya aumentando gradualmente, empezando con estilos más genéricos (selectores de elemento) y acabando con casos más específicos.

Gráfico de especificidad

The Specificity Graph - Harry Roberts

Especificidad plana

Intentar mantener los selectores lo más cortos posibles (evitar nesting) nos ayudará a que nuestros componentes no estén atados a un contexto determinado y sean independientes del HTML.


  /* Cuidado! */
  #main-header nav ul > li .nav-link:first-child { ... }  /* 0, 1, 2, 3 */

  /* Mejor */
  .MainNav-link--first { ... }  /* 0, 0, 1, 0 */

Nomenclaturas

"What we want is to be able to write code that is as transparent and self-documenting as possible. Transparency means that it is clear and obvious (to others) in its intent; self-documenting means that we don’t have to lose time to writing and reading lengthy, supplementary documentation."
- Harry Roberts

Enlaces relacionados:

Sistemas de Nomenclatura

BEM
(block / element / modifier)

BEM Methodology


  .nombre-del-bloque { ... }

  .nombre-del-bloque__elemento { ... }

  .nombre-del-bloque--modificador { ... }

Refactorizando:


  .tab-group { ... } /* 0, 0, 1, 0 */

  .tab-group > li { ... } /* 0, 0, 1, 1 */

  .tab-group a { ... } /* 0, 0, 1, 1 */

  .tab-group a.selected { ... } /* 0, 0, 2, 1 */
    

  .tab-group { ... } /* 0, 0, 1, 0 */

  .tab-group__tab { ... } /* 0, 0, 1, 0 */

  .tab-group__link { ... } /* 0, 0, 1, 0 */

  .tab-group__link--selected { ... } /* 0, 0, 1, 0 */

Otros sistemas nomenclaturas