Mejores prácticas para estructurar mejor nuestro CSS

Tips para estructurar mejor nuestro CSS Proyectos pequeños por lo general traen problemas pequeñas, proyectos grandes problemas terribles. Al implementar un sitio web podemos calcular la dificultad que va a tener un sitio en proporción de las necesidades del cliente. Si las necesidades nos permiten tener mucha flexibilidad tendremos código y estructura muy elástica, o muy adaptable para nosotros hacer un cambio. Si las necesidades son muy específicas el CSS, HTML y JS será bastante más difícil de dominar.

Si hablamos de CSS, si no podemos estructurar adecuadamente nuestros archivos tendremos serios problemas cuando el proyecto empiece a crecer y nosotros no logremos ver ese alcance de eficiencia en nuestro código. Es por eso que siempre es preferible tener un par de líneas más para darle formato al CSS y así la próxima vez que tengamos que modificar un archivo, o alguien tenga que hacerlo no sufriremos por tener código ilegible y mal acomodado.

A continuación les presento unos tips para estructurar mejor nuestro CSS, para que no tengamos ningún problema al momento de hacer cambios y tengamos una idea más clara de las partes del sitio y la estructuración que es muy importante pero muchas veces es el punto al que menos prestamos atención.

Uso de comentarios para explicar, no separar

Los comentarios se hicieron para explicar el código que hay debajo de ellos, no se hicieron para crear una línea divisora. Una buena práctica siempre será presentar cómo está organizado nuestro CSS. A lo mejor tenemos todo en un solo archivo, pero debemos explicar las secciones o al menos los estilos que estamos abarcando. De esta forma si necesitas modificar la sección X irás a ver la línea desde donde empieza, o si esas clases las incluiste en el archivo, etc.

Espacios consistentes

Si trabajamos a nivel productivo si es importante comprimir lo más posible nuestro CSS para ahorrarnos algunos Kb de espacio, pero en modo desarrollo si debemos tener un código bastante bien separado por espacios, identación y saltos de línea congruentes, ya que no servirá tener comentarios si tenemos que andar buscando la llave que cierra la regla para poder agregar más estilo.

Convenciones de nombre apropiados

Uno de los mayores problemas es la convención de nombres que usamos. CSS nos da la flexibilidad de llamar a nuestras clases como queramos, pero también es importante tener un patrón de cómo las nombramos y usamos. El primer punto es definir si usamos estilos-de-esta-manera, o estilosDeEstaOtraForma, ya que garantiza que sepamos buscar adecuadamente, sino de otra forma buscaríamos los estilos de las dos formas, lo que implica repetir un proceso de búsqueda.

El siguiente paso es acomodar las clases. Ya tenemos la convención, ahora es acomodar todo para tener armonía. A lo mejor nos importa tener las clases para etiquetas completamente aisladas de nuestras clases, entonces esas las colocamos independiente. A lo mejor ponemos primero las clases y luego las clases ID, o al revés, o usamos mejor un diseño de herencia para combinar ambas e ir de acuerdo con la estructura del HTML. Esas son opciones que se tienen que tener cuando ya tenemos nuestras clases, porque determinar el qué tan rápido podemos llegar a encontrar la clase que estamos buscando.

Versión expandida o contraída

¿Te acomodas contrayendo las clases? o ¿eres más visual con una versión expandida? También debemos tener en cuenta estas dos formas de escribir el código CSS. Si optamos por contraer todo y tener las propiedades en una sola línea, es correcto. Si decidimos mejor dar saltos de línea entre cada propiedad también está perfecto, pero ya no está bien combinar ambos porque nunca nos vamos a acostumbrar a un estilo y por lo tanto tendremos que o bajar mucho el scroll o tendremos que separar propiedades lo cuál es pérdida de tiempo.

Uno o varios archivos

Es el dilema con CSS. Cargar un archivo significa que el navegador solo hace una petición HTTP al servidor, pero el archivo puede ser un poco más pesado porque tiene los estilos de todas las páginas, no solo de la página que está cargando actualmente. Tenemos el problema de tener muchos archivos individuales y hay varias peticiones HTTP dependiendo de la página que cargue, lo cual garantiza más ancho de banda consumido pero menor tamaño de los archivos. ¿Cuál es el mejor?

No hay mejor, la mejor solución siempre será usar ambos en la medida de las necesidades del proyecto que estemos haciendo. Si el sitio web no es muy grande y es fácil buscar las clases un solo archivo es la solución. Si al contrario tenemos un sitio muy grande, que incluye estilos de plugins o de frameworks ajenos a los que vamos creando, es muy recomendable dividir el CSS en pedazos más cortos para poder agilizar el trabajo y no tener que lidiar con miles de líneas de código.

Conclusiones

Estos tips no son nuevos pero la gente nueva se pierde y al querer experimentar terminar no siguiendo ningún patrón para poder diseñar su sitio adecuadamente. Son tips básicos que cuando los pones en práctica te ahorras bastante tiempo que puedes dedicar para arreglar otro tipo de problemas más relevantes.