en CSS

CSS: Consejos y buenas prácticas

11635-12987.jpgJusto esta semana pasada empezamos en la oficina una fase de revisión de marcado y de css de una web bastante grande, y en la que participaremos varios desarrolladores. Ésto nos ha obligado a acordar algunas convenciones a la hora de trabajar, en cuanto a codificación, estructura, nomenclatura… y a plasmarlas por escrito para que todo el equipo, ahora y en el futuro, pueda consultarlas en un documento de referencia.

En esa guía, además, hemos tratado de incluir algunas recomendaciones de “buenas prácticas” entre las que voy a tratar de resumir algunas de ellas, las más importantes a mi entender.

Consideraciones previas

  • Asegúrate de definir siempre un DOCTYPE, ¡y úsalo!
    De otra forma, el navegador entrará en el Quirk Mode, aumentando el tiempo de renderizado y provocando algunos desajustes en cuanto a la interpretación de ciertas propiedades CSS.
  • Evita usar estilos incrustados o elementos presentacionales en tu marcado.
    Reserva etiquetas <strong> y <em> para aquellos textos que realmente requieran ser enfatizados, y nada de estilos incrustados con styles dentro de tu código HTML. Los estilos SIEMPRE separados del contenido.
  • Valida tu código a medida que codifiques.
    Te evitarás muchos dolores de cabeza al final del proceso. Gran parte de problemas de renderizado son consecuencia de marcado no válido.De igual forma, asegúrate de que esa propiedad tan molona de CSS que estás usando sea estándar y no exclusiva para IE.
  • Resetea las propiedades CSS para eliminar diferencias entre navegadores desde el principio.
    Es muy buena idea empezar tu hoja de estilos general con una serie de declaraciones que reseteen propiedades como los margin, los padding y los border de los elementos más comunes. Echa un vistazo al reset.css que ofrece la librería de Yahoo o al artículo de Daniel que lo comenta más a fondo.
  • Usa el navegador más moderno y con mejor soporte de los estándares durante el desarrollo y el testeo, antes de probarlo en los navegadores “problemáticos”, y no al revés.
    Puede que no sigas esta norma y no tengas ningún problema, pero si testeas primero en IE6 tienes muchas probabilidades de terminar con un CSS lleno de hacks, o peor, de terminar metiendo “hacks” para los navegadores que sí cumplen los estándares. Tu objetivo tiene que ser conseguir el código y el CSS más limpio y cross-browser posible y, créeme, la mejor manera de conseguirlo es ésta.
  • Usa el menor número de archivos posible. Es mejor un sólo archivo de 30Kb que 3 archivos de 10Kb.Piensa que para cada uno de los archivos estáticos enlazados desde un documento HTML ( CSS, Javascript, imágenes, etc… ), éste debe realizar una conexión HTTP y lanzar una petición, con sus correspondientes cabeceras, cookies si las hubiere… todo suma y al final, tanto en tamaño como en tiempo de descarga, penalizarás al usuario.

Estructura, nomenclatura y otras yerbas

  • Sea cual sea, trata de ser consistente en el idioma usado cuando codifiques, tanto en los nombres como en los comentarios.
    Esto toma especial importancia en grandes equipos o con personas de diferentes procedencias.
  • Usa siempre minúsculas y guiones o guiones bajos para separar palabras.
    Algunos navegadores antiguos han demostrado tener problemas con mayúsculas-minúsculas, así que ve a los seguro.
  • Sé descriptivo en los nombres y huye de usar aquellos que se refieran a la apariencia de los elementos.
    Mejor usar un #main-product que un #m-prod, y nada de clases del tipo .centered, .red… O te encontrarás con que cuando toque cambiar el color o la alineación de contenidos, tendrás que ir modificando las clases de cada elemento… ¡¿Dónde están entonces las ventajas de gestionar el diseño desde una hoja de estilos?!
  • Trata de sacar partido de la cascada
    Evita crear demasiadas instancias siempre que no sean imprescindibles. Por ejemplo

    es mejor que

    Además, los nombres pueden ayudar a ubicar un elemento dentro de la jerarquía de capas. Por ejemplo, posiblemente sea mucho más práctico usar #header_logo que no #logo a secas.
  • Usa criterios consistentes para organizar las declaraciones de estilos dentro de tu CSS.
    Puedes decidir enunciar las declaraciones según su orden de aparición dentro del código, o agruparlas por el tipo de elemento al que se refieren ( listados, titulares, imágenes… ) Sea cual sea, que éste sea constante, o te vas a volver loco cuando la hoja de estilos adquiera un tamaño importante…
  • Evita usar comillas alrededor de las llamadas a imágenes.
    Todos los navegadores lo entenderán correctamente. Con comillas, en cambio, tendrás problemas en IE para Mac. Pudiendo tenerlos a todos contentos… ¿porqué no hacerlo?

