CSS: cada maestrillo tiene su librillo

28 julio 2006 ~ Software

Estaba leyendo un post sobre cómo montárselo con las CSS y he sentido unas ganas irreflenables de contaros mis usos/manías con las hojas de estilo.

Lejos de querer sentar cátedra os cuento cómo me lo monto yo y os animo a que me contéis vuestras triquiñuelas para bregar con las CSS.

Intenta utilizar ID sólo para definir grandes zonas de las páginas (#cabecera, #pie, #menu….)

No lo he leído en ningún sitio, pero tengo la sensación de que un ID manda más que un class, con lo que el uso de IDs bloquea un poco la herencia de estilos y en ocasiones hace que espesemos nuestras hojas de estilo. Utiliza pocos IDs para definir grandes zonas y poder así aislar etiquetas HTML como #menu a, #pie a…

Define primero las etiquetas, después los IDs y los class

Si no te volverás loco con la herencia de propiedades.

Dentro de un estilo, define por este orden: posición, después las dimensiones, márgenes y paddings, tipografía, fondos y bordes.

El orden viene dado por poner primero los elementos que más afectan a la composición de bloques y dejar al final los que menos influyen y que, además, suelen ser los que más se retocan: color, bordes, tipografía…

Nunca declares en un mismo estilo un ancho con un padding y/o un borde.

IE añade el padding al ancho (ancho pintado = ancho + paddings laterales) con el alto pasa lo mismo, pero no suele importar. Ffox añade el border al ancho. Si mezclas anchos y paddings/bordes tendrás que recurrir a “hacks” y esto es una lata.

No uses hacks

Las cosas tipo “width:20px; /width:18px; /width:20px;” son un pestiño. A veces es mucho mejor meter un div de más para esquivar un hack y, en general, si te lo piensas dos o tres veces, verás que no necesitas ese div de más para esquivarlos.

Primero escribe el HTML que necesitarás, después el CSS

Si lo haces así, tendrás un HTML más limpio, ligero, semántico y elegante. Un error muy frecuente cuando empezamos con esto del CSS es usar HTML para pintar cosas: con el tiempo verás que apenas necesitas “div presentacionales”: casi todo se puede pintar desde la CSS.

Evita usar imágenes en el HTML más allá del contenido

Si quieres hacer un botón de imprimir con un icono de impresora mejor créale un estilo para añadir la imagen de fondo y deja limpio el HTML, algo tipo <a href="window.print();" class="imprimir">Imprimir</a>

Utiliza colores de fondo

Si tienes una imagen de color rojo de fondo en un div, añade color de fondo rojo, mejorarás la sensación de carga de la página y te asegurarás de que, aunque no se carguen las imágenes, quedarán definidas las diferentes zonas de contenidos que quieres marcar en la página.

Comenta la CSS

Se sincero contigo mismo: si no te vas a acordar mañana de por qué pusiste ese “padding-left” coméntalo, siempre hay tiempo para borrarlo.

Comenta el HTML

Comentar el cierre de los divs con el id o class del div te ahorrará horas de trabajo <div id="menu">...</div><!<del>-/menu</del>->

No te olvides de las impresoras

Los cuatro gatos que se impriman una página maquetada por ti te agradecerán enormemente una CSS para impresora.

Si usaste IDs para las grandes zonas, ahora es momento de tirar de ellas para ocultar todo lo que es prescindible en impresora, como los menús de navegación, los adwords, formularios inútiles en papel… Fuerza a negro todo el texto posible (ojo con los enlaces) y asegúrate de que tus textos superen el tirón de una impresión en blanco y negro.

Define una tipografía y tamaño que sean agradables para leer impresos y, aunque seas forofo de los ems, plantéate usar puntos en lugar de ems para la versión impresa.

Monta las cosas en un navegador decente, y después lo pruébalo en IE

Hacerlo al revés suele dar más problemas.

Y ya está. Si se me ocurren más cosillas, habrás segunda parte (aunque nunca fueron buenas). ¡¡¡¡Me voy de vacaciones!!!

Jose ~ 28 julio 06

¿Que te parece dividir la representación del site, (cabeceras, contenidos) en diferentes hojas de estilo usando ”@import url()” para solo tener que llamar a una de ellas desde el html?

Lo he visto en sites pero no se si realmente tiene algún propósito o es meramente organizativo para el desarrollador.

Disfruta de las vacances!!!!

jorge ~ 28 julio 06

Para sites grandes sí que uso @import, más que nada por organización como tú dices.

Enrique ~ 28 julio 06

Con lo de los “hacks” es que nunca he tragado… prefiero linkar a una hoja de estilo única para IE, que siempre es el mismo ;-)

Gonzalo ~ 31 agosto 06

No veo una cosa que me parece sumamente importante.
Lo primero, antes de HTML y CSS, definir el DOCTYPE.

Otra cosa, ¿cómo vais buscando la compatibilidad con navegadores? ¿con cual(es) empezais primero?

Yo empiezo simultáneamente con IE6 y FF (con el DOCTYPE bien puesto el modelo de caja de IE6 es el correcto). Después busco Opera. Después IE5.5 y IE5.0.

Como no tengo ningún Mac al lado no puedo testarlo en Safari, aunque en general si se ve bien en IE6, FF y Opera en Safari sale clavado. En cambio, si me dejo alguno, en Safari suelen aparecer algunas cosas raras.

Jorge ~ 31 agosto 06

Sí, lo del DOCTYPE es fundamental.
Yo siempre monto con Ffox, luego lo miro en IE6, y IE5.5 y a veces en Safari. Si voy sobrado de tiempo, también lo miro en Opera, pero pocas veces lo hago, depende del proyecto.

albertofs ~ 15 noviembre 06

Jorge, el class para elementos repetidos, como el estilo de esta cajita de comentarios, que se repite n-veces, y el id para elementos únicos en una página que no se pueden repetir, como el header o el sidebar…
¿Así lo hacemos, no?

Jorge ~ 15 noviembre 06

Sipes