Por Nacho Palou — 18 de Mayo de 2005

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.

Compartir en Flipboard  Compartir en Facebook  Tuitear

2 comentarios

#1 — ajoMan

Estoy de acuerdo con (b) pero en absoluto lo estoy con (c). Básicamente por 2 motivos. Porque la CSS se vuelve ilegible (si alguien la quiere trapiñar agradecerá que se pueda leer decentemente ;-) y porque pienso que cada vez tiene menos sentido ahorrarse unos pocos bytes teniendo páginas llenas de imágenes y objetos como películas Flash. Bueno, al menos eso me parece a mi.

#2 — Alvy

Respecto a la compresión desde hace ya tiempo (HTTP 1.1) que admiten casi todos los servidores, etc. todos los envíos de ficheros html/texto van gzipeados, es decir comprimidos, digamos que el ahorro en "bytes de texto" de los de toda la vida es negligible. (Vamos, que no vale pa ná ahorrarte 2x1 porque el gzip ya te hace el 2x1).

Yo creo que el ahorro es más bien por simplificar, aunque por otro lado puede resultar un código un poco ofuscado como bien dice ajoman.