Introducci贸n al curso

1

Presentaci贸n y bienvenida al curso de Frontend Developer

2

HTML y CSS: definici贸n y usos

3

驴Qu茅 son y para qu茅 nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatom铆a de un Elemento HTML: Atributos, Anidamiento y Elementos vac铆os

7

Anatom铆a de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML m谩s importantes

9

La importancia del c贸digo sem谩ntico

10

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

11

Reto 1: Organiza el siguiente bloque de c贸digo de forma sem谩ntica

Conceptos iniciales de CSS

12

Anatom铆a de una declaraci贸n CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS m谩s usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

驴Qu茅 son y para qu茅 nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de c贸digo

Construcci贸n de componentes

22

驴Qu茅 es un componente? Analicemos nuestros dise帽os

23

Estructura con HTML y BEM de un men煤 desplegable

24

Estilizando nuestro men煤 desplegable con CSS

25

Creaci贸n de un buscador

26

Creaci贸n de un carousel de im谩genes con CSS: Estructura principal

27

Creaci贸n de un carousel de im谩genes con CSS: Detalle de cada item

Maquetaci贸n y dise帽o responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetaci贸n de la pantalla de login: Estructura HTML

31

Maquetaci贸n de la pantalla de login: Estilizaci贸n con CSS

32

Estilizaci贸n de inputs y footer en la pantalla de login

33

Media queries

34

Maquetaci贸n de la pantalla principal

35

Reto 3: Maquetaci贸n de la pantalla de Not Found

Preprocesadores

36

驴Qu茅 es un preprocesador, cu谩les existen y cu谩les son sus diferencias?

37

Instalaci贸n de SASS y configuraci贸n inicial

38

Hablemos de variables, herencia, anidamiento, operadores y m谩s

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra p谩gina de inicio

Conclusi贸n

41

Conclusi贸n del curso y paso siguiente

Bonus

42

Visualizaci贸n de un bot贸n usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

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

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

20/43
Recursos

Aportes 306

Preguntas 32

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Observen un rato 茅sta imagen, van a entender un poco m谩s de toda la arquitectura de HTML. Lo saqu茅 de una web que provee la profesora.

OOCSS
css orientado a objetos. Separa el dise帽o del contenido, as铆 podemos reutilizar nuestro c贸digo

// ejemplo, en vez de para cada elemento una clase.
.globalWidth {
	width: 100%;
}

BEM
Block Element Modifier. Separa los elementos y los modificadores

.header {}  // bloque
.header__button--red {} // block, element, modifier

SMACSS
Scalable and Modular Arquitecture for CSS. Arquitectura de css escalable y modular. PAra eso se realizan cinco pasos

  1. Dividir nuestro css en componentes base
  2. Definir Layout. Elementos que se utilizan solo una vez. ej. Footer, Header
  3. Definir Modulos. Componentes que se usan mas de una vez
  4. Definir Estados. Estos estados definen los cambios que existen en nuestros elementos/componentes. ej. Cambio de color cuando hacen hover
  5. Definir Temas. Separar los temas y sus cambios. Si tuvieras temas

ITCSS
Inverted Triangle CSS. Triangulo Invertido de CSS. Lo que nos indica esta metodologia es poder dividir todos nuestros archivos de css en ciertas partes para que no se mezclen.
Triangulo invertido, desde arriba hacia abajo:

  • Ajustes
  • Herramientas
  • Generico
  • Elementos
  • Objetos
  • Componentes
  • Utilidades

Especificidad: elementos o clases con mayor peso que otros.
Magnitud
Claridad

Atomic Design
Basados en la quimica.
Atomos < Moleculas < Organismos < Templates < Paginas

La eleccion de la metodologia depende del proyecto y del equipo

Anotacion: No es tan buena practica usar !important

Links
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
http://getbem.com/introduction/
http://smacss.com/
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
https://bradfrost.com/blog/post/atomic-web-design/

