CSS: Buenas prácticas

CSS es un lenguaje fundamental en el desarrollo web y es relativamente fácil de aprender. Sin embargo, si se usa sin aplicar buenas prácticas, el proyecto puede volverse caótico y difícil de mantener. La complejidad de las hojas de estilos puede incrementarse mucho a medida que un proyecto crece.

A continuación se detalla una serie de buenas prácticas que permitirán mejorar la eficiencia del código, haciéndolo más mantenible y de mayor calidad.

Usa archivos CSS externos

La forma más correcta de incluir estilos CSS es a través de un archivo CSS externo mediante el elemento <link>. De esta forma, todos los estilos quedarán unificados en un mismo lugar, simplificando el mantenimiento del código.

Por tanto, conviene evitar la inclusión de código CSS con el elemento <style> o usando el atributo HTML style de forma directa sobre un elemento HTML. Estos dos métodos dificultan mucho el mantenimiento. Además, el atributo style pierde la capacidad de aplicar estilos en cascada.

Con el elemento <link> es posible enlazar tantos archivos CSS como sea necesario. Esto puede ser útil en el caso de querer añadir estilos para diferentes contextos. Por ejemplo, en Recursivos utilizamos una segunda hoja de estilos para aplicar diseño a la sintaxis de los lenguajes de programación.

Empieza con un reinicio

Es esencial realizar un reinicio de estilos con el fin de eliminar las inconsistencias que aplican los distintos navegadores web. Se trata, por tanto, de anular los estilos predeterminados para empezar con una base más uniforme; de esta forma se reducirán las incompatibilidades entre diferentes navegadores.

Existen hojas de estilos que agrupan reglas para conseguir este restablecimiento del código. Un ejemplo es Normalize.css, que además de eliminar inconsistencias también preserva algunos valores iniciales útiles. Así, todos los navegadores representarán los elementos HTML de forma coherente.

Una forma de usarlo es copiar su contenido para reutilizarlo al principio del archivo CSS de nuestro proyecto. Otra vía es descargar el archivo normalize.css para luego subirlo al servidor y enlazarlo a través del elemento <link>.

Otro código de reinicio muy interesante y popular es reset.css, de Eric A. Meyer. Este archivo es de dominio público (sin licencia), por tanto se puede usar como punto de partida y modificarlo según sea conveniente.

En Recursivos usamos el siguiente código CSS:

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

article, aside, details, figcaption,
footer, header, hgroup, main, menu,
nav, pre, figure, section {
  display: block;
}

