JMiur [E]

Optimizar ¿Quién no quiere optimizar las cosas? Es obvio que siempre es mejor que algo funcione de manera óptima a que funcione de manera mediocre pero en la web, solemos leer demasiados consejos y más allá de las buenas intenciones de quienes los proponen, no todos son aplicables e incluso, algunos son discutibles. Por suerte, como en todo, siempre hay más de una opinión y más de una solución y cuando hablamos de herramientas, no hay ninguna que sea perfecta ni sirva para todo así que usar el sentido común es siempre la mejor opción aunque ya se sabe que ese es el menos común de los sentidos.

Son muchas los sitios que nos hablan de comprimir el CSS e incluso, hay sitios como CleanCSS que ofrecen hacerlo pero esas cosas automáticas hay que utilizarlas con cuidado; con mucho cuidado.

Un artículo de Impressive Webs titula algo así como "Démosle algo de espacio al CSS para que respire" y hace un análisis de estas cosas, mostrando alternativas y opinando qué es lo bueno y qué es lo malo. Es obvio que esas conclusiones son subjetivas (como todas) pero podemos leerlas, pensar y luego decidir.

Hay algo que me parece básico, desde el punto de vista del tiempo de carga, salvo excepciones, comprimir el CSS no es relevante y para quienes recién comienzan puede transformar el código en una maraña inmanejable que asusta e impide avanzar; el resultado, no será otra cosa que un montón de caracteres difíciles de digerir y difíciles de editar:
body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', Helvetica, Arial, sans-serif;margin:10px 0}
Cada cuál deberá escoger la forma que le resulte más cómoda para escribir y organizar las cosas. Habrá quien use espacios, quien agregue tabulaciones, quien ordene las propiedades por tipo o alfabéticamente. Todo es aceptable y no hay que limitarse porque la clave es que encontremos lo que buscamos, que podamos editarlo y que funcione.

La estética del código no es relevante en absoluto, lo que interesa es que sea claro para nosotros mismos y evitemos los errores más comunes.

TODAS las propiedades terminan con un punto y coma; es cierto que no es necesario agregar ese caracter en la última propiedad de una regla pero, mejor lo ponemos en todas para acostumbrarnos y evitar problemas.
a { /* esto es un error */
  color: #AAA
  outline: none
  text-decoration:underline
}

a { /* esto está bien aunque la utima no tenga punto y coma */
  color: #AAA;
  outline: none;
  text-decoration: underline
}

a { /* esto está bien */
  color: #AAA;
  outline: none;
  text-decoration: underline;
}
Cuando una propiedad está formada por varias palabras, debe haber un carácter espacio entre ellos pero, no es necesario un espacio entre el caracter dos puntos y la primera palabra:
div { /* esto es un error porque entre el cierre del paréntesis y la palabra no-repeat falta un espacio */
  background: #AAA url()no-repeat left top;
}

div { /* esto está bien aunque no haya espacio entre los dos puntos y el color */
  background:#AAA url() no-repeat left top;
}

div { /* esto está bien */
  background: #AAA url() no-repeat left top;
}
Dentro de una etiqueta <style> JAMÁS se agregan otras etiquetas, sólo se agregan reglas de estilo con sus propiedades. Lo mismo ocurre con la etiqueta <b:skin> de Blogger. El JAMÁS también incluye los comentarios:
div { /* esto es un error  */
  <!-- comentario comentario comentario >
  background: #AAA url()no-repeat left top;
}

div { /* esto está bien */
  /* comentario comentario comentario */
  background:#AAA url() no-repeat left top;
}
En estos dias, el CSS es fundamental, mucho más cuando se trata de páginas dinámicas como un blog ya que es lo que nos permite simplificar la forma en que escribimos entradas. Los editores, nos dan herramientas para eso y esas herramientas son útiles pero a la vez son engañosas así que hay que utilizarlas con prudencia. Es cierto que podemos formatear nuestros textos con un simple click y listo; ponemos el color de los párrafos, el tipo de fuente; todo genial pero ... ¿y si mañana cambiamos de idea?

