Principios de OOCSS: Separación de Estructura y Estilo en CSS

Clase 12 de 19 • Curso de Arquitecturas CSS

Resumen

En el mundo del desarrollo web, la claridad y organización del código CSS es crucial para la construcción de interfaces eficientes y estéticamente agradables. Hoy nos adentraremos en la metodología Object-Oriented CSS (OOCSS), la cual facilita esta tarea al separar la estructura del diseño y el contenedor del contenido. Esta aproximación no solo mejora la calidad del código, sino que también potencia su reutilización y mantenimiento. Profundicemos en sus principios y descubramos cómo pueden transformar la manera en que escribimos CSS.

¿Qué es la metodología oocss?

La metodología OOCSS es un enfoque para escribir CSS que busca mejorar la escalabilidad y la eficiencia del código. Está basada en dos principios fundamentales: la separación de la estructura del diseño y la separación del contenedor del contenido. Estos principios ayudan a crear estilos más reutilizables y fáciles de mantener.

¿Cuáles son los principios básicos de oocss?

Separación de estructura y diseño

La idea detrás de separar estructura y diseño es distinguir entre las propiedades CSS que definen la disposición de una página y aquellas que definen su apariencia visual. Veamos el detalle:

Estructura: Incluye propiedades como width, height, margin y padding, que determinan cómo se organiza el espacio en la página.
Diseño: Se refiere a propiedades relacionadas con colores, fuentes y otros elementos visuales.

Un ejemplo práctico podría ser tener una clase .cart que defina la estructura de un elemento, y clases adicionales como .gray y .white para determinar su color de fondo.

Separación del contenedor y el contenido

La segunda premisa se centra en evitar la dependencia del contenido respecto al contenedor. Esto se logra mediante la creación de clases independientes que pueden aplicarse a cualquier elemento, sin importar su ubicación en el HTML. Así se facilita la reutilización de estilos y se reduce la complejidad del código.

¿Cómo se implementa oocss en la práctica?

Para aplicar la metodología OOCSS, sigamos un ejemplo sencillo:

Con OOCSS, tendríamos una clase .cart para definir la estructura y clases adicionales .gray y .white para la apariencia.
En lugar de usar selectores descendentes como div p en CSS, optaríamos por clases independientes como .text-sm para el tamaño de fuente y .text-gray para el color.

De esta manera, al aplicar las clases en nuestro HTML, conseguimos estilos más modulares y mantenibles.

¿Qué beneficios aporta oocss al desarrollo web?

La utilización de OOCSS en nuestros proyectos web nos brinda múltiples ventajas:

Mantenibilidad: Al separar claramente la estructura del diseño y desvincular el contenido del contenedor, el CSS resulta más fácil de leer y actualizar.
Reutilización: Las clases independientes y genéricas pueden reutilizarse en diferentes partes del proyecto, lo que reduce la duplicación de código.
Escalabilidad: La metodología favorece la escalabilidad de los proyectos al minimizar la complejidad y favorecer la coherencia en el código.

OOCSS es una metodología que, al comprender y aplicarla correctamente, puede hacer que el desarrollo web sea más ágil y eficiente. Recuerda que seguir aprendiendo y mejorar nuestras habilidades en CSS y sus metodologías, como OOCSS, es esencial para construir una web más accesible y mantenible. ¡Sigue explorando y aplicando estas técnicas en tus proyectos! En nuestra próxima clase, daremos el paso hacia la aplicación práctica de OOCSS en proyectos reales. ¡Nos vemos allí!

Jeffer Steven Nuñez Aragon

student•

Arquitectura OOCSS (Object-Oriented CSS)

OOCSS es una metodología de desarrollo de CSS que se basa en principios de programación orientada a objetos. Su objetivo es crear estilos reutilizables, modulares y mantenibles para construir interfaces de usuario eficientes y escalables. OOCSS busca separar la estructura y el diseño visual, lo que significa que los estilos que definen la apariencia visual de un elemento deben ser independientes de la estructura del HTML.

Principios de OOCSS:

Separación de estructura y diseño: Los estilos se dividen en dos categorías principales: estructura y diseño. La estructura define la disposición y el posicionamiento de los elementos, mientras que el diseño se refiere a la apariencia visual, como colores y fuentes.
Separación de contenedor y contenido: Los estilos aplicados a un contenedor no deben depender de los estilos aplicados a su contenido, y viceversa. Esto facilita la reutilización de contenedores con diferentes tipos de contenido.

Ejemplo de aplicación OOCSS:

Supongamos que queremos crear un botón con un estilo básico y otro botón con un estilo adicional de borde redondeado y color de fondo diferente. Aplicando OOCSS, podríamos crear estilos reutilizables y separar la estructura del diseño.

<!-- Botón básico -->
<button class="btn btn-basic">Click Me</button>

<!-- Botón con borde redondeado -->
<button class="btn btn-rounded">Click Me Too</button>

/* Estilos para el botón básico */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

/* Estilos para el botón classic */
.btn-basic {
  background-color: #e6e6e6;
  color: #666;
}

/* Estilos para el botón con borde redondeado */
.btn-rounded {
  border-radius: 20px;
  background-color: #007bff;
  color: white;
}

Alejandro Ramos

student•

Este me llama la atención 👀, tiene hasta parecido con Tailwind.

Genial la explicación, Teffcode!

Oscar Fuentes Esteves

student•

De hecho sí, y con Bootstrap... y con... bueno con muchos css frameworks.

Brandon Lee Aguero Fernandez

student•

Y a todo esto porque no son iguales? 😅 Estuve investigando 👀 y al parecer la única diferencia que tailwindcss ya viene con un gran set de estas clases, por así decirlo. No sé si me equivoco

Daniel Ochoa

student•

Creo que el nivel de granularidad de OOCSS debe ser algo de cuidado para no terminar con 1.000.000 de clases en tu proyecto.

Jose Luis Bedoya

student•

esto me recuerda mucho a como funcionan talwind y bootstrap

Byron Tito

student•

Esto es el inicio del famoso Framework Tailwind, donde usamos una clase para cada modificación, como text-center esto es una clase que es igual text-align: center, pero como solo colocamos la clase en html nos ahorramos tener que usar un archivo css por que solo basta colocar la clase y listo, solo que visualmente nos llenamos de clases pero uno se acostumbra

Mateo Roldán

student•

Es una metodología para escribir estilos CSS que tiene como objetivo promover la reutilización, modularidad y eficiencia en la creación de hojas de estilo para proyectos web.

Se basa en dos principios principales:

Separar Estructura y Estilo
- Estructura: Propiedades CSS que definen la disposición básica de los elementos, como height width margin padding …
- Estilo: Se refiere a las propiedades CSS que definen el aspecto visual de los elementos, como color border background font

/*SIN OOCSS*/

.card-gray {
width: 10rem;
height: 15rem;
background-color: gray;
}
.card-white {
width: 10rem;
height: 15rem;
background-color: white;
}

/*Con OCCSS*/
.card {
width: 10rem;
height: 15rem;
}
.white {
background-color: white;
}
.gray {
background-color: gray;
}
<!-- Sin OOCSS -->
<div class="card-gray"><div>
<div class="card-white"><div>
<!-- Con OOCSS -->
<div class="card gray"><div>
<div class="card white"><div>

Separar Contenedores y Contenido:

Establece que el contenedor y el estilo deben tratarse de forma independiente. Se debe evitar que los estilos dependen del contenedor en el que están dada la estructura de HTML, ya que esto hace que el estilo aplicado al contenido no sea reutilizable.

/*Sin OOCSS*/
header p {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 2em;
  color: #F44;
}
/*Con OOCSS*/
.text-m {
font-size: 2rem;
}

Irving Juárez

student•

No pensé que enseñaran los fundamentos para hacer un clon de tailwind desde cero

Diego Andres Jimenez Quintero

student•

oocss se usa en conjunto con BEM ? o si utilizo BEM no la puedo utilizar

Platzi

student•

OOCSS y BEM son metodologías diferentes pero pueden utilizarse juntas. OOCSS se enfoca en la separación de estructura y apariencia, mientras que BEM se centra en la nomenclatura de clases. Ambas metodologías pueden complementarse para mejorar la organización y mantenibilidad del código CSS.

Jesus Anguiano Solano

student•

Principios:

1️⃣ Separar estructura y diseño

La estructura define el tamaño y la posicion de los elementos
El diseño define los colores, bordes y estilos visuales.box { display: flex; padding: 20px; } /* Estructura */ .box--blue { background-color: blue; color: white; } /* Apariencia */
```
.box { display: flex; padding: 20px; } /* Estructura */
.box--blue { background-color: blue; color: white; } /* Apariencia */
```

2️⃣ Separar contenedor de contenido

No hacer que los estilos dependen de un solo contexto
Permite reutilizar componentes en distintos lugares sin romper el diseño