html, body, div, th, td, dl, dt, dd,
ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, label, p, figure, input,
blockquote {
  direction: ltr;
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

a img {
  border: none;
}

a {
  text-decoration: none;
}

a:focus {
  outline: 0;
  text-decoration: none;
}

Documenta bien el código

Mediante el uso de los comentarios en CSS es posible documentar el código para disponer de una ayuda disponible siempre que sea necesario. Por ejemplo, puede ser muy útil incluir información sobre el autor del código, la fecha de la última modificación, una URL de referencia o la versión del documento.

Información útil en CSS:

/*
-----------------------
Theme    : Sigma-theme
Author   : Recursivos
Created  : 22/10/2021
Modified : 12/05/2022
Version  : 1.2.3
License  : GPL v2
-----------------------
*/

En proyectos grandes, también puede ser útil añadir un índice numerado al principio del archivo, en el que se definen las secciones de código. Después debe añadirse comentarios al inicio de cada sección, con la numeración correcta.

Índice en CSS:

/*
--- Índice de estilos ---
1. Reset
2. Header
3. Body
4. Footer
5. Navigation
6. Social media
7. Pagination
8. Images
-------------------------
*/

Organiza el código en secciones

Una de las ventajas de definir secciones de código mediante comentarios es, precisamente, organizar el código en secciones. Esta práctica facilita tanto su mantenimiento como su legibilidad.

Código CSS:

/* 1. Reset */

/* 2. Header */

/* 3. Body */

/* 4. Footer */

De esta forma, los elementos HTML que se encuentran en el footer (pie de página) estarán definidos en la sección «Footer» del archivo CSS. Gracias a tener una estructura, un proyecto puede crecer de forma más ordenada.

Prioriza el uso de clases

Se recomienda el uso del selector de clase (atributo class) siempre que sea posible, en detrimento del selector de identificador (atributo id). El caso es que el selector de identificador solo se puede usar una vez en el documento HTML, mientras que el selector de clase se puede reutilizar en otros elementos.

Además de eso, cada elemento HTML puede tener múltiples clases a la vez, mientras que solo puede tener un único identificador declarado. Dado que hay elementos que pueden llegar a tener más de una aplicación de estilos, el código CSS será más consistente mediante el uso de clases.

Los selectores de identificador tienen una especificidad más elevada que los selectores de clase. Esto implica que los estilos declarados a través de un id tendrán preferencia, por lo que son más difíciles de anular o sobreescribir. Si se utilizan en exceso se puede tener problemas de mantenibilidad.

Los identificadores pueden tener otros usos más interesantes fuera de las hojas de estilos. Por ejemplo, son muy utilizados para crear enlaces ancla, aquellos enlaces internos que permiten saltar a otra sección del mismo documento HTML. También se usan para seleccionar elementos HTML mediante JavaScript.

Agrupa los selectores

Es habitual que algunos selectores compartan las mismas propiedades. En lugar de volver a repetir las mismas propiedades para cada uno, de forma independiente, es preferible agrupar los selectores en una misma regla. De esta forma, el código será más fácil de mantener y además no existirá tantas líneas idénticas.

Código CSS sin agrupar:

.sin-agrupar1 {
  background: green;
  color: blue;
  font-size: 1.5em;
  margin: 0 auto;
}

.sin-agrupar2 {
  background: green;
  color: blue;
  font-size: 2.5em;
  margin: 0 auto;
}

Las dos reglas del ejemplo anterior comparten tres propiedades y tienen otra propiedad que es diferente. Vamos a agruparlas:

.agrupacion1,
.agrupacion2 {
  background: green;
  color: blue;
  margin: 0 auto;
}

.agrupacion1 {
  font-size: 1.5em;
}

.agrupacion2 {
  font-size: 2.5em;
}

Evita los selectores adicionales

Es conveniente usar selectores específicos con el objetivo de mantener un código más limpio y fácil de mantener. Por eso es importante no usar selectores adicionales con los que solo se añade complejidad a la regla. Usar demasiados selectores también incrementa el tamaño del archivo.

Código CSS con selectores adicionales:

html body footer nav ul li {
  background: blue;
}

html body footer nav ul li a:link,
html body footer nav ul li a:visited {
  color: yellow;
}

html body footer nav ul li a:hover {
  color: orange;
}

Mediante los selectores de elementos (<html>, <body>, <footer>, <nav>, <ul> y <li>) se crea una regla demasiado extensa. Añadir una clase al elemento <nav> habría sido más simple y sencillo.

.navigation li {
  background: blue;
}

.navigation li a:link,
.navigation li a:visited {
  color: yellow;
}

.navigation li a:hover {
  color: orange;
}

Usa propiedades abreviadas

El uso de propiedades abreviadas (shorthand) puede simplificar mucho el código, reduciendo de forma considerable la cantidad de propiedades. Algunas de las propiedades que son abreviatura son las siguientes:

background, para los fondos
border, para los bordes
border-radius, para las esquinas
font, para las fuentes
list-style, para las listas
margin, para márgenes
padding, para el relleno
outline, para los contornos

Miremos un ejemplo de código CSS sin abreviar:

.sin-abreviar {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}

La misma regla, abreviada:

.abreviatura {
  margin: 1px 2px 3px 4px;
}

Ordena las propiedades alfabéticamente

Es recomendable ordenar las propiedades CSS de forma alfabética dentro de una misma regla, ya que esto facilita su localización. Cuantas más propiedades tiene una regla, más útil será para encontrarlas. No obstante, algunos diseñadores prefieren ordenar las propiedades según su funcionalidad.

Código CSS sin ordenar:

.sin-ordenar {
  width: 100%;
  color: blue;
  margin: 0;
  background: green;
  padding: 10px;
  height: auto;
  border: 1px solid #000;
}

Código CSS ordenado:

.ordenado {
  background: green;
  border: 1px solid #000;
  color: blue;
  height: auto;
  margin: 0;
  padding: 10px;
  width: 100%;
}

Usa los prefijos de los navegadores

Hay algunas características del lenguaje CSS que fueron introducidas de forma experimental, por lo que varios navegadores web las implementaron a través de prefijos. Cuando una característica se estandariza de forma oficial por el consorcio W3C (Consorcio WWW), los prefijos se puede omitir.

Con el uso de estos prefijos se facilita que los desarrolladores puedan probar y experimentar con nuevas funcionalidades.

Lista de prefijos por navegador:

Navegador	Prefijo
Chrome	`-webkit-`
Safari	`-webkit-`
Firefox	`-moz-`
IE	`-ms-`
Opera	`-o-`

Se recomienda su uso en aquellas propiedades que todavía no estén oficialmente estandarizadas, así se garantiza su compatibilidad. El uso de prefijos se puede revisar con la herramienta online Autoprefixer. Por ejemplo, se puede ver como la propiedad border-radius ya no requiere el uso de prefijos, mientras que box-shadow todavía requiere el uso de -webkit-.

Código CSS:

.esquinas {
  -webkit-box-shadow: 1px 1px 3px blue;
  box-shadow: 1px 1px 3px blue;
}

Usa unidades relativas

Cuando se trata de definir el tamaño de una fuente, es preferible usar unidades de longitud relativas. Las unidades relativas (como em o rem) son escalables a diferentes tamaños de pantalla y en distintos dispositivos móviles. Tienen la ventaja de mantener la proporcionalidad del diseño web.

La unidad em es relativa al tamaño de la fuente del elemento padre, y la unidad rem es relativa al tamaño de la fuente del elemento raíz. En equivalencia, 1em equivale a 16px. La unidad rem tiene la ventaja de que permite modificar todas las fuentes del documento solo cambiando el valor del caso base.

Evita el uso de ‘!important’

Evita el uso excesivo de la etiqueta !important. A pesar de que es un recurso fácil de implementar porque acostumbra a solucionar conflictos sobre la especificidad de forma rápida, esto puede derivar en estilos incorrectos.

Por lo tanto, es preferible controlar la especificidad de los selectores y no tener que recurrir a esta expresión. Su uso puede derivar en tener que usarla demasiadas veces, de modo que cada vez que se usa se anule la anterior.

Usa variables

CSS permite definir variables para almacenar valores repetitivos, es decir, aquellos que se usarán varias veces en la hoja de estilos. Pueden ser muy útiles para almacenar colores y fuentes tipográficas. En proyectos grandes, las variables serán de gran ayuda para facilitar el mantenimiento del código.

Además, los nombres de las variables sirven de «identificador semántico», con lo cual también facilita mucho la tarea de identificar los colores.

Código CSS sin usar variables:

h1 {
  color: #1177aa;
}

p {
  color: #313131;
}

.box {
  background: #f5f5f5;
  border-color: #1177aa;
  color: #313131;
}

Usando variables CSS:

:root {
  --fondo-base: #f5f5f5;
  --texto-base: #313131;
  --azul: #1177aa;
}

h1 {
  color: var(--azul);
}

p {
  color: var(--texto-base);
}

.box {
  background: var(--fondo-base);
  border-color: var(--azul);
  color: var(--texto-base);
}

De esta forma, tenemos los colores establecidos al principio de la hoja y los podemos utilizar simplemente recordando el nombre de la variable.

Indica fuentes alternativas

Si se especifica una fuente de texto que no existe en ningún dispositivo, los usuarios no podrán visualizarla. En general, las fuentes personalizadas se suben al servidor junto con el archivo CSS, sin embargo, no se descargarán el 100% de las veces. Por esta razón conviene indicar fuentes alternativas que sirvan de respaldo.

En estos casos, lo más habitual y correcto es indicar una lista de fuentes de texto que sean muy similares entre ellas. De este modo, si una fuente no está disponible en el dispositivo, el navegador web intentará usar la siguiente.

Código CSS sin fuentes alternativas:

.sin-fuentes {
  font-family: "Oswald"
}

Código CSS con fuentes alternativas:

.con-fuentes {
  font-family: "Oswald", Arial, Helvetica, sans-serif
}

Haz un diseño accesible

En el momento de realizar un diseño hay que tomar ciertas decisiones que pueden afectar a la accesibilidad del sitio web. Por ejemplo, elegir unos colores de fondo y texto cuya ratio de contraste sea demasiado baja dificultará la legibilidad del texto. Lo mismo sucedería con un tamaño de fuente demasiado pequeño.

Valida el código

Acuérdate de validar el código CSS antes de subirlo al servidor para asegurarte de que no contiene errores. Encontrar y corregir errores te permitirá tener un código más limpio y te ahorrará tiempo buscando fallos de forma manual.

Minimiza las hojas de estilos

Otro buen consejo es minimizar las hojas de estilos CSS para conseguir que el archivo ocupe menos memoria. Esto se consigue eliminando los espacios en blanco, los saltos de línea y los comentarios. Así la descarga del sitio web más rápida, por lo que el usuario accederá más rápidamente.

Para llevar a cabo este proceso, lo más habitual es preservar el archivo original, sin minimizar, y luego guardar el archivo minimizado con otro nombre. Normalmente se se añade el prefijo .min al nombre del archivo.

Por ejemplo, si vamos a minimizar el archivo estilos.css, el archivo resultante pasará a llamarse estilos.min.css. De esta forma, podremos seguir trabajando con comodidad en el archivo original. El archivo minimizado es el que se sube al servidor y se enlaza mediante el elemento HTML <link>.

Existen varias herramientas para minimizar archivos CSS. Una solución bastante efectiva, que sirve tanto para código CSS como para código JS, es «YUI Compressor». Esta herramienta se usa desde la terminal.

Comprueba el resultado

Al finalizar un proyecto, es conveniente comprobar el resultado en varios navegadores web y en diferentes dispositivos móviles para verificar que se visualiza correctamente en todas partes. No todos los navegadores tienen el mismo nivel de soporte para las propiedades CSS que hay actualmente.

Una forma de comprobar la compatibilidad de una propiedad CSS es usando la herramienta CanIUse. Con esta herramienta también se puede conocer el porcentaje de usuarios que usan un navegador determinado.