Cuando desarrollamos un sitio en XHTML y CSS seguro que alguna vez te ha ocurrido que al añadir líneas y más líneas terminas con un CSS sobrecargado.
En un primer momento esta manera de organizar tus archivos CSS te puede parecer fea, pero cuando lo piensas te vas dando cuenta que a la larga es más efectivo debido al tiempo que ahorrarás a la hora de localizar los diferentes estilos.
No estoy seguro del porqué pero muchos diseñadores estan empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu código será más facil de leer puesto que tendrá menos "boquetes".
Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.
#wrapper {
width:800px;
margin:0 auto;
}#header {
height:100px;
position:relative;
}#feature .post {
width:490px;
float:left;
}#feature .link {
width:195px;
display:inline;
margin:0 10px 0 0;
float:right;
}#footer {
clear:both;
font-size:93%;
float:none;
}
Todo parece correcto y tu puedes localizar los elementos de una manera sencilla, pero imagina por un momento que tienes unos 200 elementos, cada uno con unos cuantos atributos, te costará muchisimo localizar los elementos deseados.
Por esos motivos para archivos CSS grandes es mucho más efectiva este tipo de organización:
#wrapper {width:800px; margin:0 auto;}
#header {height:100px; position:relative;}
#feature .post {width:490px; float:left;}
#feature .link {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer {clear:both; font-size:93%; float:none;}
En OrderedList podemos encontrar un buen ejemplo práctico de esta técnica:
Enlaces Relacionados
- Blueprint, framework para css
- Un buen pie de página
- Conversor Online de JPG a HTML (IMG2HTML)
- Buenas herramientas web de diseño
- El futuro de Internet, X/HTML 5 vs XHTML 2
- Google prueba un nuevo diseño de portada
- Editores CSS
- El hack definitivo para tus CSS
- Visor de thumbnails
- Diseña menus CSS en dos clicks
CSS
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.
Me parece correctísimo
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.
Pues ya puesto a optimizar
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.
En php sin embargo yo
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.
Tienes la opción de comprimir los CSS
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):
que:
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:
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.
Este tema es un tema
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
Si si, tooodo un tema :)
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 :)
Enviar un comentario nuevo