El formateo y la optimización de archivos CSS ya no son un quebradero de cabeza para los desarrolladores web con la ayuda de estas herramientas seleccionadas a mano

Desde sus inicios, las hojas de estilo en cascada (CSS) se han utilizado ampliamente para perfilar el aspecto visual de las páginas web. Incluyen la definición de colores, diseños, animaciones y fuentes. Al ser independiente de HTML, CSS permite adaptar fácilmente la presentación de una página web a distintos tipos de dispositivos con diferentes tamaños de pantalla sin tener que cambiar ni un ápice del contenido de la página.

CSS se denomina hoja de estilos en cascada por la forma en que los valores de las propiedades se aplican a la jerarquía del contenido. Los elementos hijos pueden heredar o anular los valores de las propiedades de sus elementos padres. Estas capacidades se proporcionan a través de un modelo basado en un ámbito jerárquico de efecto. El problema de este modelo es que, si no se utiliza correctamente, puede afectar seriamente al rendimiento de un sitio web.

Y a nadie le gusta un sitio web lento. Por eso surgieron la necesidad de optimizar el CSS y una nueva raza de herramientas diseñadas explícitamente para que los archivos CSS sean lo más ordenados y rápidos posible.

La optimización de CSS puede hacerse de muchas maneras: Los archivos CSS se pueden reducir de tamaño, se pueden limpiar, se pueden probar o validar para comprobar que son correctos, se pueden ordenar, se pueden formatear para que se entienda su código y, en general, mejor, se pueden afinar para permitir una mejor experiencia de usuario. Hemos hecho una selección de las mejores herramientas para cada una de estas tareas.

# Herramientas de ajuste de CSS

Minificar CSS

CSSMinify es una sencilla herramienta para realizar la minificación de CSS: el proceso de tomar el CSS embellecido, legible y bien formado y eliminar todo su espaciado, sangría, nuevas líneas y comentarios. El CSS minificado resultante puede utilizarse satisfactoriamente sin esos elementos. Además, la minificación hace que el CSS sea más difícil de leer, lo que disuade a los ladrones de código de robar sus hojas de estilo que tanto trabajo le han costado.

Cuando minifique su código, es un buen consejo conservar una versión embellecida (no minificada) del mismo, ya que necesitará poder leerla en el futuro, en caso de que necesite realizar cambios en ella.

Topcoat

Topcoat no es una herramienta para optimizar su CSS. En su lugar, es una biblioteca CSS de código abierto diseñada pensando en la velocidad. Es un descendiente del lenguaje de diseño de Adobe desarrollado para Brackets, Edge Reflow.

Topcoat incluye PSD y muchos otros artefactos de diseño, junto con una colección de iconos SVG sencillos y limpios y guías de estilo. También ofrece herramientas de evaluación comparativa y la elegante familia tipográfica Adobe Source Sans Pro.

Embellecedor de código

CodeBeautifier se basa en CSS Tidy, el popular analizador y optimizador de CSS de código abierto. Le permite pegar el código CSS a procesar en un área de texto, u obtenerlo de una URL. Después de hacer su trabajo, muestra el código optimizado, junto con una lista de los cambios realizados. Puede copiar el código modificado en el portapapeles o guardarlo en un archivo para su uso posterior.

La herramienta ofrece una importante y completa lista de opciones que le permiten ajustar sus resultados para satisfacer sus preferencias. Por ejemplo, ofrece cinco opciones de compresión, que van desde la compresión más baja hasta la más alta. Otras opciones le permiten especificar la clasificación, otras formas de compresión, la eliminación de elementos innecesarios, entre otras.

CSS Nano

Otra herramienta minificadora de CSS es CSS Nano. Ésta se basa en una herramienta creada para transformar estilos con JavaScript, llamada PostCSS. Gracias a la arquitectura de plugins de esta herramienta, los creadores de CSS Nano pudieron construirla a partir de pequeños módulos con funciones restringidas.

Por defecto, CSS Nano tomará el archivo CSS que usted le dé a procesar y sólo hará en él optimizaciones seguras. Pero la herramienta también ofrece opciones para llevar la compresión al límite. El funcionamiento del CSS seguirá siendo el mismo, pero se eliminarán sus espacios en blanco innecesarios. También se comprimirán sus identificadores y se purgarán por completo sus definiciones innecesarias.

# Herramientas de limpieza de CSS

Marcado sucio

Dirty Markup hace precisamente lo contrario que los minificadores: toma cualquier código que usted le alimente y lo limpia, haciéndolo fácil de leer — siempre y cuando sea código CSS válido. El código resultante queda perfectamente embellecido.

