WordPress Inclusivo 15: Refactorizando la base css

Ahora que tenemos una base de css interesante para las tipografías, vamos a proceder a mejorar ese código para hacer mas sencillo usarlo y mantenerlo.

En el anterior capítulo concluimos con un primer bloque de precálculos y una definición de características en los encabezados calculadas directamente en las definiciones.

En base a mi experiencia personal gestionando webs, entieno que son necesarias os acciones:

  • En primer lugar, optimizar y documentar la parte de precálcuos, para que en too momento tengamos claro de donde parte cada cosa y al tiempo cualquier cambio se pueda llevar a cabo con efectividad y robustez.
  • En segundo, creo necesario generalizar las definiciones para evitar calcular los mismos elementos una y otra vez, y por ende evitar que un ajuste o modificación en uno de ellos, implique tener que tocar todo el código.

Paso 1: Consolidando la definición

Como hemos indicado, básicamente comentamos el bloque inicial para que quede claro que es caa cosa:

(...)
--fuenteTextoSize: 2rem;

/* Calculos Niveles Proporcion Aurea */
--fi: 1.61803;  /* Redondeamos la proporcion áurea 1,61803.. */
--fiA: calc(var(--fi) * var(--fi));
--fiB: calc(var(--fiA) / 3 * 2.5);
--fiC: var(--fi);
--fiD: calc(var(--fiA) / 2 );
--fiE: 1; /* Base Size */
--fiF: calc(var(--fiA) / 3);

/* Definimos el factor base de interlineado. */
--muA: 1.447;
--muB: 1.486;
--muC: 1.517;
--muD: 1.565;
--muE: 1.667;
--muF: 1.786;

/* Obtenemos los tamaños de espaciado general */
--exA: calc(var(--fuenteTextoSize) * var(--fi));
--exB: calc(var(--fuenteTextoSize) * var(--muB));
--exC: calc(var(--fuenteTextoSize) * var (--muC) / var(--fi));
--exD: calc(var(--fuenteTextoSize) * var /--muD) / var(--fi) * var(--fi));
--exE: calc(var(--fuenteTextoSize) * var(--nuE) / var(--fi) * var(--fi) * var(--fi));
--exF: calc(var(--fuenteTextoSize) * var (--muF) / var(--fi) * var(--fi) * var(--fi) * var(--fi));
(...)

Paso 2: Simplificando la asignación

En este paso lo que vamos a realizar es la creación de una serie de variables destinadas a escribir el resto de la css fácilmente y subiremos los cálculos a ese bloque, para que el css como tal quee mucho más limpio:

(...)
/* Tamaños de fuente e interlineado Aureos (5 = P y H5) */
--fuenteBase: var(--fuenteTextoSize);
--fuente1: calc(var(--fuenteBase) * var(--fiA));
--fuente2: calc(var(--fuenteBase) * var(--fiB));
--fuente3: calc(var(--fuenteBase) * var(--fiC));
--fuente4: calc(var(--fuenteBase) * var(--fiD));
--fuente5: calc(var(--fuenteBase) * var(--fiE));
--fuente6: calc(var(--fuenteBase) * var(--fiF));

--interlineadoBase: calc(var(--fuenteBase)*var(--muE));
--interlineado1: calc(var(--fuenteBase) * var(--fiA) * var(--muA));
--interlineado2: calc(var(--fuenteBase) * var(--fiB) * var(--muB));
--interlineado3: calc(var(--fuenteBase) * var(--fiC) * var(--muC));
--interlineado4: calc(var(--fuenteBase) * var(--fiD) * var(--muD));
--interlineado5: calc(var(--fuenteBase) * var(--fiE) * var(--muE));
--interlineado6: calc(var(--fuenteBase) * var(--fiF) * var(--muF));
(...)

Esto nos permitirá simplificar el código que establece el tamaño de fuente e interlineado, quedando del modo siguiente:

(...)
* {
  font-family: var(--fuenteTextos);
  font-size: var(--fuenteBase);
  line-height: var(--interlineadoBase);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fuenteSecundaria);
  margin:0;
}

h1 {
  font-size: var(--fuente1);
  line-height: var(--interlineado1);
}

h2 {
  font-size: var(--fuente2);
  line-height: var(--interlineado2);
}

h3 {
  font-size: var(--fuente3);
  line-height: var(--interlineado3);
}

h4 {
  font-size: var(--fuente4);
  line-height: var(--interlineado4);
}

h5 {
  font-size: var(--fuente5);
  line-height: var(--interlineado5);
}

h6 {
  font-size: var(--fuente6);
  line-height:  var(--interlineado6);
}
(...)

Como podéis ver, mucho más legible y mantenible. Aplicad esto a vuestros diseños, en el próximo capítulo seguiremos configurando elementos 🙂

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>