Comentarios en: Evita sobrecargar tus archivos CSS http://www.tufuncion.com/css-optimizar Wed, 10 Mar 2010 05:18:18 +0000 http://wordpress.org/?v=2.9.2 hourly 1 Por: Pablo http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1380 Pablo Tue, 30 Nov 1999 00:00:00 +0000 #comment-1380 Estoy de acuerdo contigo, en cuanto minimizar el tamaño de los CSS. Pero no coincido en la estructura que proponés para CSS grandes. No hay más cómodo a la hora de desarrollar que indentar el código, incluso en los CSS. Es mucho más claro una estructura de este tipo (y con comentarios): <blockquote> /*- Comentario -*/ .post{ margin: 0px; } /*- Comentario -*/ .post .entry h2{ color: #FFFFFF; } </blockquote> que: <blockquote> .post{ margin: 0px;} .post .entry h2{color: #FFFFFF;} </blockquote> Yo trabajo todo de la primera manera y a la hora de poner en producción el sitio web, prefiero tomarme el trabajo de comprimir todos los CSS quitando comentarios y espacios, resultando algo como: <blockquote> .post{ margin: 0px;} .post .entry h2{color: #FFFFFF;} </blockquote> Es un trabajito extra, pero es una vez cada tanto (cada vez que actualizas el css). Agarrar un CSS grande con una estructura como la que propones después de un año de no tocar el código, te puede llevar al suicidio :P. Estoy de acuerdo contigo, en cuanto minimizar el tamaño de los CSS. Pero no coincido en la estructura que proponés para CSS grandes. No hay más cómodo a la hora de desarrollar que indentar el código, incluso en los CSS. Es mucho más claro una estructura de este tipo (y con comentarios):

/*- Comentario -*/
.post{
margin: 0px;
}
/*- Comentario -*/
.post .entry h2{
color: #FFFFFF;
}

que:

.post{ margin: 0px;}
.post .entry h2{color: #FFFFFF;}

Yo trabajo todo de la primera manera y a la hora de poner en producción el sitio web, prefiero tomarme el trabajo de comprimir todos los CSS quitando comentarios y espacios, resultando algo como:

.post{ margin: 0px;} .post .entry h2{color: #FFFFFF;}

Es un trabajito extra, pero es una vez cada tanto (cada vez que actualizas el css). Agarrar un CSS grande con una estructura como la que propones después de un año de no tocar el código, te puede llevar al suicidio :P .

]]> Por: manu http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1381 manu Tue, 30 Nov 1999 00:00:00 +0000 #comment-1381 Este tema es un tema realmente interesante porque cada uno tiene su manera de comprimir y optimizar su CSS, tu solución me parece muy óptima ya que en un principio lo organizas a tu gusto (que es muy importante) y luego lo comprimes y estructuras de una manera más estándar (si es que se puede decir...) por lo que para la posible lectura de otro diseñador se lo pones bastante más fácil. Saludos Este tema es un tema realmente interesante porque cada uno tiene su manera de comprimir y optimizar su CSS, tu solución me parece muy óptima ya que en un principio lo organizas a tu gusto (que es muy importante) y luego lo comprimes y estructuras de una manera más estándar (si es que se puede decir…) por lo que para la posible lectura de otro diseñador se lo pones bastante más fácil.

Saludos

]]> Por: Pablo http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1382 Pablo Tue, 30 Nov 1999 00:00:00 +0000 #comment-1382 No recuerdo en que post criticaban muchas veces que comprimir los CSS y los JS traían problemas de usabilidad, ya que si alguien quería ver el código, lo tenía realmente jodido. A esto le respondía que es simple: cualquiera que vea el código, a mi criterio, debería ser capaz de darse cuenta de que está comprimido y no es nada difícil encontrar una herramienta para que te lo formatee y te lo presente de una manera más "humana". Incluso, en mi forma de desarrollar, por ej. en <a href="http://www.tusecreto.es">TuSecreto</a>, tenemos un CSS para cada componente de la página: header.css, footer.css, box_search.css, etc. Alrededor de 10 css por cada página. Pero, lo que hacemos es, a través de un constantes, DEV_ON, es que: si está en true (en modo desarrollo), cargue cada CSS en forma independiente. Si es false (modo producción), tome todos los CSS, los concatene, comprima, guarde en un archivo [nn.css], y la página levante solo ese archivo css. Y no tengo una pizca de trabajo extra. De esta forma, consigo modularizar todos los CSS y los JS, cargo solamente lo que necesito en cada página, y tengo todo organizadito. Si en algún momento modifico un CSS, lo borro y al momento de armarse la página, se regenera el css utilizando las nuevas sources. Espero que se entienda :) No recuerdo en que post criticaban muchas veces que comprimir los CSS y los JS traían problemas de usabilidad, ya que si alguien quería ver el código, lo tenía realmente jodido. A esto le respondía que es simple: cualquiera que vea el código, a mi criterio, debería ser capaz de darse cuenta de que está comprimido y no es nada difícil encontrar una herramienta para que te lo formatee y te lo presente de una manera más “humana”.

