Consejos para trabajar con tus hojas de estilo CSS3

Una vez que hemos definido la estructura de nuestra página web y hemos desarrollado el DOM de una forma precisa, es importante definir los estilos de la misma, también es el área más creativa y en el que puedes personalizar con mayor grado de precisión hasta el último rincón de tu sitio web. Las hojas de estilo en cascada son la solución más adecuada, pero para todos aquellos que estén haciendo su primera incursión en el mundo del desarrollo web, hay algunos consejos que deben ser tenidos en cuenta para lograr los mejores resultados.

Para obtener un resultado profesional propio de un front end consagrado, es necesario tener en cuenta ciertos aspectos como el orden, la legibilidad y la subsanación de los errores más comunes dentro de este tipo de prácticas. A continuación comparto cinco consejos muy básicos pero a la vez muy importantes para el tratamiento y la configuración óptima de nuestras hojas de estilo CSS.

Asegúrate de establecer un orden y una estructura efectiva en tus hojas de estilo CSS3

Yo siempre suelo dividir mis hojas de estilo en un orden jerárquico. En primer lugar suelo aplicar selectores generales para después pasar a añadir las declaraciones de los selectores html y en última instancia pasar a trabajar dentro de los ids de los contenedores y elementos menores. Básicamente suelo seguir la lógica del DOM y partir desde los padres para acabar en los hijos. Sin embargo también podemos seguir otra fórmula u orden, por ejemplo podemos agrupar nuestros selectores y declaraciones teniendo en cuenta cuál sea la función de ellos. Todo dependerá de cuáles sean nuestras preferencias y cómo nos sintamos más cómodos trabajando.

Escoge nombres claros y concisos para cada uno de tus selectores

Hay algo muy importante que debes tener en cuenta, y es que CSS3 diferencia en el uso de mayúsculas y minúsculas, por lo que escribir una palabra con mayúscula puede significar algo distinto y puede provocar errores. Lo más sencillo es emplear siempre minúsculas para evitar este tipo de problemas. Procura también escoger nombres para tus clases y tus ID’S que sean claramente reconocibles y que no nos infieran a dudas o errores.

No te olvides de añadir comentarios aclaratorios

Seguramente necesites compartir tus archivos con otras personas, quizá tu cliente o compañeros de tu equipo de trabajo como maquetadores, otros diseñadores o desarrolladores. Por ello es muy importante prestar atención a la estructura y procurar un acabado limpio y ordenado. Los comentarios aclaratorios servirán para que cualquiera que acceda a nuestra hoja de estilos sepa situarse rápidamente con un simple golpe de vista. Cualquier tipo de observación que deba ser tenida en cuenta deberá figurar como un contenido. Recuerda que puedes incluir contenidos tanto en tu archivo Html como en tu archivo CSS y que en ambos casos se trata de comentarios que lógicamente no se reflejarán en el resultado final y sólo serán visibles cuando se acceda al código fuente de la misma por lo que pueden ser muy útiles.

Aplica un reset siempre en tus hojas de estilo

Cada navegador tiene su hoja de estilos por defecto por lo que para evitar cualquier error o cambio dependiendo del navegador en que se visualice nuestra página, es muy útil y recomendable que resetees tus hojas de estilos. Hay varias alternativas la hoja de estilo reset de Eric Meyer puede ser una muy buen opción.

Escoge la herramienta más eficaz

Existen muchas herramientas que puedes utilizar para obtener la máxima eficacia cuando trabajas en el diseño de tu página web. Desde la creación de Wireframes para desarrollar la estructura de tu site, como todo tipo de aplicaciones incluyendo Adobe Photoshop, Illustrator o Fireworks. También cuentas con muchos editores profesionales siendo uno de los más recomendables (al menos el que yo utilizo) Sublime Text o en su defecto Adobe Dreamweaver ya que proporcionan interfaces muy sencillas y con altos grados de personalidad así como la posibilidad de trabajar con nuestros códigos a través de un sistema de atajos y con un sistema de autocompletar que nos ayudará a ahorrar más del 70% de tiempo que emplearíamos con un editor de texto plano tradicional.