Son muchos los que cambian las plantillas con frecuencia; es parte de la diversión, parte del juego y, cuando lo hacen, suelen encontarrse con un problema: las entradas se ven mal; ese color no es el color que uno quiere, esa fuente no es la que uno usaría en este nuevo diseño y tal vez preguntan ¿cómo hago? Pués, lamentantablemente, si los estilos han sido agregados en las entradas no queda otro remedio que editarlas una por una.

Es que, el CSS es justamente para evitar eso y lo estamos utilizando mal; lo que debemos hacer, siempre que sea posible, es establecer reglas generales; el color, las fuentes, todo eso que vamos a utilizar habitualmente y colocar esas reglas y propiedades por defecto junto con las otras. Si no queremos que los enlaces se subrayen establecemos la regla para todo el sitio y eventualmente, cuando queremos que alguno de ellos se subraye, lo indicamos expresamente; ese tipo de detalles hará que no debamos estar repitiendo estilos en cada etiqueta.

Agregar estilos inline, es decir, con un atributo style dentro de la etiqueta, debe ser siempre el último recurso, nunca el primero.

16 comentarios:

Elizabetha Souvre  

Querido JMiur
se que no tiene nada que ver con el post, pero paso a desearte unas felices fiestas :P :P :P
He estado desparecida del mundo de la blogosfera porque estoy muy enfrema desde septiembre, y no puedo estar mucho en el PC porque me cansa.Esa es la razón por la cual no he venido a importunarte con mis miles de preguntas :O :O :O
De todas maneras, quería deserte una hermosas fiestas.Tengo los mejores recuerdos de ti, porque siempre me has ayudado mucho, rápidamente y con muucha paciencia. Siempre recuerdo tus gentilizas, porque en realidad en este mundo ya casi nadie ayuda a otros solo por el placer de hacerlo como lo hacen Tu , Gemm@ Rosa o Pizcos (entre otros) y uno lo agradece de corazón.
Un saludo cariñoso, y espero poder seguir leyendote luego, cuando me sneta mas restablecida
FELICIDADES!!!!

;)

LIZ

Responder
Elizabetha Souvre  

OHHHH se me olvido mencionar que cada vez el blog está más bellamente minimalista..justo como lo imaginaba ;) :P :D ...
Felicidades!!!!
:)

Responder
JMiur  

Hola Elizabetha. Gracias por los buenos deseos. Son recírpocos. Ojala, lo de la salud vaya mejorando y pases una excelente Navidad :D

Responder
Graciela  

Continúe con ésto Jmiur :)

Hablando de CSS...una pregunta:
cómo se hace para colocar un borde, por ejemplo...
ENLACE
y que el mismo no se extienda en todo el Main?

Estoy haciendo budines...mañana te paso uno, ahora están calientes, hay que dejarlos resposar :P

Responder
MCarlitooH2  

Hola, siempre paso por aqui pero casi nunca dejo comentarios, pero ahora lo aré xD, muchas gracias por la ayuda que me brindaste en esta entrada, siempre cometo errores de estos, quisiera pedirte un favor (bueno solo si esque quieres) siempre e tenido problemas en tu pagina por el hecho del color al selccionar el texto, porque al seleccionar el texto, NO SE VE NADA LO QUE TENGO SELCCIONADO =( y siempre tengo complicaciones con los codigos y etc. porque el color del fondo de la zona de entradas es igual al color del texto seleccionado nose si ami solamente me pasara eso, pero para mi es bastante molesto XD jajaja (y no es que tenga problemas de visión ni tampoco problemas con mi monitor) Bueno es solo eso, un saludos y sigue con este espectacular blog ;)

Responder
Anna Jorba Ricart  

Sr JMiur...mi entrañable maestro como siempre te he llamado,te deseo felicidad no solo en estas fiestas de navidad sino siempre...con salud,salud y salud....agradeciendote un año más tantos consejos para nuestro blog.