Consideraciones adicionales

  • En el 90% de los casos, la solución más sencilla será la que menos problemas dé entre navegadores.  KISS.
    11635-12988.jpg
    Normalmente podrás usar varias combinaciones para conseguir el mismo
    efecto visual. Trata de encontrar la combinación más simple de
    elementos y propiedades. Mezcla paddings en el contenedor e hijos,
    margins e indentaciones negativos, y suma algunos posicionamientos absolutos en
    elementos anidados y tendrás los ingredientes perfectos para un
    bonito… caos.
  • Los hacks son la última solución.
    Invierte hoy 30 minutos más en encontrar la alternativa cross-browser y
    ahórrate horas la semana que viene tratando de modificar tu hoja de
    estilos.
  • Una mala y una buena noticia: ¿La mala? No te asustes, pero sí, algunos navegadores tienen bugs de render, sin explicación ni justificación alguna. ¿La buena? En sitios como PositionIsEverything han identificado muchas de ellas y pueden ahorrarte algunos quebraderos de cabeza. Un simple e inocuo position:relative; o un zoom:1; solucionan muchos de estos bugs.
  • En la línea de lo que comentábamos al principio respecto a la cantidad de archivos CSS a enlazar desde tu página, hay algunas técnicas que pueden ayudarte a reducir la cantidad de archivos de imagen que uses para construir tu página: CSS Sliding Doors & CSS Sprites. Hacer más con menos, keep in mind.
  • La guinda del pastel: no te olvides de preparar una hoja de estilos para impresión. Hace unos días dábamos algunos consejos desde Pixelovers al respecto en Hojas de estilo para impresión.

Conclusiones

Para empezar, concluyo que finalmente el artículo ha salido algo más largo de lo que había previsto, pero había algunos puntos que no quería que quedaran en el tintero, así que espero disculpes mis excesos. :)

Sin duda, elaborar una guia de estilo a modo de referencia es una práctica recomendable, cuando tengas que enfrentarte un proyecto de dimensiones considerables, y con más motivo si van a ser varios diseñadores / desarrolladores los que “metan mano” al código. Aún y codificando correctamente, cumpliendo estándares y produciendo código válido, semántico, etc… cada uno tiene sus costumbres y su manera de hacer, y mezclar formas de trabajar sin cierto orden en un mismo proyecto puede resultar algo problemático para mantener la web en un futuro. Definir una referencia de estilo, estructura y/o nomenclatura puede reducir, y mucho, esos problemas en equipos grandes.

¿Y tú, cómo trabajas? ¿Coinciden estas recomendaciones con las que incluirías tú en tu HOW-TO?

Enlaces y más

Posts Relacionados

