La importancia del CSS en la actualidad ha quedado manifestada y demostrada, es algo claro que todo desarrollador Web en algún momento de su carrera profesional tendrá contacto y lidiará con este lenguaje. 

Por desgracia muchos de nosotros, sobre todo al principio de nuestros desarrollos, valoramos al CSS como algo totalmente secundario o incluso lo colocamos en un plano aún más retirado, severas ocasiones tomamos por sentado todo lo referente a él y nos olvidamos de tratarlo como una parte fundamental de nuestros sitios, una herramienta poderosa que sabiendo utilizarla puede ahorrarnos varios dolores de cabeza en lo referente al diseño de nuestra página.

Para explotar el potencial de este lenguaje regularmente se aconsejan una serie de puntos para ser tomados en cuenta al momento de empezar a desarrollar nuestras hojas de estilo y entrelazarlas con nuestro código.

Las llamadas “buenas prácticas” para mantener un buen y útil CSS en tu sitio parten desde lo más sencillo como es mantener una sana organización y limpieza, a lo más elaborado como es practicar la orientación a objetos en el lenguaje de estilo.

Siempre en primer lugar, incluso antes de adentrarnos con lo que es en sí el lenguaje CSS debemos hacer una limpieza previa y evitar el uso de etiquetas de “estilo” dentro de nuestro código HTML, olvidarnos por completo de <b>, <i>, <strong>, <em>, <center>, <font>, entre otras, que sólo van a venir a afectar nuestro nuevo código. Así también, hay que evitar el uso de estilos dentro de otras etiquetas como los atributos bgcolor, border, width, height, etc., recuerden que ahora todos nuestros estilos y diseños los manejará CSS no hay necesidad de definir en cada etiqueta el color, el borde o algún otro atributo de diseño, todo eso puede ser definido en la hoja de estilo.

Si nuestro proyecto ya fue desarrollado, terminado y nuestra página ya se encuentra en servicio no estamos exentos de realizar lo anterior, tenemos que meternos de nueva cuenta en nuestro código para eliminar esa serie de etiquetas incómodas y erradicarlas de nuestro HTML.

Tenemos que emigrar todo nuestro código a la nueva política de XHTML, recordar siempre escribir con minúsculas el nombre de las etiquetas, cerrar cada una que manejemos (<div></div>), incluso aquellas que no tienen contenido (<img src=’luna.png’ />), verificar que los elementos estén correctamente anidados (<div><a href=”link.html”>Link</a></div>), y usar el correcto DOCTYPE para nuestro código, de hecho sin el uso correcto de un DOCTYPE toda la apariencia de su sitio puede variar enormemente.

La práctica de una buen XHTML no sólo ayudará para el diseño, éste fue trazado para tener un lenguaje que no sólo desplegará información sino que la describiera, su buen uso ayudará para futuras prácticas con otros lenguajes como XML y emigraciones de nuestros sitios para su uso en celulares y otros dispositivos móviles.

Nuestro CSS debe ser legible, cuando empezamos a escribir nuestra hoja de estilo puede que sea tanto lo que queremos hacer y editar que nos olvidamos de mantener un orden y terminamos por hacer un desastre que no sólo nos puede perjudicar a nosotros mismos, si no a compañeros de trabajo o personas que seguirán con el proyecto que hoy en día tu llevas a cabo. Hacer un CSS legible facilita su edición en un futuro, es más fácil encontrar una etiqueta y sus atributos, para lo cual también puede ayudar la adición de comentarios, si otra persona ajena a nuestro código necesita meterse o echar mano de él será mucho más sencillo para ella si nuestro CSS mantiene una buena estructura y esta correctamente comentado.