Este es el estado de las metodolog铆as de css
la m谩s usada es BEM
Aqu铆 les dejo una clase de platzi sobre BEM si quieren saber m谩s
https://platzi.com/clases/1665-preprocesadores/22297-introduccion-a-bem/

An Introduction To Object Oriented CSS (OOCSS) 鈥 Smashing Magazine
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

BEM 鈥 Block Element Modifier
http://getbem.com/introduction/

Home - Scalable and Modular Architecture for CSS
http://smacss.com/

ITCSS: Scalable and Maintainable CSS Architecture - Xfive
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

Atomic Design
https://bradfrost.com/blog/post/atomic-web-design/

llevo rato desarrollando (3 a帽os) y ciertamente como dices en el cap铆tulo anterior, no es muy conocido este tema, en todos los proyectos que es estado simplemente escrib铆a css inconsciente, todo este tiempo he estado escribiendo insulto de css.

prometo, no seguir insultando el css con la manera en que se implementan los estilos.

muchas gracias por esta informaci贸n.

  • OOCSS=> Css Orientado a Objetos=> tratar todo como objetos
  • BEM => Block Element Modified (Bloques, Elementos y Modificadores) estructura de las clases, bloque__elemento鈥搈odificador eje:
	<header class="header">
		<button class="header__button--red">RED</buttton>
		<button class="header__button--yellow">Yellow</button>
	</header>
  • SMACSS=>Scalable and Modular Architecture for CSS (Aquitectura de CSS escalable y modular)
    Cinco pasos:

    1. Base=> Dividir en elementos bases, ej Botones
    2. Layout
    3. Module => Modulos componentes mas de una vez
    4. State => Acciones de los componentes
    5. Theme => Concepto de temas
  • ITCSS => Tri谩ngulo invertido de CSS: Magnitud (base), Especificidad y Claridad
    Dividir las partes para que no se combinen entre s铆, evitar la especificidad

    • Ajustes
    • Herramientas
    • Gen茅rico
    • Elementos
    • Objetos
    • Componentes
    • Utilidades
  • Atomic Design=> Dividir en 谩tomos: ej bot贸n
    mol茅cula Conjuntos de botones

Seg煤n esta documentaci贸n de BEM, el ejemplo de BEM en esta clase tiene un error. Los modificadores siempre deben acompa帽ar la clase original que modifican, de esta manera s贸lo contiene los estilos particulares de ese elemento modificado. Por ejemplo, si s贸lo cambia el color de fondo, no se escriben todos los estilos del elemento en el modificado, se asigna la clase del elemento + la clase modificadora.

...
<header class="header">
    <button class="header__button">Boton normal</button>
    <button class="header__button header__button--red">Boton rojo</button>
</header>
...





https://www.youtube.com/watch?v=wDUwGo98JTA
Recomiendo este v铆deo de Youtube para profundizar en la arquitectura BEM.

muy flojo y explicado por encima, sigo pensando que el mejor curso es el gratis de freddy, es el unico que se toma el tiempo de profundizar, y para cada tema hay proyecto nuevo, ojala hicieran mas cursos con esa tematica de freddy

