OOCSS, BEM, SMACSS, ITCSS y Atomic Design

Las siguiente lecturas sirven para profundizar en cada metodología:

• OOCSS
• BEM
• SMACSS
• ITCSS
• Atomic Design
• How to organize your CSS with OOCSS, BEM & SMACSS

.
También podemos revisar los Design System de diferentes empresas para guiarnos y observar como implementen estas metodologías. En lo personal me gusta mucho el Design System de Help Scout.
.
En este link puedes encontrar varios Design System en figma.

Las Metodologías o Arquitecturas CSS nos ayudaran a escribir código CSS más predecible, reutilizable, mantenible y escalable.
CSS orientado a objetos (OOCSS)
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.

1. Estructura y piel separadas.

2. Contenedor separado y contenido

Blocks, Elements and Modifiers (BEM)
BEM es una abreviatura de los elementos clave de la metodología: Bloque, Elemento y Modificador. BEM significa Modificador de Bloques de Elementos (Block Element Modifier) por sus siglas en inglés. Sugiere una manera estructurada de nombrar nuestras clases, basado en las propiedades del elemento en cuestión. Cuando utilizamos la metodología BEM, hay que tomar en cuenta que solamente podemos usar nombres de clases (no IDs). Los nombres de clases permiten repetir el nombre BEM si es necesario, y crear una estructura de código más consistente (en ambos archivos el HTML y CSS/Saas).

Scalable and Modular Architecture for CSS (SMACSS)
En el núcleo de SMACSS (Arquitectura en CSS Escalable y Modular) está la categorización. Al clasificar las reglas CSS, comenzamos a ver patrones y podemos definir mejores prácticas en torno a cada uno de estos patrones.
El objetivo principal de esta metodología es reducir la cantidad de código y simplificar el mantenimiento. Para ello, se dividen los estilos en cinco partes:

• Reglas básicas: se establecen los estilos por defectos de los elementos HTML individuales, los típicos selectores CSS de tipo. Por ejemplo

reset, html, body, button, h1

• Reglas del layout: se divide la página en secciones y se asignan los estilos relacionados con su estructura.

header, main content, footer, navigation

• Reglas de módulos: elementos que pueden ser reusables, modulares e independientes del contexto. Por ejemplo: llamadas a la acción o galerías de imágenes.
• Reglas de estados: se define el comportamiento del layout y sus módulos en diferentes estados: hover, active, diferentes resoluciones, etc.).
• Reglas de temas: estilos que afectan al layout y módulos. Estas reglas son opcionales, y las puedes utilizar para estilos que puede que quieras reemplazar.

Scalable and Maintainable CSS Architecture — Xfive
ITCSS es una arquitectura que tiene como principal objetivo estructurar la forma en la que escribimos CSS.

• Configuración : se utiliza con preprocesadores y contiene fuentes, definiciones de colores, etc.
• Herramientas : mixins y funciones de uso global. Es importante no generar ningún CSS en las 2 primeras capas.
• Genérico : restablecer y / o normalizar estilos, definición de tamaño de caja, etc. Esta es la primera capa que genera CSS real.
• Elementos : estilo para elementos HTML desnudos (como H1, A, etc.). Estos vienen con un estilo predeterminado del navegador para que podamos redefinirlos aquí.
• Objetos : selectores basados ​​en clases que definen patrones de diseño no decorados, por ejemplo, objetos de medios conocidos de OOCSS
• Componentes : componentes específicos de la interfaz de usuario. Aquí es donde tiene lugar la mayor parte de nuestro trabajo y nuestros componentes de la interfaz de usuario a menudo están compuestos de objetos y componentes
• Utilidades : utilidades y clases auxiliares con la capacidad de anular cualquier cosa anterior al triángulo, por ejemplo. ocultar clase auxiliar

Atomic Design
El diseño atómico es una metodología para crear sistemas de diseño. Hay cinco niveles distintos en el diseño atómico:

• Atomos: Los átomos son los componentes básicos de la materia. Aplicados a las interfaces web, los átomos son nuestras etiquetas HTML
• Moleculas: Las cosas comienzan a ponerse más interesantes y tangibles cuando comenzamos a combinar átomos juntos. Las moléculas son grupos de átomos unidos entre sí y son las unidades fundamentales más pequeñas de un compuesto
• Organismos: Las moléculas nos dan algunos bloques de construcción para trabajar, y ahora podemos combinarlas para formar organismos
• Plantillas: En la etapa de plantilla, rompemos nuestra analogía química para entrar en un lenguaje que tenga más sentido para nuestros clientes y nuestro resultado final
• Paginas: Las páginas son instancias específicas de plantillas. Aquí, el contenido del marcador de posición se reemplaza con contenido representativo real para dar una descripción precisa de lo que un usuario finalmente verá

Teffy hizo una guia de BEM, usando sus dibujitos de capsula dragon

• BEM

Ademas de una cheatsheet

• ‘https://9elements.com/bem-cheat-sheet/’ (Este tiene algunas imagenes de ejemplo)

Los apuntes de la profe pero en una sola imagén

ARQUITECTURAS CSS 📐📏
.
.
.
🟢OOCSS(oriented object cascading style sheets)
Optimiza nuestro código para reducirlo y poder agregar más código de una forma rápida.
.
Para nuestro ejemplo creamos dos cajas con las mismas propiedades pero de diferente color…

//HTML
<div class="caja1"></div>
<div class="caja2"></div>

//CSS
.caja1 {
  background: 🟦blue;
  width: 200px;
  height: 200px;
}
.caja2 {
  background: 🟥red;
  width: 200px;
  height: 200px;
}

el problema aquí es que estamos repitiendo el código CSS para las 2 cajas cuando solo queremos cambiar de color.
La solución a esto es crear una clase que contenga la estructura de ambas cajas.

//HTML 
<div class="caja azul"></div>
<div class="caja roja"></div>

//CSS
.caja {
  width: 200px;
  height: 200px;
}
.azul {
  background: 🟦blue;
}
.roja {
  background: 🟥red;
}

Como puedes ver la clase “.caja” es la que contiene toda la estructura y con las demás clases “.azul🟦”, “.roja🟥” le damos color a nuestras cajas.
.
OOCSS se utiliza en todos lados y su uso mas cercano está en los Frameworks de diseño web, tal como boostrap, fundation, etc.
.
.
.
🟢BEM(Block, Element, Modifier)
Es una convención o metodología para nombrar tus clases de CSS.
Sirve:
*Para tener un CSS más fácil de leer, entender, mantener y escalar.
*Para organizar las clases de CSS en módulos independientes.
*Para evitar selectores de CSS anidados.
.
-Bloque: es el contenedor principal del componente.(card, button, form, menu, header…)
-Elemento: son las partes internas que conforman el componente.( icon, text, item, image, input, button…)
-Modificador: son las variaciones del bloque o del elemento.(active, big, right, secondary, red…)
.
Los nombres de clases con convención BEM, pueden tener la siguiente sintaxis:

[bloque]
[bloque]__[elemento]
[bloque]--[modificador]
[elemento]--[modificador]
[bloque]__[elemento]--[modificador]

Los guiones bajos (__) se usan para separar el bloque del elemento,
Los guiones medios (–) se usan para separar el bloque o el elemento del modificador.

https://platzi.com/blog/bem/
.
.
.
🟢SMACSS(Arquitectura escalable y modular para CSS)
*Es una guía de estilo que sigue cinco categorías simples.
*Es una forma de examinar su proceso de diseño y adaptar esos marcos rígidos a un proceso de pensamiento flexible.
*Es un intento de documentar un enfoque coherente para el desarrollo del sitio cuando se utiliza CSS.

La idea de esta arquitectura es no mezclar código de varias categorías en un solo archivo porque puede ser muy complicado encontrar una línea de código simple para cambiar. La mayor parte del propósito de esta categorización es codificar patrones, cosas que se repiten dentro de nuestro diseño. La repetición resulta en menos código, mantenimiento más fácil y mayor consistencia en la experiencia del usuario.