Los creadores de Dirty Markup afirman que casi mil millones de líneas de código (considerando no sólo CSS sino también HTML y JavaScript) han sido embellecidas utilizando su herramienta.

Selectores Dust-Me

Dust-Me Selectors se creó para escanear un sitio web y encontrar selectores CSS no utilizados con el fin de eliminarlos y reducir el tamaño de su código. Funciona como complemento para Firefox y Opera.

Dust-Me Selectors puede trabajar en una página individual o rastrear todo un mapa del sitio, mostrándole los detalles de todas las hojas de estilo y selectores encontrados, organizándolos en usados y no usados. La versión para Firefox es capaz de escanear las páginas automáticamente mientras navega. Sólo debe tener en cuenta que, al hacerlo, los eventos de mutación pueden desencadenar escaneos adicionales si la página cambia.

CSS Lint

CSSLint ofrece una interfaz minimalista: sólo un gran cuadro de texto en el que pegar su código CSS para que sea «lintado». No dice lo que el proceso de linting hará a su código, pero un mensaje de advertencia en la parte superior de la página le dice que los resultados herirán sus sentimientos –y también le ayudarán a codificar mejor.

CSS Lint valida la sintaxis de su código frente a un conjunto de reglas predefinidas. Al hacer esto, detecta posibles ineficiencias y errores. Con un poco de personalización, CSS Lint le da la posibilidad de seleccionar el conjunto de reglas que desea aplicar.

# Herramientas de comprobación/validación de CSS

Prueba de esfuerzo de CSS

CSSStress Test funciona como un bookmarklet (un pequeño fragmento de código JavaScript) que aplica pruebas de estrés al CSS de cualquier página web. La herramienta indexa todos los elementos del código CSS y sus clases. A continuación, inicia la prueba de estrés eliminando las clases una a una y cronometrando el tiempo que tarda en desplazarse la página.

Si el tiempo que tarda la página en desplazarse se reduce considerablemente al eliminar un selector, entonces ese selector representa un área problemática que debe eliminarse o corregirse. Esta herramienta funciona especialmente con código CSS3 sofisticado que permite esquinas redondeadas, opacidad, sombras de texto y sombras de recuadro. Todos estos efectos pueden realizarse en CSS3 sin necesidad de utilizar cortes de imagen, scripts especiales o añadir elementos adicionales.

Pero CSS3 puede causar problemas: una sola propiedad puede provocar redibujos visibles y problemas de desplazamiento de página. Ahí es donde la Prueba de Estrés de CSS puede resultar útil.

Servicio de validación de CSS

El Servicio de validación de CSS valida las hojas de estilo en cascada y (X)HTML con hojas de estilo. La herramienta comprueba las propiedades definidas en todas las versiones de CSS. Para validar una página o un archivo CSS, sólo tiene que introducir su URI (identificador uniforme de recursos) y establecer algunas opciones básicas, como el perfil (tipo de CSS a comprobar), el dispositivo de destino, las advertencias a mostrar y qué hacer con los problemas relacionados con las extensiones del proveedor (mostrar errores o advertencias).

Una vez que esté todo listo, pulse el botón Comprobar y espere los resultados. El informe final le mostrará una lista exhaustiva de errores y advertencias, donde encontrará propiedades no válidas, errores de sintaxis, extensiones de proveedor desconocidas, entre otras muchas cuestiones que debería corregir en su CSS para ponerlo a punto. El informe también le mostrará todo el código CSS válido de su página.

BackstopJS 3

BackstopJS 3 automatiza las pruebas de regresión visual de las interfaces de usuario de la web responsiva. Realiza su trabajo comparando una serie de capturas de pantalla del DOM. Ofrece una emocionante lista de características: hay informes en el navegador, también la configuración de diseño para la impresión y la pantalla, y algunas otras características específicas, como el filtrado de visualización y la referencia / prueba / visual diff inspector.

Utilizando scripts Puppeteer y ChromyJS, BackstopJS 3 puede simular las interacciones del usuario, y es capaz de renderizar pruebas con Chrome Headless. Para eliminar los problemas de renderizado entre plataformas, también dispone de renderizado Docker integrado. La herramienta se puede ejecutar global o localmente como un paquete independiente, y juega bien con CI y control de código fuente. BackstopJS 3 es muy fácil de usar: con sólo tres comandos, puede recorrer un largo camino.

Conclusión

Espero que las herramientas CSS anteriores le ayuden a optimizar los archivos CSS de su aplicación web para un mejor rendimiento. Si está interesado en aprender CSS avanzado, eche un vistazo a este brillante curso.