Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

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

CSSnano para minificar y optimizar archivos CSS

CSSnano para minificar y optimizar archivos CSS 15.OCT.15

Alvaro José Rios Ch
Fundador WebBizarro

El peso en los sitios web es muy importante, desde las imagenes, hasta el HTML que escribimos influye en los tiempos de carga de nuestro sitio, por eso es importante emplear todas las herramientas que encontremos para hacer de nuestros archivos lo mas ligero en la web.

Esta vez vamos a hablar de una herramienta para archivos CSS en especifico llamada CSSnano, que se encarga de minificar y optimizar las hojas de estilo y funciona como un postprocesador y puede ser usado en conjunto con algun prerocesador o simplemente sobre el código VanillaCSS.

El punto positivo de esta herramienta es que es modular por lo que puedes encender o apagar funciones como lo desees, por lo que si la herramienta esta haciendo algo que no debería puedes apagar el modulo que esta haciendo cosas extrañas y seguir usando la herramienta.

Puedes incluirla en muchas herramientas que comunmente usan los desarrolladores como gulp, brunch, fly, grunt y muchas más o simplemente usarlo en el cli de tu maquina, por lo que me parece muy versatil.

El número de cosas que puede optimizar es bastante grande por lo que no voy a mencionarlas todas, sin embargo lo que más me gustó es que puedes decidir cuales usar. También puedes usarlo para tomar ese proyecto desastroso que lo hizo alguien sin mucho conocimiento, es decir uno de tus proyectos viejos, y optimizar el CSS para que no esté tan mal y que pese menos.

h1::before, h1:before {
    margin: 10px 20px 10px 20px;
    color: #ff0000;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    font-weight: normal;
    font-weight: normal;
}

/* invalid placement */
@charset "utf-8";

Como pueden ver este fragmento de CSS tiene un monton de cosas mal, no solo la definición del charset, el atributo font-weight está repetido, el prefijo -webkit ya no es necesario, solo por decir algo, el resultado despues de usar la herramienta es.

@charset "utf-8";h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}