• ¿Cuáles son estas categorías?
  -Base: son los valores predeterminados. Son como el relleno, el margen, el borde, la fuente y otras propiedades, estos valores se utilizan en todo el sitio web y todos los elementos.
  .
  -Layout: divide una página en secciones con elementos como encabezado, pie de página, página principal, etc. Los diseños mantienen uno o más módulos juntos.
  .
  -Modules: son las partes reutilizables y modulares de nuestro diseño, como la barra de navegación, la barra lateral y algunos elementos que se repiten en el sitio.
  .
  -State: son formas de describir cómo se verán nuestros módulos o diseños cuando estén en un estado particular (por ejemplo, activo, inactivo, expandido, oculto).
  .
  -Theme: Las reglas de tema son similares a las reglas de estado en que describen cómo podrían verse los módulos o diseños. -

.
.
.
🟢ITCSS( Inverted Triangle CSS)
Arquitectura CSS del triángulo invertido es una arquitectura escalable y manejable para el CSS. Básicamente son una serie de normas o planteamientos para crear el CSS, como una filosofía.
.
Ayuda a organizar los archivos CSS de su proyecto de tal manera que pueda manejar mejor los aspectos específicos de CSS, como el espacio de nombres global, la cascada y la especificidad de los selectores .

A la izquierda del diagrama encontramos una estructura sugerida por carpetas: Settings, Tools, Generic… junto con un triángulo sirve para representar el alcance y características del código CSS que iría en cada una de esas carpetas, atendiendo a conceptos como Magnitud, Especificidad y Claridad.

Nota: Como todo en ITCSS, lo que obtenemos son básicamente recomendaciones.
No es que te vayas a descargar una serie de carpetas con archivos de código ya escrito para ti, sino una simple propuesta para satisfacer la mayoría de las necesidades.
Tú serás el responsable de crear esas carpetas y empezar a colocar archivos con código en ellas, escribiendo CSS o código en cualquier preprocesador de CSS.

La lista de las carpetas propuestas es la siguiente:

.
.
.
🟢Atomic Design
Es un sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas.
Cada vez tenemos que diseñar para más tamaños de pantallas y para distintos dispositivos (móviles, tabletas, TV, etc.) y necesitamos procesos que eviten errores y faciliten el desarrollo.

Atomic Design viene a unir el diseño y el desarrollo bajo un concepto: diseñar por componentes.

.
Los 5 niveles del Atomic Design

Nivel 1: Átomos
Un átomo es la unidad de partículas más pequeña que puede existir.
Aplicado al diseño, hablamos de átomos cuando hablamos de elementos UI que por sí solos tienen alguna funcionalidad: botones, cards, avatares, inputs de formulario… pero también las tipografías, paleta de colores, espaciados, párrafos…

.
Nivel 2: Moléculas
Una molécula es una unión de dos o más átomos.
Del mismo modo, una molécula en Atomic Design es la unión de diferentes átomos para formar un elemento UI más complejo.
Por ejemplo, un campo de formulario con un botón de enviar y un label. O un rectángulo con un avatar, nombre y ubicación del usuario.

.
Nivel 3: Organismos
Unión de moléculas.
Por ejemplo, cuando juntamos los rectángulos con el avatar y los nombres, cuando unimos los iconos y texto para crear una navegación de una aplicación, etc.

.
Nivel 4: Plantillas
Unión de distintos organismos que forman una página o una aplicación.
Se trata de un entregable de alta fidelidad, pero que no termina de ser el diseño final.
Para que nos entendamos, se trata del “esqueleto” de la aplicación o página web.

.
Nivel 5: Páginas
El diseño final que ya contiene las imágenes y otros detalles que hacen que ese archivo ya esté listo para el desarrollo o, en su defecto, test con usuarios o el equipo.

.

Las ventajas del Atomic Design:
-Facilita la creación de la guía de estilo.
-Permite hacer más rápido los prototipos, ya que los elementos ya existirán.
-Hace más rápido el proceso de actualizar el diseño del producto y/o añadir nuevas
funcionalidades, ya que los cambios no harán que se deba programar todo desde cero.
-Menos componentes hará el diseño y el código más consistentes y eficientes.
-Permite reutilizar átomos para crear cualquier diseño que se requiera.

