Encuentra el CSS inservible con uncss

¿Sabes que es mejor que añadir nuevas características a un sitio web o una aplicación, desde la perspectiva del código? Eliminar las que no necesita. Ya se trate de código, imágenes, dependencias... el deshacerse del código inservible es como el primer sorbo de un vaso de vino después de un largo día de trabajo estresante. Recorrer un directorio de imágenes a través de ImageOptim es una experiencia única, ¿me equivoco? ¿Y si hubiera una herramienta, sin embargo, que te permitiera encontrar CSS sin utilizar en un determinado sitio web? Existe, y se llama uncss, una herramienta de NodeJS. Echemos un vistazo a cómo funciona uncss!

El uso básico de una línea de comandos en uncss sería:

uncss http://programacion.net > estilos.css

La salida que produce esta ejecución es una hoja de estilo que contiene únicamente las reglas CSS que se utilizan en la web, eliminando entonces las reglas inservibles. Entonces, ¿cómo funciona uncss? Déjame que te explique como se lleva a cabo esta eliminación de reglas que no se utilizan:

  • Los archivos HTML se cargan por PhantomJS y se ejecuta el Javascript.
  • Las hojas de estilo utilizadas ​​se extraen del HTML resultante.
  • Las hojas de estilo se concatenan y las reglas se analizan con css-parse.
  • document.querySelector filtra los selectores que no son encontrados en los archivos HTML.
  • Las reglas que han quedado se convierten de nuevo a CSS.

Al igual que casi todas las utilidades basadas en NodeJS, puedes beneficiarte de su API de JavaScript. He aquí un ejemplo de uso:

var uncss = require('uncss');

var files   = ['mi', 'array', 'de', 'archivos', 'html'],
    options = {
        ignore       : ['#added_at_runtime', /test-[0-9]+/],
        media        : ['(min-width: 700px) handheld and (orientation: landscape)'],
        csspath      : '../public/css/',
        raw          : 'h1 { color: green }',
        stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css'],
        ignoreSheets : [/fonts.googleapis/],
        urls         : ['http://localhost:3000/mipagina', '...'], // Deprecated
        timeout      : 1000,
        htmlroot     : 'public'
    };

uncss(files, options, function (error, output) {
    console.log(output);
});

/* Sin opciones */
uncss(files, function (error, output) {
    console.log(output);
});

/* Especificando un HTML */
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
    console.log(output);
});

Creo que no habrá discusión en que los años de mantenimiento de un sitio web, supone la adición se código que más tarde se abandona su utilidad y no se vuelve a utilizar, lo que se suma el exceso de código del proyecto en sí. Este exceso de código afecta indirectamente a los usuarios que tienen cargar código extra. Es por eso que la  eliminación de código muerto es muy importante. Dale a uncss una oportunidad - es fácil de utilizar, ayuda mediante la automatización a mantener tu código fuente lo más práctico posible.

Y este ha sido el tutorial sobre cómo iterar una lista en Python, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.