Guía de Taller
1
Diseño y Maquetación Web – Metodología BEM, tipografía y animaciones
_______________________________________________________________________
Diseño y Maquetación Web
Metodología BEM, tipografía y animaciones
Sesión 9
LOGRO DE LA SESIÓN
Conoce la importancia del uso de la metodología BEM, uso de fuentes, párrafos, animaciones mediante el uso de clases
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
¿QUÉ ES BEM?
BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML del documento. Es
decir, es una manera de nombrar las clases de los nodos de HTML para posteriormente aplicar directivas CSS de
una manera fácil, sencilla y clara.
El objetivo de BEM es dar transparencia y claridad en tu estructura HTML y CSS.
BEM define cómo se relacionan las clases entre sí, lo cual resulta muy útil en secciones complejas del
documento.
BEM se define en tres siglas.
• B de bloque: es una sección independiente que tiene significado propio por sí solo. Contiene todos los
nodos HTML de una estructura a la que hace referencia.
• E de elemento: fracciones más pequeñas internas a un bloque. Se usa para ir dividiendo el bloque en
segmentos más pequeños.
• M de modificador: modificar algunas propiedades de un bloque o elemento.
Ejemplo
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Metodología BEM, tipografía y animaciones
_______________________________________________________________________
La nomenclatura de BEM en CSS tiene la siguiente estructura:
CLASES CSS USANDO MÉTODO BEM
Bloque BEM
Es una sección de código HTML, una parte del documento con significado propio; puede ser simple o compuesto,
es decir, puede contener más bloques independientes.
Para nombrar un bloque, puedes utilizar letras, dígitos y guiones; pero, considerando las siguientes restricciones:
• No usar mayúsculas.
• No usar dos guiones bajos seguidos, porque está reservado para los elementos.
• No usar dos guiones seguidos, porque está reservado para los modificadores
Ejemplo
Diseño y Maquetación Web – Formación Continua
1
Diseño y Maquetación Web – Metodología BEM, tipografía y animaciones
_______________________________________________________________________
Diseño y Maquetación Web
Metodología BEM, tipografía y animaciones
Sesión 9
LOGRO DE LA SESIÓN
Conoce la importancia del uso de la metodología BEM, uso de fuentes, párrafos, animaciones mediante el uso de clases
MATERIALES
a) EQUIPOS: PC de escritorio / Laptop
b) HERRAMIENTAS: Visual Studio Code y sus extensiones
c) CONSUMIBLES:
PROCEDIMIENTO
¿QUÉ ES BEM?
BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML del documento. Es
decir, es una manera de nombrar las clases de los nodos de HTML para posteriormente aplicar directivas CSS de
una manera fácil, sencilla y clara.
El objetivo de BEM es dar transparencia y claridad en tu estructura HTML y CSS.
BEM define cómo se relacionan las clases entre sí, lo cual resulta muy útil en secciones complejas del
documento.
BEM se define en tres siglas.
• B de bloque: es una sección independiente que tiene significado propio por sí solo. Contiene todos los
nodos HTML de una estructura a la que hace referencia.
• E de elemento: fracciones más pequeñas internas a un bloque. Se usa para ir dividiendo el bloque en
segmentos más pequeños.
• M de modificador: modificar algunas propiedades de un bloque o elemento.
Ejemplo
Diseño y Maquetación Web – Formación Continua
, Guía de Taller
2
Diseño y Maquetación Web – Metodología BEM, tipografía y animaciones
_______________________________________________________________________
La nomenclatura de BEM en CSS tiene la siguiente estructura:
CLASES CSS USANDO MÉTODO BEM
Bloque BEM
Es una sección de código HTML, una parte del documento con significado propio; puede ser simple o compuesto,
es decir, puede contener más bloques independientes.
Para nombrar un bloque, puedes utilizar letras, dígitos y guiones; pero, considerando las siguientes restricciones:
• No usar mayúsculas.
• No usar dos guiones bajos seguidos, porque está reservado para los elementos.
• No usar dos guiones seguidos, porque está reservado para los modificadores
Ejemplo
Diseño y Maquetación Web – Formación Continua