.card { width: 300px; border: 1px solid #ddd; padding: 15px; } /* Contenedor */
.card__title { font-size: 20px; } /* Contenido */

Tipos de propiedades en CSS segun OOCCS

🔹 Propiedades de estructura: Controlan dimensiones y distribución

🔹 Propiedades de apariencia: Controlan colores, bordes y efectos visuales

/* Estructura */
.card {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding: 20px;
}

/* Apariencia */
.card--primary {
    background-color: blue;
    color: white;
    border-radius: 10px;
}

Roberto Carlos Moreira España

student•

Me encantan estas clases, con la programación y las metodologías, como cambian las formas de presentar nuestros proyectos, calidad Estefany Aguilar

Jose Alberto Reyes Quevedo

student•

Como se puede aplicar esto cuando tenemos un responsive design?

por ejemplo:

si quiero tener un elemento con text-xsm para un viewport menor a 720 px.

¿Y quiero tener text-md para un viewport de 721 a 1240 px?

Juan Castro

teacher•

Creo que no entendí tu pregunta, Jose. OOCSS no impide el uso de media queries para cambiar el valor de alguna propiedad CSS en ciertas medidas del dispositivo. :eyes:

Andrés Soret Chacin

student•

CSS orientado a objetos (OOCSS) nos permite separar el contenedor y el contenido con “objetos” CSS

Al igual que con cualquier método de codificación basado en objetos, el objetivo de OOCSS es fomentar la reutilización del código y, en última instancia, hojas de estilo más rápidas y eficientes que son más fáciles de agregar y mantener.

Como se describe en la página Wiki del repositorio OOCSS GitHub , OOCSS se basa en dos principios:

1. Estructura y piel separadas.

Casi todos los elementos en una página web con estilo tienen diferentes características visuales que se repiten en diferentes contextos y (los colores, degradados o los bordes visibles). Por otro lado, también se repiten otras características generalmente invisibles (es decir, “estructura”).

Cuando estas características diferentes se abstraen en módulos basados en clases, se vuelven reutilizables y se pueden aplicar a cualquier elemento y tienen el mismo resultado básico.

Antes de aplicar los principios de OOCSS, puede tener CSS que se ve así:

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
```Los tres elementos anteriores tienen estilos que son únicos para cada uno y se aplican con el selector de ID no reutilizable para definir los estilos. Pero también tienen varios estilos en común. Los estilos comunes pueden existir para fines de marca o consistencia de diseño.

Con un poco de planificación y previsión, podemos abstraer los estilos comunes para que el CSS termine así:

```css
.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
```Ahora todos los elementos están usando clases, los estilos comunes se combinan en una “máscara” reutilizable y nada se repite innecesariamente. Solo tenemos que aplicar la clase “skin” a todos los elementos y el resultado será el mismo que el que produciría el primer ejemplo, excepto con **menos código y una posibilidad de reutilización adicional** .

### 2. Contenedor separado y contenido

El segundo principio descrito en la página wiki OOCSS GitHub es la separación de los contenedores de su contenido. Para ilustrar por qué esto es importante, tome el siguiente CSS:

```css
#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
```Estos estilos se aplicarán a cualquier encabezado de tercer nivel que sea hijo del `#sidebar`elemento. Pero, ¿qué sucede si queremos aplicar exactamente los mismos estilos a los títulos de tercer nivel que aparecen en el pie de página, con la excepción de un tamaño de fuente diferente y una sombra de texto modificada?

Entonces tendríamos que hacer algo como esto:

```css
#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
```O podríamos terminar con algo peor:

```css
#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

/* other styles here.... */

#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
```Ahora estamos **duplicando estilos innecesariamente** , y es posible que no nos demos cuenta (o simplemente no nos importe). Con OOCSS, se nos recomienda que prestemos más atención a lo que es común entre los diferentes elementos, luego separemos esas características comunes en módulos u objetos, que se pueden reutilizar en cualquier lugar.

Los estilos que se declaran utilizando el selector descendente en los ejemplos anteriores *no* son *reutilizables* , ya que dependen de un contenedor particular (en este caso, la barra lateral o el pie de página).

Cuando usamos la construcción de módulos basados en clases de OOCSS, nos aseguramos de que nuestros estilos no dependan de ningún elemento contenedor. Esto significa que pueden **reutilizarse** en **cualquier parte** del documento, independientemente del contexto estructural.

Pablo Alejandro Figueroa

student•

/* Estilos para el botón básico */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

/* Estilos para el botón classic */
.btn-basic {
  background-color: #e6e6e6;
  color: #666;
}

/* Estilos para el botón con borde redondeado */
.btn-rounded {
  border-radius: 20px;
  background-color: #007bff;
  color: white;
}

/*SIN OOCSS*/

.card-gray {
width: 10rem;
height: 15rem;
background-color: gray;
}
.card-white {
width: 10rem;
height: 15rem;
background-color: white;
}

/*Con OCCSS*/
.card {
width: 10rem;
height: 15rem;
}
.white {
background-color: white;
}
.gray {
background-color: gray;
}
<!-- Sin OOCSS -->
<div class="card-gray"><div>
<div class="card-white"><div>
<!-- Con OOCSS -->
<div class="card gray"><div>
<div class="card white"><div>

/* Estructura */
.card {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding: 20px;
}

/* Apariencia */
.card--primary {
    background-color: blue;
    color: white;
    border-radius: 10px;
}

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
```Los tres elementos anteriores tienen estilos que son únicos para cada uno y se aplican con el selector de ID no reutilizable para definir los estilos. Pero también tienen varios estilos en común. Los estilos comunes pueden existir para fines de marca o consistencia de diseño.

Con un poco de planificación y previsión, podemos abstraer los estilos comunes para que el CSS termine así:

```css
.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
```Ahora todos los elementos están usando clases, los estilos comunes se combinan en una “máscara” reutilizable y nada se repite innecesariamente. Solo tenemos que aplicar la clase “skin” a todos los elementos y el resultado será el mismo que el que produciría el primer ejemplo, excepto con **menos código y una posibilidad de reutilización adicional** .

### 2. Contenedor separado y contenido

El segundo principio descrito en la página wiki OOCSS GitHub es la separación de los contenedores de su contenido. Para ilustrar por qué esto es importante, tome el siguiente CSS:

```css
#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
```Estos estilos se aplicarán a cualquier encabezado de tercer nivel que sea hijo del `#sidebar`elemento. Pero, ¿qué sucede si queremos aplicar exactamente los mismos estilos a los títulos de tercer nivel que aparecen en el pie de página, con la excepción de un tamaño de fuente diferente y una sombra de texto modificada?

Entonces tendríamos que hacer algo como esto:

```css
#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
```O podríamos terminar con algo peor:

```css
#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

/* other styles here.... */

#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
```Ahora estamos **duplicando estilos innecesariamente** , y es posible que no nos demos cuenta (o simplemente no nos importe). Con OOCSS, se nos recomienda que prestemos más atención a lo que es común entre los diferentes elementos, luego separemos esas características comunes en módulos u objetos, que se pueden reutilizar en cualquier lugar.

Los estilos que se declaran utilizando el selector descendente en los ejemplos anteriores *no* son *reutilizables* , ya que dependen de un contenedor particular (en este caso, la barra lateral o el pie de página).

Cuando usamos la construcción de módulos basados en clases de OOCSS, nos aseguramos de que nuestros estilos no dependan de ningún elemento contenedor. Esto significa que pueden **reutilizarse** en **cualquier parte** del documento, independientemente del contexto estructural.

Principios de OOCSS: Separación de Estructura y Estilo en CSS

Fundamentos de Arquitectura en CSS

Arquitecturas de CSS: Limpieza, Escalabilidad y Mantenibilidad

Principios SOLID aplicados a CSS: Guía práctica

BEM

Metodología BEM: Uso en HTML y CSS con Ejemplos Prácticos

Metodología BEM: Bloques, Elementos y Modificadores en HTML/CSS

Solución de Problemas Comunes en BEM y Mejores Prácticas

Refactorización de Código con Metodología BEM en Proyectos Reales

Refactorización de CSS en Vue usando la metodología BEM

Refactorización de Componentes en React con BEM y Styled Components

Atomic Design

Metodología Atomic Design para estructurar proyectos de software

Refactorización de Proyectos React con Atomic Design

Atomic Design en Vue: Organización de Componentes y Carpetas

OOCSS

Principios de OOCSS: Separación de Estructura y Estilo en CSS

Refactorización de CSS en Angular con OOCSS y SASS

SMACSS

Metodología SMACS para Organizar Proyectos CSS

Refactorización de CSS en Angular con SMACS y SASS

ITCSS

Arquitectura ITCSS: Principios y Capas para Proyectos CSS Grandes

Limitaciones de ITSSS en Proyectos Pequeños

TailwindCSS

Frameworks de CSS: Uso y Aplicación en Proyectos Reales

Evaluación de Arquitecturas CSS para Proyectos Front-end