👀Esta pagina me ayudo con la documentación de BEM:
https://en.bem.info/methodology/

Encontre una lectura interesante para los que quieran profundizar más sobre Atomic Design, bastante claro y en español, incluso comparan la tabla periódica y la ajustan a una tabla de elementos HTML, bastante util

ORGANIZA TU CSS

OOCSS

• Ten objetos como estructuras principales
• Estas estructuras estarán encapsuladas en máscaras que se modificarán.
• Las estructuras quedarán intactas

BEM

• Bloque - Elemento - Modificador
• Objeto contenedor - contenido - Características añadidas

SMACSS

• Orden del que podriamos estructurar nuestros componentes de HTML en las diferentes archivos o elementos

ITCSS

• Hacer una separación entre ajustes, herramientas, genérico, elementos, objetos, componentes y elementos
• Triangulo de Especificidad - Magnitud - Claridad

Atomic Design

• Tener separado entre detalles más pequeños a más grandes
• Elementos más pequeños → átomos
• Agrupación de elementos relacionados → moléculas
• Varias agrupaciones unidas → organismos
• Construir templates y páginas

Les recomiendo este video. Para saber mas de BEM.

https://www.youtube.com/watch?v=bvnzyXGkNY4&ab_channel=FalconMasters

Algo que es bueno anotar, es que no debemos cerrarnos a trabajar con solo una arquitectura. Podemos mezclarlas para obtener mejores resultados.

Por ejemplo, yo extraigo cosas de SMACSS y BEM en base a mis requerimientos para los proyectos en los que trabajo.

Una buena pagina donde se explican con ejemplos estas metodologías con ejemplos

En esta página se encuentra contenido muy interesante del uso de BEM para CSS

https://9elements.com/bem-cheat-sheet/

Clase 21 - OOCSS, BEM, SMACSS, ITCSS Y Atomic Design

¿Cuáles son las arquitecturas CSS más usadas?

• OOCSS.
• BEM
• ITCSS
• Atomic Design.

¿En qué consiste la arquitectura OOCSS?

• Las siglas de esta arquitectura significan Object Oriented CSS la cual consiste en separar la estructura principal y la piel o máscara. En otras palabras esta consiste en tener objetos que son estructuras principales, estos estarán unidos a una máscara, donde esta será la que cambie pero manteniendo la estructura inicial.

¿En qué consiste la arquitectura BEM?

• Las siglas de esta arquitectura significan Block-Element-Modifier. Esta es una de las arquitecturas más usadas hoy en día. Consiste en manejar los elementos en clases definidas por 3 partes.
  • Bloque: Es la estructura principal que contiene varios elementos.
  • Elemento: es el elemento HTML que está contenido en el bloque.
  • Modificador: Es un estilo específico que se le da un elemento.

¿En qué consiste la arquitectura SMACSS?

• Las siglas de esta arquitectura significan Scalable and Modular Architecture for CSS. Esta indica el orden en el que los componentes estarán ubicados en carpetas. Al juntar todos estos componentes podremos tener como resultado una página web. Esta esta formada por los siguientes elementos:
  • Base: Elemento base (botones, títulos, enlaces).
  • Layout; Estructura de la página.
  • Módulos: Elementos que contienen a los elementos base.
  • Estado: Estilos relacionados con el comportamiento de un elemento.
  • Temas: Conjunto de estilos que definen una página web.

En qué consiste la arquitectura ITCSS?

• Las siglas de esta arquitectura significan Inverted Triangle CSS. Esta consiste en que separemos los archivos del proyecto mediante ajustes, herramientas, elementos, etc. Esto con el fin de mejorar la especificidad, claridad y magnitud.

¿En qué consiste la arquitectura Atomic Design?

• Hoy en día compite con la arquitectura BEM como la más usada. Esta consiste en manejar los elementos como una estructura mínima, cuando juntamos varias estructuras tendremos como resultado los estilos de la página web. Podemos organizarla de la siguiente manera:
  • Átomos: Estructura mínima (botones, enlaces, títulos, etc,).
  • Moléculas: La unión de los átomos.
  • Organismos: Unión de las moléculas.
  • Plantillas: Unión de organismos.
  • Páginas: Unión de plantillas.

