OOCSS

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:

1. 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.
2. 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;
}

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

Genial la explicación, Teffcode!

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:

1. 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>

1. 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;
}

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

esto me recuerda mucho a como funcionan talwind y bootstrap

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.

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 \*/ ```js .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 ```js .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 ```js /* Estructura */ .card { display: flex; flex-direction: column; width: 300px; padding: 20px; } /* Apariencia */ .card--primary { background-color: blue; color: white; border-radius: 10px; } ```

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