Hubo un tiempo en el que estaba muy extendida la idea de que CSS estaba “roto”, todos conocemos la persiana de Peter Griffin y tenemos el mejor merchandising sobre las bondades de CSS.

Siempre he defendido mi trabajo como maquetadora (mis compañeras hablaron sobre lo (des)conocidos que somos) basándome en estas bromas sobre CSS o en el debate sin fin sobre si CSS es o no un lenguaje de programación.

Tranquilos que no voy a entrar en esas divagaciones porque todes sabemos que CSS es Turing complete. Hoy os voy a hablar sobre la importancia de la arquitectura CSS en nuestros proyectos.

¿Por qué es importante una buena arquitectura CSS?

Al igual que en otros lenguajes de programación, parte de la calidad del código reside en su escalabilidad y facilidad de mantenimiento, CSS también cumple este aspecto. Cuando comenzamos un proyecto nuevo generalmente contamos con un arquitecto que establece cómo hemos de organizarnos para cumplir con las buenas prácticas en cuanto a arquitectura front, pero generalmente CSS ni está ni se le espera en esa organización. Con suerte nos encontramos una carpeta “styles” en assets con una planta rodante dentro. Además, muchas veces nos encontramos con que el proyecto va a contar CSS-in-JS o algún framework CSS como Tailwind y parece que ya todo está decidido y no debemos perder tiempo en pensar en nuestra estructura.

Y, por si esto fuera poco, no solemos hablar con diseño ni UX sobre cómo está planteado el proyecto. No importa que no tengamos un sistema de diseño, antes de que este concepto fuera mainstream teníamos componentes, antes de los componentes UI-kits y así hasta el inicio de los tiempos. Sentarte un rato a conversar y conocer el proyecto que vamos a desarrollar junto con las personas que lo han ideado de manera conceptual es uno de los pilares de una buena arquitectura CSS. ¿Crees que no tienes nada que hablar con tus compañeros de equipo? Aquí te cuento por qué es importante trabajar mano a mano con ellos.

¿Qué buscamos con una buena arquitectura CSS?

Cuando hablamos de una buena arquitectura CSS no nos referimos a las “buenas prácticas” que se han consensuado durante todos los años de vida del lenguaje ni a la aplicación de metodologías de naming o similares porque éstas no son más que herramientas para conseguir un fin pero no implica que se usen correctamente.

Cuando hablamos de una buena arquitectura CSS nos basamos en cuatro características:

¿Por dónde empezar?

Se suelen definir 3 principios básicos para comenzar una arquitectura sólida que cumpla con los puntos mencionados en el apartado anterior.

Para estos tres principios se han definido distintas metodologías y estrategias. A nivel más básico, metodologías de naming como puede ser BEM (bloque, elemento, modificador); metodologías de diseño-desarrollo como Atomic Design (átomos, moléculas, organismos, templates y páginas); y metodologías de la propia arquitectura CSS como SMACSS, OOCSS o ITCSS. Podéis conocer un poco más de estas metodologías aquí.

Estas metodologías no están escritas en piedra y no debemos seguirlas sin más. Hay que hacer un ejercicio de abstracción global teniendo en cuenta los diseños del proyecto así como las tecnologías que vamos a utilizar para desarrollarlo y encontrar nuestra propia fórmula si ninguna de las anteriores encaja en nuestras necesidades. De coger aquello que necesitemos, con un nivel de consistencia adecuado, de cada una de estas metodologías han surgido híbridos como BEMITCSS o la fusión de Atomic Design con BEM, que también es muy utilizada.

Principios de ingeniería del software en CSS

Como generalmente no se considera CSS un lenguaje de programación, el aplicar principios de ingeniería de software a su desarrollo puede sonar extraño. Pero, dado que CSS es un lenguaje declarativo y está lo suficientemente maduro, no hay motivo para que no lo apliquemos.

De hecho, si eres desarrollador de CSS y esto te suena raro, vas a darte cuenta de que llevas aplicándolos bastante tiempo:

Conclusión

Cómo habéis podido comprobar la aplicación de principios de desarrollo de software utilizados en otros lenguajes de programación son aplicables al desarrollo de CSS. Tal y como comenzaba este artículo, el CSS es una parte igual de importante que el JS o la arquitectura de datos de la API que se usa en una aplicación y debemos tratarlo con el mismo cariño y atención que ya le ponemos a estas otras partes mencionadas.

Cuéntanos qué te parece.

Enviar.

Los comentarios serán moderados. Serán visibles si aportan un argumento constructivo. Si no estás de acuerdo con algún punto, por favor, muestra tus opiniones de manera educada.

Suscríbete

Estamos comprometidos.

Tecnología, personas e impacto positivo.