No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

OOCSS

12/19
Recursos

Aportes 3

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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