Buenas prácticas de CSS pueden ayudarte a sacar lo mejor de tus estilos. CSS puede parecer un lenguaje bastante sencillo, en el que es difícil cometer errores. 

Sólo tienes que añadir tus reglas para dar estilo a tu sitio web y ya está, ¿verdad? En sitios pequeños que sólo requieren un par de archivos CSS, puede que sea así.

Pero en aplicaciones grandes, los estilos pueden descontrolarse rápidamente. La realidad es que, al igual que cualquier otro lenguaje, CSS tiene sus propios matices que pueden hacer o deshacer tu diseño.

Aquí tienes consejos para CSS: las mejores prácticas de CSS para principiantes.

Haz que tu estructura CSS sea legible

La legibilidad de tu CSS es increíblemente importante, aunque la mayoría de la gente pasa por alto por qué es importante.

Asegúrate de formatear tu CSS de una manera organizada y limpia.

Una buena legibilidad de tu CSS hace que sea mucho más fácil de mantener en el futuro, ya que podrás encontrar los elementos más rápidamente.

Además, nunca sabrás quién puede necesitar consultar tu código más adelante. Así que recuerda apostar siempre por una estructura CSS pulida.

Mantén una estructura CSS coherente

Independientemente de cómo decidas organizar tu CSS, asegúrate de que tus elecciones sean coherentes en toda la hoja de estilos, así como en todo tu sitio web.

Desde los nombres de las clases hasta las sangrías de las líneas y las estructuras de los comentarios, mantenerlo todo coherente te ayudará a hacer un seguimiento de tu trabajo más fácilmente.

Además, te asegura que hacer cambios, más adelante, no supondrá un dolor de cabeza.

Empezar con un framework

Algunos puristas del diseño se burlan de la idea de utilizar un framework CSS con cada diseño, pero yo creo que si alguien se ha tomado el tiempo de mantener una herramienta que acelera la producción

¿Por qué reinventar la rueda? Sé que los frameworks no deberían usarse en todos los casos, pero la mayoría de las veces pueden ayudar.

Muchos diseñadores tienen su propio framework que han creado con el tiempo, y eso también es una gran idea.

Ayuda a mantener la coherencia dentro de los proyectos.

Al mismo tiempo, también me gustaría decir que deberías usar frameworks sólo si ya sabes bastante de CSS.

Es casi seguro que llegará un momento en que tendrás que crear un determinado aspecto de algún diseño por ti mismo, y tu profundo conocimiento de CSS te ayudará a hacer las cosas.

Empieza con un Reinicio

Otra cosa que debes poner en práctica rápidamente es comenzar tu trabajo de desarrollo con un restablecimiento de CSS.

Utilizar algo como normalize.css puede hacer que todos los navegadores representen los elementos de la página de forma coherente y siguiendo los estándares más actualizados para minimizar las incoherencias de los navegadores.

Este restablecimiento es en realidad un pequeño archivo CSS que subes a tu sitio web para añadir un mayor nivel de coherencia entre navegadores al estilo de los elementos HTML. 

Y sirve como una forma actualizada de realizar un restablecimiento CSS.

Organizar la hoja de estilos con una estructura CSS descendente

Esta es una de las prácticas CSS más básicas. Distribuye tu hoja de estilos de forma que te permita encontrar rápidamente partes de tu código.

Recomiendo un formato CSS de arriba abajo que aborde los estilos tal y como aparecen en el código fuente.

He aquí un código CSS básico y una hoja de estilos de ejemplo con una buena estructura CSS.

1. Clases genéricas (body, a, p, h1, etc.)
2. #header
3. #nav-menu
4. #main-content

Seguir prácticas CSS como ésta, te ayudará a mantener un seguimiento de las diferentes secciones del sitio web en la hoja de estilos con comentarios.

/****** Contenido principal *********/
Los estilos van aquí.

/****** Footer*********/
Los estilos van aquí.

Utilizar varias clases

A veces es beneficioso añadir múltiples clases a un elemento. Digamos que tienes un div "box" que quieres que flote a la derecha, y ya has creado una clase CSS .right en tu CSS que hace flotar todo a la derecha.

Puedes simplemente crear una clase CSS en la declaración, así:

<div class="box right"></div>

Puedes crear todas las clases CSS que quieras (separadas por espacios) a cualquier declaración.

Esta es una de esas situaciones en las que hay que tener en cuenta los casos particulares. Aunque es útil crear nombres de clases CSS que den alguna pista sobre cómo afectan al diseño, también debes evitar usar nombres de clases que te obliguen a cambiar constantemente entre HTML y CSS.

Ten mucho cuidado al usar ids y nombres de clase como "left" y "right" ¿Por qué? Imaginemos que, más adelante, decides que prefieres ver la caja flotando hacia la izquierda.

En este caso, tendrías que volver a tu HTML y cambiar el nombre de la clase, todo para ajustar la presentación de la página. Esto no es semántico.

Recuerda: HTML es para el marcado y el contenido. CSS es para la presentación.

Si tienes que volver a tu HTML para cambiar la presentación (o el estilo) de la página, lo estás haciendo mal.

Comenta tú código

Otra de las mejores prácticas es comentar tu código. Al igual que en cualquier otro lenguaje, es una gran idea comentar tu código en secciones.

Para añadir un comentario, simplemente añade /* detrás del comentario, y */ para cerrarlo.

Añadir márgenes y relleno a todos los elementos

Los navegadores modernos son bastante uniformes a la hora de mostrar los elementos, pero los navegadores antiguos tienden a mostrar los elementos de forma diferente.

Por ejemplo, Internet Explorer renderiza ciertos elementos de forma diferente a Firefox o Chrome, y las diferentes versiones de Internet Explorer renderizan de forma diferente entre sí.

Una de las principales diferencias entre las versiones de navegadores antiguos es la forma en que se representan el relleno y los márgenes.

Si aún no estás utilizando un restablecimiento, es posible que desees definir el margen y el relleno para todos los elementos de la página, para estar seguro.

Aprende CSS

Academia Web cuenta con un curso sobre CSS. En el cual aprenderás todos los fundamentos necesarios para empezar a darle estilo a tus proyectos. ¿Qué esperas? ¡Entra ya!