Si trabajas con CSS en proyectos grandes, sabes que su sintaxis sencilla puede convertirse en un arma de doble filo. Aquí aprenderás cómo aplicar arquitecturas CSS, principios de programación orientada a objetos y metodologías de nombramiento para que tu código sea limpio, escalable y mantenible.

¿Qué problemas resuelve una arquitectura CSS?

CSS parece fácil al inicio, pero cuando los proyectos crecen, los estilos se vuelven difíciles de mantener. Una arquitectura bien pensada ataca tres frentes: que el código sea limpio, escalable y mantenible.

En proyectos pequeños o personales, casi nunca aparece esta complejidad. El problema surge cuando entras a bases de código grandes, con varias personas tocando los mismos estilos y features que se siguen sumando.

¿Qué es una arquitectura CSS? Es la forma en que organizas carpetas, archivos y nombres de clases en tu proyecto para que el código se mantenga ordenado, fácil de escalar y de modificar a largo plazo.

¿Cómo se aplican los principios de POO al CSS?

Muchas buenas prácticas vienen prestadas de la programación orientada a objetos. Si ya trabajaste con POO te van a sonar familiares, y si no, los revisaremos aterrizados al mundo de los estilos.

Estos son los tres principios que guían el curso:

• SOLID: un conjunto de principios que ayudan a escribir componentes desacoplados y reutilizables.
• DRY (Don't Repeat Yourself): evita repetir reglas y selectores que hacen lo mismo en distintos lugares.
• Immutability: mantener ciertos valores y estilos base sin alterarlos para garantizar consistencia.

La idea no es estudiarlos en abstracto, sino traducirlos a decisiones concretas dentro de tu hoja de estilos.

¿Arquitectura de archivos o nombramiento de clases?

La respuesta corta: ambas. Cuando hablamos de arquitectura no solo nos referimos a cómo distribuyes carpetas, también a cómo nombras tus clases.

¿Qué incluye una arquitectura CSS completa? Incluye la organización de carpetas y archivos del proyecto y, además, las metodologías para nombrar clases. Las dos partes trabajan juntas, no por separado.

A lo largo del curso vas a ver metodologías que definen convenciones de nombres y arquitecturas que definen estructura de archivos. En la práctica siempre van atadas: no puedes organizar bien tus archivos si tus clases están desordenadas, y viceversa.

¿Qué es un refactor en CSS?

Un refactor es una modificación o cambio de código existente sin alterar su funcionalidad. En el contexto de CSS, significa reescribir estilos para que sigan una metodología, una arquitectura o un patrón concreto.

El beneficio es claro: comparas el antes y el después, y ves en código real qué tan distinto se siente trabajar con buenas prácticas frente a no tenerlas.

¿Qué proyectos vas a refactorizar en el curso?

La parte práctica se construye sobre proyectos reales de estudiantes, hechos con stacks distintos para que veas cómo aplicar estas ideas más allá de un solo entorno.

Los proyectos están construidos con:

• HTML, CSS y JavaScript puro.
• React.
• Vue.
• Angular.

Sobre cada uno aplicaremos una metodología, arquitectura o patrón distinto. Tomamos el código tal como llegó, lo revisamos y lo refactorizamos para mostrar cómo se transforma cuando le sumas principios como SOLID, DRY o Immutability.

Tu profe en este recorrido es Stefany Aguilar, senior front-end developer en Lahouse, una startup colombiana, y profesora en Platzi. La encuentras en redes como @devcode.

¿Con cuál de los tres principios (SOLID, DRY o Immutability) crees que tu código CSS actual tiene más deuda? Cuéntalo en los comentarios.