Recuerden que al momento de escribir una hoja de estilo no hay necesidad de seguir un estándar de varias líneas, simplemente mantengan la limpieza, si desean utilizar el modelo de estructura “todo en una línea” (body{ background:#000000; color:#FFF000; }), esta bien es aceptable simplemente recuerden este consejo.

No hay que caer en la repetición, si tenemos conciencia de que por ejemplo todos nuestros encabezados H3 van a utilizar una fuente Verdana de tamaño 30 pixeles, debemos definir esto en la etiqueta H3 genérica de nuestra hoja de estilo, no tener que estar repitiendo el mismo código una y otra vez para aquellos H3 que ya estén asociados a una clase o id.

Siempre hay que tratar de escribir con menos lo más posible, el utilizar abreviaciones nos puede ayudar a escribir en una sola línea de código lo que se pudo representar en 4 o 5 líneas, como por ejemplo el borde es un atributo muy usado en los div, parrafos o en tablas, si quisiéramos expresar que cada línea borde tenga un estilo diferente CSS nos da la oportunidad de hacerlo al utilizar los atributos border-top, border-bottom, border-right y border-left para enfocarnos en cada uno, así mismo podemos utilizar border-style y border-width para definir el tipo de borde y su ancho, pero si no tenemos necesidad de especificar cada línea y queremos que nuestro borde sea uniforme podemos representar todo eso en una sola línea como esta “p{border:3px solid #ff0000;}” en donde especificamos que ese párrafo tendrá un borde de 3 pixeles de ancho, será de estilo sólido y usara el color rojo como fondo.

Un consejo importante al empezar a manejar hojas de estilo de tamaño industrial, es el de manejar la “identificación” de los estilos que heredan algo de otros, es decir si un id hereda ciertos atributos de otro id debemos escribir el código del id padre (aunque este vacío) y al momento de escribir el estilo del “hijo” identificar de la siguiente manera #padre #hijo {atributo: 12px;}.

La identificación y relación de etiquetas también te servirá para ir creando tu propio lenguaje dentro de CSS, el ser constante manejando los mismos nombre para id y clases harán que recuerdes más fácil cosas que ya haz hecho en otras hojas de estilo, digamos que tienes una clase de DIV que maneja una transparencia, puedes llamar a esa clase “.transparencia” y reutilizar el mismo código en otra hoja de estilo para el nuevo div el cual tendrá básicamente las mismas propiedades, esto puede ayudar a ahorrar tiempo en el desarrollo.

Comprime lo más posible el archivo final de la hoja de estilo, esto se puede hacer tanto de manera manual como a través de herramientas, básicamente consisten en eliminar los espacios y saltos de línea que no son necesarios. Se pueden utilizar páginas como CSS Optimizer o CSS Compressor, e incluso se puede configurar Apache para hacer esta labor, las ventajas que trae esto es que te ahorraras uso de ancho de banda y mejorará tu tráfico.

Por último, recuerda que no todos los navegadores están totalmente optimizados para identificar y descifrar todas las propiedades CSS, existen aún en muchas computadoras personales en el mundo, navegadores como Internet Explorer 5 o Internet Explorer 6 que pueden que te den un gran dolor de cabeza al no desplegar la información como se supone que debería de ser, trata de siempre diseñar de la manera más genérica posible, verifica si existe una clase de bug para la propiedad que utilizarás, pero sobre todo diseña para un navegador que si cumpla con lo que CSS necesita, puedes desarrollar tu hoja de estilo basándote en la presentación de tu página en navegadores como Opera y Firefox, y una vez que la tengas lista hacer los Hacks necesarios para que quede presentable en IE, pero nunca hagas lo contrario y diseñes primero para navegadores obsoletos y después para los que si cumplen con los estándares esto no es para nada una buena práctica.

Nota del editor.

Ya tienes pagina web? buscas hosting de calidad?, visita Okhosting.com la empresa numero uno de  Web hosting dominios y páginas web en Mexico, conoce nuestros planes de Hosting ASP y PHP , y si aun no tienes nombre de dominio  ( dirección única en internet www.tuempresa.com) regístralo al mejor precio, venta de dominios www.tuempresa.com, y    dominios .MX,  si aun no cuentas con un sitio web ahora es facil,  Crea tu pagina web con el  programa Sitebuilder SW, con el cual tendrás una página profesional en minutos sin conocimientos de diseño ni programacion. Visita okhosting.com y sal a la luz del internet

Autor: Daniel Navarro

Ok Hosting, Investigación y Tecnologia