Aqui les dejo un enlace de interes here

Notes:

• OOCSS → Nos habla de que tengamos objetos con una estructura principal que no sera mutable, y “envolverlas” en unas mascaras que sera lo que modifiquemos
• BEM → De las metodologias mas utilizadas, significa Bloque Elemento y Modificador
• SMACSS → Nos indica el orden en la manera que podemos organizar nuestro sistema de archivos CSS
• ITCSS → Se parece a SMACSS pero con una estructura diferente. Osea que su objetivo es llegar a “modularizar” nuestro CSS
• Atomic Design → Metodologia muy popular, y nos indica como podemos comenzar a estructurar nuestras paginas desde los elementos mas pequeños (atomos) hasta formar paginas completas.

En definitiva esto de las metodologías es algo que me falta comprender. He tratado de aprender BEM pero siempre tengo dudas si lo estoy aplicando bien o no. Con respecto a las demas, las he escuchado más no he investigado al respecto. Creo que este aprendizaje no se acaba en este curso, hay mucho por aprender.
Gracias por la información Teacher 🤓

OOCSS:
Tener objetos que son estructuras principales. Estas estructuras están agrupadas en mascaras y lo que se modifica son las mascaras

BEM:
Elemento
Modificador
Bloque

SMACSS:

Orden: BASE + LAYOUT + MODULE + STATE + THEME

ITCSS
Triangulo invertido.
Separación en magnitud, especificidad y claridad

ATOMIC Design
Basado en los atomos

el que mas me gusta es atomic design

Acabo de describir que yo utilizo Atomic Desgin xd

✅

😃

OOCSS, BEN, SMACSS, ITCSS Y Atomic Design):
OOCSS (Object-Oriend CSS)

• OO: CSS es un metodologia de diseno y arquitectura CSS que se vasa en principios de la programacion orientada a objeto.

• BEM (block-Element-Modifier):
  BEM: Es una arquetectura y metodologia CSS que se centra en la modularidad y la reutilizacion de estilos.
  Divide los componentes en bloques (blocks), elementos (elements) y modificadores (modifiers). Cada bloque es un componente independiente y se le asigna una clase única. Los elementos son partes del bloque, y los modificadores son variaciones de un bloque o elemento. BEM ayuda a crear estilos más reutilizables y a mantener una estructura clara y consistente.

• SMACSS (Scalable and Modular Architecture for CSS):
  SMACSS es una guía de estilo para la organización y estructuración de código CSS. Proporciona pautas para crear una arquitectura modular y escalable, enfocándose en cinco categorías: base, diseño, módulos, estados y temas. SMACSS promueve la separación de preocupaciones, la reutilización de estilos y la facilidad de mantenimiento.

• ITCSS (Inverted Triangle CSS):
  ITCSS organiza los estilos en una jerarquía en forma de triángulo invertido. Proporciona una estructura escalable y mantenible para el desarrollo CSS. ITCSS divide los estilos en diferentes capas, desde estilos globales hasta estilos específicos de componentes. Cada capa tiene un nivel de especificidad creciente y evita el acoplamiento entre estilos.

Atomic Design:

• Atomic Design es una metodología de diseño que propone dividir la interfaz de usuario en componentes más pequeños y reutilizables, llamados átomos. Los átomos se combinan para formar moléculas, organismos, plantillas y páginas completas. Atomic Design se basa en la idea de que la creación y combinación de componentes básicos permite construir interfaces de manera más rápida y coherente.

• Estas metodologías y arquitecturas CSS, incluyendo OOCSS, BEM, SMACSS, ITCSS y Atomic Design, ofrecen estructuras y pautas para organizar y gestionar de manera efectiva el código CSS en proyectos más grandes y complejos, lo que mejora la reutilización de estilos, la mantenibilidad y la escalabilidad del código. Cada enfoque tiene sus propias características y beneficios, por lo que es importante elegir la que mejor se adapte a las necesidades y requisitos del proyecto.

Gracias profe por la explicación…

Atomic Design: Metodología muy utilizada, su nombre se basa en quimica. Tenemos átomos (unidad mínima: ej. input, boton), Moléculas (agrupacion de átomos: ej. formulario), Organismos, Templates y Páginas.