/*Algunas metodolog铆as de CSS OOCSS, BEM, SMACSS, ITCSS y Atomic Design*/

		OOCSS  => CSS Orientados a objetos(Separa el dise帽o del contenido).
		BEN    => Block element modifier(Separa los bloques, los elementos y los modificadores).
		SMACSS => Arquitectura de CSS, escalable y modular(Base, Layout, Module, State, Theme, SMACSS).
					* Base   => Dividir en componentes base, los cuales son lo que vamos usar en toda la app.
					* Layout => Elementos que se usan solo una vez.
					* Module => Componentes que vamos a usaur mas de una vez.
					* State  => Acciones o cambios de estados que al interactuar con el usuario presentan un cambio en el estilo.
					* Theme  => Temas.
		ITCSS => Triangulo invetido de CSS.
					* Ajustes
					* Herramientas
					* Generico
					* Elementos
					* ObjetosComponentes
					* 脷tilidades
		Atomic Design => 
					* Atomos
					* Moleculas
					* Organismos
					* Templates
					* Paginas
	 /*Algunas metodolog铆as de CSS OOCSS, BEM, SMACSS, ITCSS y Atomic Design*/```

Busque en LinkedIn la cantidad de empresas (utilice el filtro de en todo el mundo) que piden alguna estructura de CSS en especifica y estos fueron los resultados hoy: 15/05/2021.

  • BEM: 37.102
  • Atomic Design: 726
  • SMACSS: 241
  • OOCSS: 238
  • ITCSS: 50

Al parecer el mas requerido y utilizado es la metodolog铆a BEM.

OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Metodologias para mantener mejor el c贸digo.
OOCSS: css orientado a objetos, separa el dise帽o del contenido. Para reutilizar c贸digo. Ejemplo:
<style>
.globalwidth {width100%;}
.header{}
.footer{}
</style>
<body>
<header class=鈥漢eader globalwidth鈥>Header</header>
<footer class=鈥漟ooter globalwidth鈥>Footer</footer>
BEM: Block Element Modifier. Separa los bloques, los elementos y los modificadores. Ejemplo:
<header class=鈥漢eader鈥>
<button class=鈥漢eader__button鈥攔ed鈥>RED</button>
<button class=鈥漢eader__button鈥攜ellow鈥>YELLOW</button>

SMACSS: arquitectura de css escalable y modular. La persona que creo esta metodolog铆a, realiz贸 5 pasos.
Dividir el css en componentes,
Base: estos componentes son los elementos que usamos en toda la aplicaci贸n.
Layout: componentes que se utilizan en la p谩gina una sola vez, como el header o el footer.
Module: estos m贸dulos son componentes que usamos en la aplicaci贸n m谩s de una vez.
State: el estado serian los botones que cuando le hacemos clic cambian de color, seria como las acciones.
Theme: son los temas, no todas las aplicaciones tienen temas. Pero cuando cambian los temas o los colores, se deben ver reflejados y los podamos separar de ese c贸digo.

ITCSS: triangulo invertido de CSS, esta metodolog铆a nos indica poder dividir todos los archivos de css en ciertas partes para que no se combinen entre si. Entonces debemos dividir el c贸digo en ajustes, herramientas, gen茅rico, elementos, objetos, componentes y utilidades. Es una buena metodolog铆a para aplicar y evitar la especificidad, es decir, que hay elementos o clases que tienen mayor peso que otros.

Atomic Design: inspirado en la qu铆mica, separo los elementos en 谩tomos, mol茅culas, organismos, templates y p谩ginas. Los 谩tomos serian los elementos mas chiquitos como los botones, las mol茅culas serian un conjunto de esos botones, creciendo sucesivamente hasta formar organismos, templates y p谩ginas completas.

OOCSS: Object Oriented CSS
BEM: Block Element Modify
SMACSS: Scalable and Modular Architecture CSS
ITCSS: The Inverted Triangle Architecture
Atomic Desing

OOCSS = Object Oriented CSS ( CSS orientado a objetos)
(separa el dise帽o del contenido )
BEM = Block Element Modifier (Bloques, Elementos y Modificadores (Separa los bloques , los elementos y los modificadores )


SMACS(se divine en :
-Base
-Layout
-Module
-State
鈥揟heme
=SMACS

ATMOMIC Design: Basaco en quimica :
-Atomos
-Moleculas
-Organismo
-Templates
-Paginas

Excelente clase. En el curso b谩sico de Desarrollo Frontend no hablaban de estar arquitecturas de CSS y no las conoc铆a

驴En Platzi utilizan alguno de esto?

no entendi muy bien esta clase, deberian poner otra que sea mas especifica en cada metodo

De igual modo dejo este v铆deo que explica m谩s a detalle BEM

https://www.youtube.com/watch?v=wDUwGo98JTA

Est谩 incre铆ble este curso, siento que estoy aprendiendo un mont贸n y la maestra es muy buena explicando, adem谩s de que da buenos recursos que complementan las clases

  1. OOCSS: Es separar el dise帽o del contenido, y asi podemos reutilizar mejor nuestro c贸digo
    Imagin茅moslo como una funci贸n, la llamamos dentro de la clase y as铆 la reutilizamos
  2. BEM:
    Block element Modifile
    Con este, separamos los bloques, los elementos y los modificadores
    Podemos separar los bloques de c贸digo(como el padre de nuestro c贸digo)
class="header...

Este es el padre es decir, el bloque

...__buttom 

el elemento y por 煤ltimo el elemento modificador

--color"
  1. SMACSS:
    hay 5 pasos,
  • Componentes bases

  • Luego el Layout

  • Module

  • State

  • Theme
    Esto da como resultado el SMACSS

  1. ITCSS
    Dividimos todos nuestros archivos de CSS en partes para que no se combinen entre si, en general se representa como un triangulo invertido y evitamos especificidad

No explico muy bien la metodologia BEM, tuve que ver un video de YT que dejaron en los comentarios para entenderlo mejor. Dejo el video

Como complemento
Metodolog铆as css: OOCSS, BEM y SMACSS
https://www.espai.es/blog/2016/07/metodologias-css-oocss-bem-smacss/

No sab铆a de estas metodolog铆as!! de forma emp铆rica empleaba OOCSS o BEM. Excelente!

Este video me pareci贸 genial para complementar la arquitectura BEM.
BEM, OOCSS, SMACSS CSS, buenas pr谩cticas

Poco a poco integrando conceptos como el BEM que no lograba comprender por completo

Dentro de la etiqueta HTML, s贸lo puede ir HEAD y BODY, no se deben agregar otras etiquetas comos style o script, incluso el w3c validator te indica eso. Etiquetas style se recomienda usar dentro del head ya que al momento de cargar la p谩gina, esta se lee de arriba hacia abajo, por lo tanto al leer las etiquetas ya pueden verse con sus estilos aplicados. La etiqueta script se puede usar en head o body, pero en general se usa al final de la etiqueta </body> para que la p谩gina al cargar pueda mostrarse m谩s r谩pido y los scripts se cargan en background. Saludos.

A m铆 me gustar铆a que 茅stas metodolog铆as hubieran estado divididas en varios episodios, pienso que merecen su propio bloque y deben ser explicadas con mejor detalle.

En la metodologia BEM que es la que yo uso, la recomendaci贸n es que las clases que sean modificadores deben ir acompa帽adas con la clase selectora del bloque o elemento,
EJEMPLO

<button class="header__button header__button--red">RED</button>```
esto es con el fin de no repetir c贸digo ya que tanto el boton red y yellow tiene los mimos estilos base especifcados en la clase header__button y el modificador cambiria nada mas el color de fondo y el color de texto como maximo

