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

👀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

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.

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

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

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