Arquitecturas CSS (o cómo no tener hojas de estilos infernales)

Unas 150 charlas, numerosos profesionales, desarrolladores y técnicos, así como estudiantes de la comunidad informática, entre otros, fueron los protagonistas de la última edición de uno de los eventos más importantes sobre desarrollo IT que se celebran en España, el Codemotion, que tuvo lugar durante los días 24 y 25 de Noviembre en Madrid.

En mi caso, como desarrollador UI (o maquetador web para los amigos), hubo varias conferencias atractivas, pero la que pareció más relevante fue la que puso el foco en uno de los problemas más acuciantes en los desarrollos de sitios y aplicaciones web de gran envergadura: la incapacidad para mantener las hojas de estilo bajo control.

Con demasiada frecuencia, las CSS para sitios web son amalgamas de código redundante, innecesario, con cadenas de selectores excesivamente específicos e innecesariamente largas y con uso inapropiado o innecesario de ¡important e ids.

En la charla “Buenas Prácticas en arquitecturas CSS” que ofrecieron @ignaciodenuevo y @carmenansio en el CodeMotion 2017, pudimos ver una lista de los errores más recurrentes en los desarrollos de hojas de estilos:

• Uso de demasiadas propiedades font-size.
• La declaración ¡important sólo debe ser usada de manera proactiva, nunca de forma reactiva.
• Los estilos deben ser independientes de la localización.
• Estilar elementos HTML.
• Anidar más de tres niveles.
• Deshacer estilos.
  Usar id como selector.
• Números mágicos (pe: 27px).
• Usar Sass @extend.

Y además, e igual de importante, tenemos los problemas derivados de una mala implementación e incluso desconocimiento derivados de cascada, herencia y especificidad en las CSS.

Como es obvio, los enfoques para lidiar con las hojas de estilos, sobre todo para grandes sitios web, han ido incrementándose con el tiempo y cada vez son más los autores que exponen nuevas metodologías que pasan a ser parte de las arquitecturas CSS de los proyectos, encontrándose entre las más populares OOCSS, SMACSS, BEM e ITCSS.

Los objetivos de una buen arquitectura de CSS son básicamente que sea:

• Predecible: sus reglas hacen lo que se espera. Añadir o actualizar una regla no tiene repercusiones inesperadas.
• Reutilizable: las reglas son abstractas y están desacopladas. Así se podrán crear nuevos componentes de forma más rápida y sencilla.
• Mantenible: es la capacidad de realizar cambios en las CSS sin necesidad de tener que refactorizar el código existente.
• Escalable: significa que a medida que las CSS aumentan de tamaño, siguen siendo fáciles de mantener. También significa que la arquitectura CSS no requiere de una alta curva de aprendizaje.

A estos principios hay que añadir es necesario añadir buenas prácticas como:

• Desarrolla tus CSS de forma modular.
• Organiza tu CSS de una forma lógica.
• Los layouts se deben manejar de forma independiente de los componentes.
• Los estilos de los componentes deberían definir solo su aspecto visual.
• Evitar nombres de clases basadas en el contexto.
• Nombra tus clases usando “namespaces”.
• Nombra tus clases con una estructura lógica.
• Mantener la especificidad de selectores al mínimo.

Estos enfoques y principios son fundamentales sobre todo en desarrollos que implican a un gran número de desarrolladores trabajando sobre un mismo sitio web. Una buena arquitectura de CSS tendrá como resultado una mayor eficiencia en el desarrollo y por ende una mejor experiencia como desarrollador.

Es importante tener en cuenta que las metodologías comentadas al inicio de este artículo tampoco resultan la mejor solución por sí mismas, por lo que en función de proyecto, el número de desarrolladores involucrados, si el sitio web es grande o pequeño, etc. habrá que analizar que solución o metodologías adoptar con el objetivo de facilitar el desarrollo y poder mantenerlo a largo plazo eficientemente.

Y así, con la conclusión, entre otras, de que queda mucho por evolucionar, pero destacando el esfuerzo que se está haciendo para abordar nuevos retos y procesos, finalizó una nueva edición de este importante evento, en el que pudimos disfrutar de charlas y talleres de gran interés para los que allí nos dimos cita.