La metodología OOCSS te permite escribir CSS más reutilizable y mantenible al separar la estructura del diseño y el contenedor del contenido. Es una técnica clave para quienes ya manejan propiedades, valores y especificidad y buscan ordenar sus hojas de estilo en proyectos reales.

Antes de aplicarla, conviene entender que hablar de arquitectura CSS implica un nivel intermedio. Ya debes reconocer qué propiedades pertenecen a la estructura de un elemento y cuáles definen su apariencia. Sobre esa base se construyen los dos principios que verás a continuación.

¿Qué propiedades pertenecen a estructura y cuáles a diseño?

Para aplicar Object Oriented CSS necesitas clasificar tus propiedades en dos grupos claros.

• Estructura: width, height, margin y padding. Definen el tamaño y el espaciado.
• Apariencia o diseño: colores, fuentes y todo lo visual. Aquí entra, por ejemplo, background-color.

Esta distinción es la que hace posible reutilizar reglas en distintos componentes sin duplicar código.

¿Qué es OOCSS? Es una metodología de CSS que organiza el código siguiendo dos principios: separar la estructura del diseño y separar el contenedor del contenido, para lograr clases reutilizables.

¿Cómo separar la estructura del diseño con OOCSS?

El primer principio busca que una clase no mezcle medidas con colores. Así puedes reutilizar la misma estructura con distintas apariencias.

Ejemplo sin OOCSS

Imagina dos clases independientes que repiten propiedades de estructura.

css .card-gray { width: 200px; height: 300px; background-color: gray; }

.card-white { width: 200px; height: 300px; background-color: white; }

El HTML solo aplica una de las clases, pero el CSS duplica width y height sin razón.

Ejemplo con OOCSS

Ahora separas la estructura en una clase y el color en otras independientes.

css .card { width: 200px; height: 300px; }

.gray { background-color: gray; }

.white { background-color: white; }

En el HTML combinas las clases según necesites: class="card gray" o class="card white". A primera vista parece solo quitar un guion, pero el cambio real está en cómo organizas y reutilizas el código.

¿Cómo separar el contenedor del contenido?

El segundo principio elimina las dependencias entre padres e hijos en tus selectores. La idea es que un estilo funcione sin importar dónde esté el elemento.

Ejemplo sin OOCSS

Un selector tipo div p obliga a que el párrafo viva dentro de ese div para recibir los estilos.

css div p { font-size: 14px; color: gray; }

Esa dependencia limita la reutilización y complica la mantenibilidad cuando el proyecto crece.

Ejemplo con OOCSS

Creas clases independientes que describen lo que hace cada estilo, no dónde vive el elemento.

css .text-sm { font-size: 14px; }

.text-gray { color: gray; }

En el HTML aplicas class="text-sm text-gray" al párrafo y listo. El estilo viaja con el contenido, no con el contenedor.

¿Por qué evitar selectores como div p? Porque crean dependencia entre padre e hijo. Si mueves el párrafo fuera del div, pierde sus estilos. Con OOCSS las clases son autónomas y reutilizables.

¿Cuándo conviene usar OOCSS en un proyecto?

Esta metodología brilla cuando trabajas con componentes que se repiten con variaciones visuales: tarjetas, botones, textos, alertas. Al tener clases pequeñas y enfocadas, ensamblas interfaces como si fueran piezas de Lego.

• Reutilizas estructura sin reescribir medidas.
• Cambias la apariencia agregando o quitando una clase.
• Reduces conflictos de especificidad porque evitas selectores anidados.

¿OOCSS reemplaza a BEM o SMACSS? No. Son metodologías distintas que pueden convivir. OOCSS se centra en separar estructura y diseño, mientras otras proponen convenciones de nomenclatura o capas de organización.

Con estos dos principios ya tienes la base teórica de Object Oriented CSS. ¿Cómo te imaginas aplicando esta separación en tus propios componentes? Cuéntame en los comentarios qué clases reutilizables crearías primero.