Atomic Design: Metodología muy utilizada, su nombre se basa en quimica. Tenemos átomos (unidad mínima: ej. input, boton), Moléculas (agrupacion de átomos: ej. formulario), Organismos, Templates y Páginas.

ITCSS(Inverted triangle): Nos permite hacer una separacion entre diferentes estructuras. Nos permite trabajar con especificidad.

SMACSS: Nos indica el orden en el que podemos incorporar los elementos html en diferentes carpetas.

BEM: Una de las metodologías mas utilizadas. Consiste en un Bloque, Elemento y Modificador.

OOCSS: Objetos que son estructuras principales que van a estar amarradas a una mascara. Esto hace que la estructura principal pueda mantenerse intacta al modificar un objeto

Metodologias CSS
.
https://2020.stateofcss.com/fr-FR/technologies/methodologies/#css_methodologies_experience_ranking

BEM y ATOMIC D… importantes de retener

Es importante tomar en cuenta cúal de estas metodologías se adapta mas a nuestros proyectos. Para empezar, leer y documentarse bien de cada una de ellas.

.

Mis apuntes en Notion💚

Buen vídeo para entender la metodología BEM. Para niños 😅

No entendí 😦

Recomiendo la lectura https://platzi.com/blog/bem/ esta para volar tu mente jajaja

La programación de software y el desarrollo web son increíbles! la mente te lleva a poder indagar en todas las filosofías conocidas, en todas las ceraciones artísticas, habidas y por haber, en todas las ciencias conocidas por el hombre , y en su conjunto la plena convicción de estar listos para CREAR.

OOCSS, BEM y SMACSS son tres de las metodologías más conocidas para organizar el código CSS con la intención de que sea legible y mantenible. Cada una de estas metodologías define una serie de convenciones y reglas que han de seguir los estilos y propiedades CSS.

https://picodotdev.github.io/blog-bitix/2021/01/las-metodologias-oocss-bem-y-smacss-para-organizar-los-estilos-css/#:~:text=OOCSS%2C BEM y SMACSS son,los estilos y propiedades CSS.

BEM: LA MAS UTILIZADA
OOCSS: TENER OBJETOS Y ESTAN AMARRADAS PERO LA ESTRCUTRUA QUEDA INTACTA
SMACSS: ORDEN PARA ESTRUCTURAR
ITCSS: SEPARACION DE AJUSTES, ELEMENTOS, ETC SE SEPARA EN ESTRCUTRUAS
ATOMIC DESIGN: TEMPLATES Y PAGINAS

Mis apuntes en Notion

¡¡Genial! Aún mucho por aprender y mejorar.

La profesora no lo mencionó, supongo que para no profundizar mucho. Pero idealmente lo mejor es separar el HTML del CSS en archivos distintos.

Esta clase nunca la había oído ni las había estudiado. Me sirvió para poder ahondar más en lo que son cada uno de los temas que se tocan esta clase.

Mis apuntes…
_
Metodologías…
En BEM creo que el Modificador podría ser más que el “colorcito”… tal vez la profe quiso decir el estilo CSS o diseño…

Básicamente las metodologías consisten en separar la estructura HTML y presentar los archivos de códigos CSS ordenadamente y legible…

NOTA: esto es lo que entendí… y pienso que cualquiera de estas metodologías esta bien para cualquiera… solo que debemos adoptar una para trabajar con “buenas practicas”.

Si desde el comienzo se habla de que un HTML semántico mejorara nuestro SEO , porque en todo el curso se utilizo DIV ?

Podemos entender las arquitecturas de CSS como maneras de organizar nuestras líneas de estilos para tener un mejor flujo de trabajo.

La metodologia BEM sirve para tener un codigo mas limpio y mas ordenado cuando se tiene muchas lineas de codigo css.

ITCSS

Atomic Design

Las Metodologías o Arquitecturas CSS nos ayudaran a escribir código CSS más predecible, reutilizable, mantenible y escalable.

https://platzi.com/blog/bem/ este artículo es muy útil para profundizar en BEM