Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Limpia el CSS que no utilices

Limpia el CSS que no utilices 08.APR.14

Gianfranco Lemmo
Fundador WebBizarro

Muchas veces nos ha tocado tomar proyectos que poseen mucho código CSS que realmente no sabemos si está funcionando, debido a que tantas personas le han metido mano al proyecto que ya no se sabe que funciona o no, como dicen muchos si funciona no lo toques.

Para lograr esto les presento una herramienta cuyo nombre es Uncss desarrollada en NodeJS, que nos facilitará la existencia para remover todo el código basura que se encuentra en nuestros archivos, para instalarlo debemos ejecutar el siguiente comando:

npm install -g uncss

¿Pero cómo funciona Uncss? Los archivos HTML son cargados por PhantomJS y JavaScript es ejecutado. Las hojas de estilo utilizadas son extraídas del HTML resultante. Las hojas de estilo son concatenadas y las reglas son parseadas por css-parse. los filtros document.querySelector dejan afuera a los selectores que no son encontrados en los archivos HTML. Las reglas restantes son convertidas de vuelta a CSS.

Como con cada herramienta basada en NodeJS, puedes sacar ventaja de su API en JavaScript. Aquí hay un ejemplo de uso:

var uncss = require('uncss');
 
var files   = ['my', 'array', 'of', 'HTML', 'files'],
    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/mypage', '...'], // Deprecated
        timeout      : 1000,
        htmlroot     : 'public'
    };
 
uncss(files, options, function (error, output) {
    console.log(output);
});
 
uncss(files, function (error, output) {
    console.log(output);
});
 
var raw_html = '...';
uncss(raw_html, options, function (error, output) {
    console.log(output);
});

Espero que sea de su utilidad.