CSS Optimiser ayuda a reducir el tamaño de las hojas de estilo (CSS) sin alterar el resultado final —aunque según el contenido y complejidad de la hoja habrá que usar ciertas opciones con más o menos cuidado— al eliminar buena parte del código sobrante que algunos programas de desarrollo visual de hojas de estilos (CSS) suelen incluir en cantidades más o menos respetables.
Por ejemplo, si se definen valores distintos para las propiedades margin y padding de una clase el resultado puede ser este:
(a)
.clase {
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
Que en realidad es totalmente correcto pero que opcionalmente puede modificarse para hacerlo más simple —y de paso intentar conseguir un archivo .css más ligero:
(b)
.clase {
margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;
}
El resultado es idéntico en ambos casos pero (b) supone un ahorro en código de más de la mitad respecto a (a).
Este ejemplo es posiblemente el más fácil y evidente, pero esta reducción también es aplicable al resto de propiedades como font, background, border, etc.
En este mismo ejemplo se puede reducir todavía un poco más el tamaño final al eliminar algunos espacios en blanco y retornos de carro hasta dejar esto:
(c)
.clase{margin:1px 2px 3px 4px;padding:1px 2px 3px 4px}
que es casi una quinta parte menor que (b) y para lo que se puede utilizar la herramienta web CSS Compressor.