Limpieza de floats en Internet Explorer 7 Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CS...
CSSEdit y las hojas de estilo bien organizadas  Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensa...
Hojas de estilo para impresión Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas. Aún a dia de hoy es habitual enco...
  • http://www.mis-algoritmos.com Victor

    Muchas
    gracias, me encantó tu artículo. Me ha servido bastante para :)

  • http://www.chicoblog.net Chicoblog

    Esta bastante bueno el articulo, gracias
    saludos!

  • http://www.webposible.com/blog/ Gonzalo

    Muy bueno :)

    Una pequeña puntualización, no es nada aconsejable usar los guiones bajos para identificadores y clases (en cambio no hay problemas con los guiones medios), no lo reconocen algunos navegadores (como el netscape 4).

    El caso es que leyendo la especificación (<a href="http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#q4">C22 2: 4.1.3 Caracteres y mayúsculas/minúsculas</a>) , lo explican, pero no lo dejan demasiado claro:

    <blockquote cite="http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#q4"&gt; En CSS2, los identificadores
    (incluyendo los nombres de los elementos, clases e ID de los selectores)
    pueden contener sólo caracteres [A-Za-z0-9] y los caracteres 161 en
    adelante en ISO 10646, más el guión (-); no pueden comenzar con un
    guión o un número. También pueden contener caracteres con escape y
    cualquier carácter de ISO 10646 en forma de código numérico (ver el
    siguiente ítem). Por ejemplo, el identificador "B&W?" puede escribirse como "B&W?" o "B26 W3F".</blockquote>

      

  • http://www.aritzoiaga.com/blog Aritz Oiaga

    Muy buen artículo! Junto con el 70 expert ideas for better css coding de los mejores que he visto estos últimos días sobre el tema 😉

  • http://www.obokaman.com obokaman

    Me alegro de que pueda seros útil. 😉

    @Gonzalo: gracias por el apunte, lo incluiré en el documento, junto con la referencia.

  • http://www.demixo.com Javier

    Excelentes consejos, me sirvieron muchísimo para corregir mi código.

     Saludos

  • Trunquelo

    El CSS es la caña para modificar el aspecto de veintemil paginas a la vez, pero para maketar uff valla mierda ni ostias , con la incompatibilidad entre navegadores, me da igual si al final se consigue algo para todos los navegadores, ¿y cuanto tiempo as perdio para hacerlo? joder ke estandaricen to los putos navegadores con el bill gates de los cojone.

  • http://www.escoin.net/blog/2007/06/17/de-csss-varios/ De CSS’s varios

    […]seños web son StupidTables y pixelovers. ¡Que aproveche! Supongo que en una semana os podré dar más noticias de alguno de estos proyectos[…]

  • http://www.webintenta.com/consejos-para-trabajar-con-css.html Intenta » Blog Archive » Consejos para trabajar con CSS

    […]y muy útil, que nos enseña como establecer unas buenas prácticas a la hora de codificar con CSS. Vía anieto2k « Añadir CSS dinámicamente en tu web[…]

  • http://www.wp.chavalina.net/2007/06/26/post-809/ Chavalina. Diario » Blog Archive » Consejos y buenas prácticas para escribir h

    […]icas para escribir hojas de estilo”>Consejos y buenas prácticas para escribir hojas de estilo Consejos y buenas prácticas para escribir CSS. Muy interesante, recomiendo a todos los CSSeros leerlo. Lo he visto en Intenta, uno de mis favoritos de siempre… This entry was posted on Tuesday, June 26th, 2007 at 11:36 and is filed under[…]

  • http://www.trazavirtual.com/ traza

    Gracias por las consideraciones, hay que tomarlas en cuenta!

  • http://vidug.wordpress.com/2009/06/19/css-standard-proposal/ CSS Standard Proposal> « Vidug's Blog
  • http://www.blogosexo.com blog sexo

    Gracias

  • http://www.hernanmammana.com.ar Hernán

    Muy buenas tus recomendaciones! Voy a recomendar a mis alumnos este árticulo a modo de resumen!

    Gracias!

  • http://www.altolujo.com Lujo

    Muy interesante, habra que ponerlo en practica, gracias.

  • raul

    Chekense esta: 10 Consejos rápidos para mejorar tu CSS (esta en español)

    http://pharalax.com/blog/2011/02/09/mejores-practicas-css/