Responder
SATNET  

Hola JMiur, tienes razón, las cosas optimizadas si funcionan bien, la experiencia dice que a veces un simple espacio puede darnos dolor de cabeza. Ahora, una consulta acerca de los comentarios o notas dentro de la plantilla.

Vengo de la vieja guardia de dejar comentarios en los puntos mas importantes para no olvidarme o para la posterioridad, :) ahora, veo que dentro del bloque de styles el "/*" me funciona bien, pero cuando paso más allá del "/head" ya no los acepta y debo pasar al tradicional "<!" pero, he comprobado que no me esta funcionando me aparece escrito en la pagina o me da error, algo pasa y no estoy dando en el clavo.

Si me puedes ampliar más este tema de los comentarios, estaré agradecido porque sin ellos, algo me falta. Un cordial saludo.:D

Responder
JMiur  

Graciela
Continuaremos :D
No veo el enlace. Explicame un poco más. No sé si te referís a esto pero, ciertas etiquetas (div p etc) son bloques, rectángulos que tienen un ancho igual al contenedor así que, para que ocupen "menos espacio" se las debe dimensionar con width.
PD: Los budines calientes son lo mejor !!!!!!!!

MCarlitooH2
Eso debe ocurrir en Chrome o Safari porque no veo el problema en ningún otro navegador. Ahí le puse un color especial.

Anna Jorba Ricart:
Un abrazo, Anna. Muchas felicidades para tí tambien. Que pases una excelente Navidad. Muchísimas gracias por tantas palabras lindas :-)

SATNET:
Sin duda es así :D

Los comentarios dentro de <style> </style> o <b:skin> </b:skin> se escriben tal como dices:

/* esto es un comentario */

dentro de un script, se escriben así:

// esto es un comentario de un script

o bien así cuando tienen varias líneas:

/*
esto es un comentario de un script
que tiene vaias líneas
*/

En el HTML se colocan así:

<!-- esto es un comentario -->

Responder
Graciela  

Era un ejemplo jajaja soy mala para hacerme entender...así me ha ido ;)

El borde con el width, bien me voy de retiro un rato...noooo deben resposar, mañana tendrá otra contextura, no sea 'atolondrado' por favor jajaja...tienen nueces y chocolate, a pedido de quienes?!

Responder
Carlos Soler  

JMiur una lección para todos los públicos. Bueno, Navidad ya esta a la vuelta de la esquina, espero disfrutes estas Fiestas con la gente que más quieres y te deseo un 2011 donde no falte el humor y logres todo aquello que te propongas. Un abrazo querido JMiur, que aunque este en la sombra siempre me llega tu luz!

Responder
JMiur  

Graciela
Cuando tenga algo en concreto, me avisa ... ojo, no se coma todo :D

Gracias, Carlos. Un abrazo para ti y que pases una Navidad excelente !!!!!!!!!!!! :D

Responder
Graciela  

Nunca tengo algo en concreto, antes busco y busco, me surgió una duda con respecto a que el borde no ocupe todo el ancho main, seguro antes lo había leído...pero sabe que entre copa y copa hip hip jajaja

Éste año consumí alcohol, solo en Nochebuena, hice lemonchamp, tres copas y estaba pum para arriba jajaja y después...a la camita!

Responder
JMiur  

Pués, juegue nomñas y a algún lado se llega :D

Responder
La hormiguita  

Gracias, muy útil. :)

Responder
Diego "Luna"  

No se si va aqui la pregunta, pero he estado buscando por el blog y no he encontrado lo que busco.
He añadido dos seciones debajo del header encima del post, pero el sidebar me queda a la altura del post y me gustaria que quedara a la misma altura que las seccione y no consigo dar con lo que me hace falta.
GRACIAS.

Responder
JMiur  

Me debrías decir cuál es el blog y cuales son esas secciones agregadas para verlo online.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR