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!

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.

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

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