Al no profundizar en detalle en las ultimas dos metodologias, no es muy claro a que se refieren鈥 sin embargo, espero poder entenderlo desde la practica.

Muy confusa la clase. Se sinti贸 un enorme salto incomodo y no natural cuando se empez贸 el tema de arquitectura CSS, al menos as铆 lo siento yo al observar todas estas explicaciones superficiales.

驴Hay material audiovisual que ampli茅 m谩s cada uno de los temas? Esta lecci贸n explica a groso modo cada uno, no est谩 mal, pero quiero saber m谩s al respecto y no s茅 por donde iniciar.

Para profundizar en el tema recomiendo tomar este curso de rulotico despu茅s [https://platzi.com/clases/diseno-desarrolladores/]

Atomic design es mi favorita por lejos. Me da demasiada comodidad en la organizaci贸n del c贸digo, y mantienes la m谩xima DRY. Don麓t repeat yourself.

Muy confusa la clase, informacion superficial. Desde la clase 16 hasta ac谩, solo han sido art铆culos muy cortos y sin explicaci贸n de algunas cosas como por ejemplo, como usar de manera correcta en Grid la funcion Fr.

un poco por encima todo, pero bien explicado.

Deber铆an de indicar ventajas y desventajas, as铆 como ejemplos

CSS methodologies help us to write better code with abstractions and best practices.

No entendi nada. Este tema se desconecto completamente de lo que veniamos viendo

Explicaci贸n muy por encima de todo , aunque esta bien conocer que existen estas metodolog铆as este curso me parece flojo en cuanto a la base de CSS.

Muy interesante las diferentes arquitecturas de css que has creado estas arquitecturas ayudan mucho aun c贸digo mantenible y sin redundancia en las declaraciones

Para usar CSS es muuuy importante saber primero de algo llamado especificidad, lo cual ayuda a no tener que recurrir a los !important 馃槃

Hola a todos.
Os dejo este link donde explica con ejemplos BEM:

https://seesparkbox.com/foundry/bem_by_example

Genial, muy pocas personas toman en cuenta esto, piensan que css por no ser lenguaje e programaci贸n no tiene importancia y es f谩cil, but, la realidad de css es que si tiene su propia metodolog铆a y ciencia para que los grandes proyectos con excelentes dise帽os no sean un infierno 馃槂

  • Object-Oriented CSS (OOCSS), Hojas de Estilo orientadas a objetos:
  • Block, Element, Modifier (BEM)
  • Scalable and Modular Architecture for CSS (SMACSS)
  • Tri谩ngulo invertido CSS ITCSS

El tema de la especificidad en CSS es un tema muy importante y que debio ser mas profundizado porque muchas pero muchas veces nos topamos con este tema en nuestros desarrollos aca les dejo un link donde los explican mas a detalle

OOCSS,BEM,SMACSS,ITCSS Y Atomic Design.
CSS orientado a objetos es una metodolog铆a CSS desarrollada y promovida por Nicole Sullivan. El objetivo de OOCSS es la idea de tratar los elementos de la p谩gina como objetos.
OOCSS: separa el dise帽o del contenido.
BEM (Block, Element, Modifier o Bloque, Elemento, Modificador) es una metodolog铆a 谩gil de desarrollo basada en componentes.

Pregunto desde lo poco que s茅. No ser铆a mejor utilizar las variables de CSS para reutilizar c贸digo??

Este es un post que hicieron en platzi sobre la metodolog铆a BEM, por si lo quieren leer.
https://platzi.com/blog/bem/

BEM y Atomic design son la mejor opcion a mi parecer

Desconocia de esto, a seguir aprendiendo.

Tanto tiempo trabajando con Bootstrap y apenas me doy cuenta que utiliza BEM xD

SMACSS: Arquitectura de CSS escalable y modular.

  1. Dividir el CSS en componentes base. Son los elementos que usaremos en toda la aplicaci贸n, como los botones.
  2. Layout, son elementos que se usan en la p谩gina una sola vez, como el header o footer.
  3. M贸dulo: Son componentes que usaremos en nuestra aplicaci贸n m谩s de una vez.
  4. Estado: Podr铆amos hablar de un bot贸n que, al hacerle clic, cambia de color. Acciones.
  5. Temas: Cuando cambien los temas y colores tambi茅n se vean reflejados y podamos trabajar.

ITCSS: Tri谩ngulo invertido de CSS.
Poder dividir todos nuestros archivos de CSS en ciertas partes para que no se combinen entre s铆. Dividimos ajustes, herramientas, elementos, objetos, etc. As铆 podr铆amos evitar la especificidad.

Atomic Design: Viene desde los componentes m谩s peque帽o a los m谩s grandes. Se basa en la qu铆mica: 脕tomos, mol茅culas, organismos, etc.

Pero no explica como se crea una clase con BEM 馃槮

METODOLOGIAS DEL CSS:

  1. OOCSS: CSS orientado a objetos. Separa el dise帽o del contenido, as铆 se puede reutilizar mucho mejor nuestro c贸digo.
  2. BEM: Block Element Modifier. Separa los blockes, elementos y modificadres.
  3. SMACSS: Arquitectura de CSS escalable y modular. Construido en 5 pasos:
    a. Base: Dividir nuestro Css en elemento base.
    b. Layout: son elementos que se utilizan una sola vez, como el header y footer.
    c. Module: Son componentes que se utilizan en la aplicaci贸n mas de una sola vez.
    d. State: Son las acciones de nuestros componentes.
    e. Theme: La idea es que cuando cambien los temas o colores tambi茅n se vean reflejados y se puedan separar desde el c贸digo.
  4. ITCSS: Triangulo invertido de CSS. Nos permita dividir todos nuestros archivos de CSS en ciertas partes para que no se combinen entre si.
  5. ATOMIC DESING: Metodologia para que el CSS sea mas escalable.

He realizado un par de live coding donde estuve aprendiendo BEM CSS y al mismo tiempo aplic谩ndolo a un proyecto, aqu铆 les dejo los enlaces por si gustan dar un ojo:

Que bueno que existen estas arquitecturas ayuda a que la comunicacion entre las diferentes partes sea mas efectiva, sin embargo hay muchas y cada una tiene su complejidad ojala se creen estandares globales para que asi mejore mucho mas la comunicacion.

1. OOCSS (CSS orientado a objetos)
Separa el dise帽o del contenido, as铆 podemos reutilizar nuestro c贸digo.

 <style>
    /*objeto global*/
    .globalwidth{
    width: 100%;
    }
    </style>
<body>
    <header class="header" globalwidth>//globalwidth
        HEADER
    </header>

    <footer class="footer" globalwidth>//globalwidth
        FOOTER
    </footer>
</body>

2. (BEM Block Element Modifier)
Separa los elementos y los modificadores

<body>
    <header class="header">
            //header=bloque | button=elemento | red=modificador |
        <button class="header__button--red">
            RED
        </button>
        <button class="header__button--yellow">
            YELLOW
        </button>
    </header>
</body>

3. SMACSS (Scalable and Modular Arquitecture for CSS)
Arquitectura de css escalable y modular.
Para eso se realizan cinco pasos

  1. Dividir nuestro css en componentes base
  2. Definir Layout. Elementos que se utilizan solo una vez. ej. Footer, Header
  3. Definir M贸dulos. Componentes que se usan m谩s de una vez
  4. Definir Estados. Estos estados definen los cambios que existen en nuestros elementos/componentes. ej. Cambio de color cuando hacen hover
  5. Definir Temas. Separar los temas y sus cambios. Si tuvieras tema

4. ITCSS Invertid Triangle CSS
Con esta metodolog铆a podemos dividir todos nuestros archivos de css en ciertas partes para que no se mezclen. (Triangulo invertido, desde arriba hacia abajo):


Atomic Design (Basados en la qu铆mica).
脕tomos < Mol茅culas < Organismos < Templates < Paginas

METODOLOG脥AS M脕S UTILIZADAS

La elecci贸n de la metodolog铆a depende del proyecto y el equipo de desarrollo 馃榿

No entend铆 bien el BEM! 馃槮

Me hubiese gustado que el profesor ahondara mas en estos temas.

bootstrap usar铆a una arquitectura OOCSS ?

No sab铆a que exist铆an estas metodolog铆as, excelente clase. A leer se ha dicho.

OOCSS = Object Oriented CSS
BEM = Block Element Modifier

Este es el enlace del autor de Atomic Design

creo a mi me llama mas la atenci贸n SMACSS

BEM 鉂わ笍

El Atomic Design se ve bastante interesante.

Tantas cosas nuevas, no sabia de la existencia de esto.

驴C煤al es la metodolog铆a mas usada actualmente?

隆Vaya! nunca hab铆a o铆do sobre estas metodolog铆as, me parece demasiado interesante la de Atomic Design a pesar de que pienso que es m谩s acorde el ITCSS.

Que genial! Hace ya aprox medio a帽o que trabajo con CSS y no sab铆a esto!

https://www.youtube.com/watch?v=wDUwGo98JTA
Recomiendo este v铆deo de Youtube para profundizar en la arquitectura BEM.

Solo se mencionan las metodolog铆as por encima, no entend铆 realmente cu谩l es la diferencia entre una y otra.

En los proyectos que he trabajado he utilizado OOCSS, me llamo la atenci贸n SMACSS

Metodologias de CSS.
OOCSS: CSS orientado a objetos.
BEM: Block element modified separa los bloques y los modificadores.
SMACSS: Arquitectura de css escalable y modular.
ITCSS: Dividir todos nuestros archivos css.

hola maestra, y usted que metodologia usa, o mejor aun cual usa platzi? Saludos.

Pero usar OOCSS, BEM, SMACSS, ITCSS es cuesti贸n de gusto, uno puede elegir con cu谩l se siente m谩s c贸modo?

Interesante informaci贸n, pero una consulta, se pueden combinar estos m茅todos entre si ??

yo he trabajado con BEM y me encanta, pero creo que Atomic Design igual est谩 interesante!

Si hizo falta peque帽os ejemplos de los ultimas metodolog铆as para quedar mas claro . Pero en si se aprendi贸 nuevos conceptos

Vicioso pero juicioso

en esta clase si deber铆an dar ejemplos para comprender mejor los conceptos.

Wow! No ten铆a idea de que en CSS tambi茅n existieran arquitecturas para organizar la estructura de los CSS

Metodolog铆as

<h3>OOCSS - CSS Orientado a Objetos</h3>

Esta metodolog铆a separa lo que es el dise帽o del contenido, para as铆 poder reutilizar nuestro c贸digo.

鈫 HTML

<body>
		<header class="header globalwidth">Encabezado</header>
    <footer class="footer globalwidth">Pie de P谩gina</footer>
</body>

鈫 CSS

.globalwidth {
	width: 100%;
}

As铆 en lugar de replicar la propiedad width en m谩s de una clase tenemos una clase general para aplicar en todos los elementos que necesiten esta propiedad.

<h3>BEM - Block Element Modifier</h3>

Esta metodolog铆a separa los elementos de los modificadores.

鈫 HTML

<header class="header">
		<button class="header__button__red">RED</button>
		<button class="header__button__yellow">YELLOW</button>
</header>

Las clases aplicadas a los botones son en base a esta metodolog铆a ya que header es el bloque, button es el elemento y el color especificado al final es el modificador.

<h3>SMACSS - Scalable and Modular Arquitecture for CSS</h3>

Esta metodolog铆a define cinco pasos.

  1. Dividir nuestro CSS en componentes base.
  2. Definir el layout que esta compuesto por los elementos que se utilizan una sola vez, ejemplo footer.
  3. Definir los m贸dulos que ser铆an los componentes que se estar铆an utilizando m谩s de una vez.
  4. Definir los estados, estos son los cambios que existen en nuestros elementos o componentes, ejemplo de esto ser铆a el cambio de color de un elemento cuando se hace hover.
  5. Definir los temas, en caso de tener un tema separarlos y determinar sus cambios.
<h3>ITCSS - Inverted Triangle CSS</h3>

Lo que nos indica esta metodolog铆a es poder dividir todos nuestros archivos de CSS en ciertas partes para que no se mezclen.

La especificidad determina que elementos o qu茅 clases tienen mayor peso que otros.

鉂楋笍No es una buena pr谩ctica el uso de !important dentro de nuestro c贸digo CSS.

<h3>Atomic Design</h3>

Esta metodolog铆a se enfoc贸 en hacer el CSS m谩s modular, m谩s escalable y est谩 basada en qu铆mica. Todo esta separado en 谩tomos, mol茅culas, organismos, templates y al final p谩ginas completas.

Alejandra Camacho

<h3>OOCSS</h3>
  • object oriented css
  • Separa el dise帽o del contenido para que sea c贸digo reutilizable

  • Ejemplo

    • Se us贸 una clase global para no tener que escribir width: 100%; dos veces
    <style>
      .globalwidth {
        width: 100%;
      }
    
      .header {
        
      }
      .footer {
        
      }
    </style>
    <body>
      <header class="header globalwidth">Header</header>
      <footer class="footer globalwidth">Footer</footer>
    </body>
    
<h3>BEM</h3>
  • Block element modify
  • Separa los bloques, los elementos y los modificadores

  • Ejemplo

    • class=鈥渂loque__elemento鈥攎odificador鈥
    <header class="header">
        <button class="header__button--red">RED</button>
        <button class="header__button--yellow">YELLOW</button>
      </header>
    
<h3>SMACSS</h3>
  • Scalable modular arquitecture css
  • Pasos a seguir
    1. Dividir nuestro CSS en componentes base
      1. Los componentes que vamos a estar usando a lo largo de toda la aplicaci贸n como los botones
    2. Layout
      1. Son elementos que se usan una sola vez como el header o el footer
    3. M贸dulos
      1. Los elementos que usar铆amos m谩s de una vez
    4. Estado
      1. Como los botones verdes que cuando damos click cambian a rojo por ejemplo
    5. Temas
      1. No todas la aplicaciones llevan pero lo contempla
<h3>ITCSS</h3>
  • Inverted triangle CSS
  • Nos invita a dividir nuestros archivos css en partes para no combinarlos entre s铆
  • Es una buena metodolog铆a
  • Evita la especificidad
<h3>Atomic Design</h3>
  • Los 谩tomos representan los elementos m谩s peque帽os como botones
  • Las mol茅culas ser铆a como un conjunto de botones

CSS orientado a objetos

Est谩 el Atomic design, que trata de ir de lo m谩s peque帽o, hasta lo m谩s general como las p谩ginas: Elemento, Conjunto de elementos, Luego el conjunto de los elementos contenedores, luego seguir铆an los templates y por 煤ltimo las p谩ginas.

Es mala pr谩ctica estar usando el !important.

ITCSS, o Inverted Triangle CSS, que define la prioridad en nuestros estilos, osea, en nuestros archivos, osea una parte para los ajustes principales, luegos una parte para las herramientas y luego etc.

SMACSS, Scalable and Modular Achitecture for CSS, divide los elementos, en su uso, la frecuencia de este y sus caracter铆sticas: Base, Layout, Module, State y Theme.

BLOCK, ELEMENT, MODIFIER, son las siglas de BEM, una metodolog铆a, para nombrar las clases y ID de los elementos, seg煤n d贸nde est茅n. Es decir que todos adquieren el nombre del pap谩, pero su nombre difiere conforme la jerarqu铆a y luego su elemento modificador, que se refiere a un estilo que lo diferencia.

Lo que hacemos con OOCSS, es sencillo: Tengo dos etiquetas 驴Tengo una propiedad de estructura y valor en com煤n? En caso de que sea afirmativo, entonces lo que voy a hacer es retirar esa propiedad en com煤n y voy a utilizar otra clase para ponerla, por lo que queda el estilo de mi contenido separado de la estructura.

OOCSS, que significa Object Oriented CSS. Esta metodologia separa el design o dise帽o de la estructura, la cu谩l es content o contenido y Container o contenedor.

Mi Aporte (Me sirvi贸 a mi para entender mejor):
OOCSS BEM & SMACSS
OOCSS
SMACSS
ITCSS
ATOMIC DESIGN

me parece muy floja la explicacion

Primera vez que escucho hablar de metodolog铆as o arquitecturas CSS. Le cosa se va poniendo interesante.

En mi caso siento que es m谩s c贸modo utilizar BEM y es menos engorroso. BEM = Bloque__Elemento--modificador Por su arquitectura es m谩s f谩cil de leer