Incluso, en mi forma de desarrollar, por ej. en TuSecreto, tenemos un CSS para cada componente de la página: header.css, footer.css, box_search.css, etc. Alrededor de 10 css por cada página. Pero, lo que hacemos es, a través de un constantes, DEV_ON, es que: si está en true (en modo desarrollo), cargue cada CSS en forma independiente. Si es false (modo producción), tome todos los CSS, los concatene, comprima, guarde en un archivo [nn.css], y la página levante solo ese archivo css. Y no tengo una pizca de trabajo extra.

De esta forma, consigo modularizar todos los CSS y los JS, cargo solamente lo que necesito en cada página, y tengo todo organizadito. Si en algún momento modifico un CSS, lo borro y al momento de armarse la página, se regenera el css utilizando las nuevas sources.

Espero que se entienda :)

]]> Por: Manolo Canga http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1383 Manolo Canga Tue, 30 Nov 1999 00:00:00 +0000 #comment-1383 Ya puesto a optimizar, recordar que además de css, hay que escribir php de tal forma: <?php for(x=0;x<10;x++); holamundo(); function holamundo(){ echo "hola mundo"; } ?> Una cosa es optimizar y otra es volverse paranoico optimizando. Tiene que primar la claridad(sin pasarse, claro) sobre la optimización. Ya puesto a optimizar, recordar que además de css, hay que escribir php de tal forma:
<?php for(x=0;x<10;x++); holamundo(); function holamundo(){ echo “hola mundo”; } ?>

Una cosa es optimizar y otra es volverse paranoico optimizando.

Tiene que primar la claridad(sin pasarse, claro) sobre la optimización.

]]> Por: Albert http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1385 Albert Tue, 30 Nov 1999 00:00:00 +0000 #comment-1385 A mi me parece perfecto porque ya lo había hecho en alguna ocasión. Y no es qüestión unicamente de optimnizar sinó de hacer que el código sea mas legible. Aunque parezca mentira, resulta mucho mas fàcil localizar las cosas a simple vista. A mi me parece perfecto porque ya lo había hecho en alguna ocasión. Y no es qüestión unicamente de optimnizar sinó de hacer que el código sea mas legible. Aunque parezca mentira, resulta mucho mas fàcil localizar las cosas a simple vista.

]]> Por: manu http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1388 manu Tue, 30 Nov 1999 00:00:00 +0000 #comment-1388 En php sin embargo yo considero mejor indentar de manera correcta el código puesto que no necesitamos ahorrar ningún tipo de espacio y que no es un caso similar al de los archivos CSS en el que ordenamos por elementos. En php sin embargo yo considero mejor indentar de manera correcta el código puesto que no necesitamos ahorrar ningún tipo de espacio y que no es un caso similar al de los archivos CSS en el que ordenamos por elementos.

]]> Por: Javier Rioja http://www.tufuncion.com/css-optimizar/comment-page-1#comment-1389 Javier Rioja Tue, 30 Nov 1999 00:00:00 +0000 #comment-1389 La siguiente forma: <code>#wrapper {width:800px; margin:0 auto;}</code> tiene como ventana no consumir líneas inútiles para hacer scroll al buscar líneas de código, hay capas o estilos que casi nunca se editan, por eso veo bien poner todas las propiedades en fila, sin embargo en los demás mejor una en cada línea. La siguiente forma:

#wrapper {width:800px; margin:0 auto;}

tiene como ventana no consumir líneas inútiles para hacer scroll al buscar líneas de código, hay capas o estilos que casi nunca se editan, por eso veo bien poner todas las propiedades en fila, sin embargo en los demás mejor una en cada línea.

]]>