No tienes acceso a esta clase

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
18H
18M
41S

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

22/24
Recursos

Ahora que ya conoces qu茅 implica trabajar con una arquitectura de CSS, estudiemos las m谩s comunes cuando se manipula c贸digo CSS.

Qu茅 es CSS orientado a objetos

La arquitectura OOCSS (Object Oriented CSS) consiste en separar la estructura principal y la piel o m谩scara.

En otras palabras, consiste en tener objetos que son estructuras principales. Estos objetos estar谩n unidos en una m谩scara, donde esta ser谩 la que cambie pero manteniendo la estructura intacta.

CSS Orientado a objetos

Qu茅 es BEM: bloque, elemento y modificador

La arquitectura BEM (Block-Element-Modifier) es una de las m谩s utilizadas actualmente. Consiste en manejar los elementos en clases definidas por bloques, elementos y modificadores.

  • Bloque: es la estructura principal que es contenedora de varios elementos.
  • Elemento: es el elemento HTML que hace referencia el contenedor.
  • Modificador: es un estilo espec铆fico para el elemento. Por ejemplo, un bot贸n que tenga un color diferente a los dem谩s, esto tiene relaci贸n con la especificidad.
Bloque, elemento y modificador

Puedes revisar m谩s sobre esta arquitectura en el siguiente art铆culo:

Qu茅 es la arquitectura escalable y modular de CSS

La arquitectura SMACSS (Scalable and Modular Architecture for CSS) indica el orden de componentes que estar谩n ubicados en carpetas. La uni贸n de estos componentes dar谩 como resultado tu p谩gina web con estilos.

  • Base: elementos base, como botones, t铆tulos, enlaces.
  • Layout: estructura de la p谩gina, relacionado con el Responsive Design.
  • M贸dulos: elementos que contienen a los elementos base.
  • Estado: estilos relacionados con el comportamiento de elemento, relacionado con las pseudoclases y pseudoelementos.
  • Temas: conjunto de estilos que definen tu p谩gina web.
Arquitectura escalable y modular de CSS

Qu茅 es el tri谩ngulo invertido de CSS

La arquitectura ITCSS (Inverted Triangle CSS) consiste en separar los archivos del proyecto; mediante ajustes, herramientas, elementos, entre otros. Todo esto para manejar los detalles de especificidad, claridad y magnitud.

Tri谩ngulo invertido de CSS

Qu茅 es el dise帽o at贸mico

La arquitectura Atomic Design tambi茅n es una de las m谩s utilizadas actualmente. Consiste en manejar los elementos como una estructura m铆nima, a partir de la uni贸n de varias de estas, dar谩 como resultado los estilos de la p谩gina web. Se basa en la estructura m铆nima de la materia, los 谩tomos.

  • 脕tomos: estructura m铆nima; como botones, enlaces, t铆tulos, entre otros.
  • Mol茅culas: uni贸n de 谩tomos.
  • Organismos: uni贸n de mol茅culas.
  • Plantillas: uni贸n de organismos.
  • P谩ginas: uni贸n de plantillas.
Dise帽o at贸mico

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 53

Preguntas 9

Ordenar por:

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

o inicia sesi贸n.

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

.
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 鈥渙bjetos鈥 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 鈥嬧媏n 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

Ademas de una cheatsheet

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 鈥渆squeleto鈥 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 鈥渆nvolverlas鈥 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 鈥渕odularizar鈥 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

馃槂

Pregunta Respuesta
驴Cu谩l es uno de los enfoques de OOCSS (Object Oriented CSS)? OOCSS propone dividir los estilos en objetos (estructuras principales) y pieles o m谩scaras (encapsulamiento). Los objetos mantienen su estructura principal, mientras que las pieles pueden ser modificadas para cambiar la apariencia.
驴Qu茅 significa la sigla BEM y c贸mo se aplica? BEM significa Bloque, Elemento y Modificador. Se utiliza para organizar la estructura HTML en bloques (componentes principales), elementos (partes de los bloques) y modificadores (variantes de los bloques o elementos) para una mejor organizaci贸n y reutilizaci贸n.
驴En qu茅 consiste la metodolog铆a SMACS? SMACS propone una estructura para organizar el c贸digo en carpetas, separando elementos base, layout, m贸dulos, estados y temas. Esto ayuda a mantener una estructura m谩s ordenada y escalable en proyectos grandes.
驴Cu谩l es el enfoque del 鈥渢ri谩ngulo invertido鈥 en CSS? El 鈥渢ri谩ngulo invertido鈥 es una metodolog铆a que busca separar el c贸digo en ajustes, herramientas y elementos, con el prop贸sito de mejorar la especificidad, claridad y magnitud del c贸digo.
驴En qu茅 se basa Atomic Design y c贸mo organiza los componentes? Atomic Design se basa en la qu铆mica y organiza los componentes en 谩tomos (elementos peque帽os), mol茅culas (agrupaciones de 谩tomos), organismos (conjuntos de mol茅culas), templates y p谩ginas. Esta metodolog铆a permite construir de manera gradual y estructurada las interfaces de las p谩ginas web.

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

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.

.

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

隆隆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 鈥渃olorcito鈥濃 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 鈥渂uenas 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