UNIVERSIDAD NACIONAL SAN CRISTÓBAL DE

HUAMANGA
Facultad de Ingeniería de Minas, Geología y Civil
Escuela Profesional de Ingeniería de Sistemas

METODOLOGÍA BEM

DOCENTE:

CURSO:

DESARROLLO WEB (LABORATORIO)

ALUMNOS:

AYACUCHO – PERÚ
2021
 ÍNDICE
INTRODUCCIÓN 03
DESARROLLO DE ESTUDIO 04
1.1 Definición de la metodología BEM 04
1.2 Importancia del uso de la metodología BEM 06
1.3 Comparativa con otras metodologías CSS (OOCSS, SMACSS u 06
otras)
VENTAJAS E INCOVENVENIENTES DEL EMPLEO DE LA 07
METODOLOGÍA BEM
2.1 Ventajas 07
2.2 Desventajas 07
APLICACIÓN DE LAMETODOLOGÍA BEM A TRAVÉZ DE UN 08
EJEMPLO
CONCLUSIONES 10
RECOMENDACIONES 11
BIBLIOGRAFÍA 12
ANEXOS 13
 INTRODUCCIÓN
Las metodologías CSS ayudan a describir código CSS más predecible,
reutilizable, mantenible y escalable dentro de las cuales se encuentran (OOCSS,
BEM, SMACSS, ITCSS, Atomic Desing) cada una de estas arquitecturas tiene
ventajas y desventajas, aunque cada metodología tiene una curva de aprendizaje
distinta pasando por ser fáciles de aprender hasta mantener una estructura
estricta y flexible. El uso de las metodologías no responde a formulas ni a casos
específicos de desarrollo ya que la metodología tiene que adaptarse a quienes lo
usen teniendo en cuenta la comodidad y facilidad de entendimiento para su
aplicación continua ya que ofrece beneficios de tener CSS y UI mejor
estructurada. En este informe se abordará la metodología BEM (Block Element
Modifier) ya que viene a ser la metodología más usada además de que por sus
siglas se sugiere una manera estructurada de nombrar las clases, basado en las
propiedades del elemento en cuestión
 DESARROLLO DEL ESTUDIO

1.1 Definición de la Metodología BEM

La metodología BEM (Block Element Modifier), es una metodología ágil de
desarrollo basada en componentes. Fue creada por la empresa Yandex para
desarrollar sitios en poco tiempo y con un soporte de largo plazo.
Este método nos propone dividir la interfaz de usuario en bloques independientes
para crear componentes siendo usado para que nuestras hojas de estilo, CSS,
SASS, LESS sean fácil de escalar, mantener, reutilizar a lo largo de un proyecto
o nuevos proyectos.
Propone un estilo descriptivo para nombrar cada una de las clases a utilizar,
permitiendo así crear una estructura de código consistente.
Cuando se utiliza la metodología BEM, debemos tener en cuenta que solo
usaremos nombres de clase (no ID). Los nombres de clase permiten repetir el
nombre BEM si es necesario, y crear una estructura de codificación más
consistente (tanto en los archivos HTML como CSS / Sass). Ahora vamos a
descomponerlo:

• Bloques: Es el contenedor donde se ubicarán los diversos elementos, que

serán cada una de las partes del contenedor padre. Para aclarar esto las
siguientes etiquetas HTML son consideradas bloques a simple vista:
header, sidebar, aside, main, footer, article, section, ul, ol, div. El Bloque
se define siempre primero que sus elementos o modificadores, una vez
definido podremos trabajar de la siguiente manera:

HTML

CSS

• Elementos: El elemento son diversas partes que compondrán a un bloque

y jamás existirán sin la previa definición de este. El método BEM nos indica
 que cada elemento nace a partir de la clase del bloque que conforma
seguida de dos guiones bajos y el nombre clave del elemento.
De acuerdo a la metodología BEM, cada elemento se escribe después del
bloque padre, usando dos guiones bajos:

HTML

CSS

Al convertirse en el centro de los nombres de las clases, los elementos ayudan

a entender cómo estructurar y manejar las hojas de estilos una vez que se
empiece a diseñar el proyecto. Por esto, es importante usar nombres claros y
precisos.

• Modificadores: El ejercicio de nombrar las clases sirve para que los

elementos puedan repetirse. Si los elementos son los mismos, no será
necesario escribir nuevas clases en otras áreas del sitio. Para modificar el
estilo de un elemento específico, existen los modificadores. Estos se usan
agregando un doble guion justo después del elemento o bloque que se
quiere modificar:

HTML

CSS

5
 1.2 Importancia del uso de la Metodología BEM
Es importante porque nos puede ayudar a estructurar nuestro código CSS: a
mantenerlo limpio, reusable y mucho más semántico.
BEM requiere de una planificación previa, donde el diseñador y el desarrollador
trabajen en conjunto, identificando todos los Bloques de diseño, sus Elementos,
y si tienen o no Modificadores.
La metodología BEM ayuda a que un equipo se entienda de una forma más
amigable y que no exista ningún conflicto a la hora de realizar código, siempre y
cuando el equipo siga las reglas básicas de BEM.
1.3 Comparativa con otras metodologías CSS (OOCSS, SMACSS, u
otras)

Object-Oriented CSS (OOCSS): Fue desarrollada por

Nicole Sullivan en 2008 y se basa en dos principios
básicos:

• Separar la estructura del diseño (en inglés lo

describen como skin, piel).
OOCSS • Separar contenedor del contenido.

Igual que cualquier lenguaje de programación

orientado a objetos la finalidad es la re-utilización,
incrementar la velocidad y eficiencia de nuestras hojas
de estilo haciéndolas más fáciles de mantener.

Scalable and Modular Architecture for CSS

(SMACSS): Desarrollado en 2011 por Jonathan Snook,
SMACSS funciona mediante organización de las reglas
CSS en 5 categorías.
SMACSS • Base
• Maquetación
• Módulo
• Estado
• Tema

Scalable and Maintainable CSS Architecture - Xfive:

ITCSS es una arquitectura que tiene como principal
objetivo estructurar la forma en la que escribimos CSS.
ITCSS Uno de los principios clave de ITCSS es que separa su
base de código CSS en varias secciones (llamadas
capas), que toman la forma del triángulo invertido.
Esas capas son las siguientes:

6
 • Configuración
• Herramientas
• Genérico
• Elementos
• Objetos
• Componentes
• Utilidades

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:
• Átomos
Atomic Design • Moléculas
• Organismos
• Plantillas
• Páginas

VENTAJAS E INCONVENIENTES DEL EMPLEO DE LA METODOLOGÍA BEM.

2.1 Ventajas:
• Añade especificidad: Usa un selector único para cada regla, lo que
permite reducirla y hacer menos repeticiones.
• Aumenta la independencia: Los bloques se pueden mover a cualquier
parte del documento, sin afectar los estilos.
• Mejora la herencia múltiple: Se puede cambiar cualquiera de las tres
partidas sin afectar a las demás.
• Permite la reutilización: Es posible reciclar ciertas áreas de código desde
un proyecto hacia otro, esto debido a la no existencia de dependencias
mayores en cuanto a la implementación de cada uno de los bloques
estructurados.
• Entrega simplicidad: Permite un fácil entendimiento una vez conocido el
proceso lógico sobre el cual se basa. A su vez, las convenciones a la hora
de nombrar las clases permiten tener un control absoluto al saber a qué,
quién y hacia dónde hacemos referencia dentro de una estructura.

2.2 Desventajas:
• Las convenciones pueden ser muy largas.
• A algunas personas les puede tomar tiempo aprender la metodología.
• El sistema de organización puede ser difícil de implementar en
proyectos pequeños

7
APLICACIÓN DE LAMETODOLOGÍA BEM
EJEMPLO:

8
9
 CONCLUSIONES
Observando el ejemplo de la aplicación de la metodología en mención pudimos
observar que el código se mantiene limpio, reusable con una semántica más
entendible además que la identificación de estructuras tanto en HTML y CSS es
más rápida y contando con una clase con comportamientos independientes, a
pesar de los beneficios que pudimos observar podría desalentar al uso de esta
metodología los nombres de las clases que tienden a alargarse dado que se tiene
que hacer una especificación en cada clase su uso y porqué pero la adaptación
a esta metodología podría ser mucho más ventajosa.

10
 RECOMENDACIONES

• El uso de BEM podría requerir una planificación previa entre los

integrantes del proyecto para la identificación de los bloques, elementos y
si es que lo requiere de sus modificadores. Al empezar a usar esta
metodología podría ser desalentador el uso de tanta escritura para las
clases, pero podría tener ventajas a largo plazo y si no es el caso también
podría elegir entre las otras estructuras CSS o incluso el aprendizaje de
módulos CSS o CSS in JS que surgen a partir de framewoks tales como
React o VUE, ya que también son válidas para la construcción de una
estructura limpia y ordenada.
• Cabe destacar que es posible aplicar esta metodología en diferentes
lenguajes y contextos. Por ejemplo, destacando la estructuración en
HTML5, en CSS y sus preprocesadores (como SASS o LESS) y en
programación con JavaScript, considerando su utilización en frameworks
como AngularJS o ReactJS. Además, se puede usar en la organización a
nivel de archivos y cualquier otro sistema en el que sea necesario
mantener un orden modular.

11
 BIBLIOGRAFÍA
https://www.instintoprogramador.com.mx/2019/05/estilo-convenciones-y-
metodologias.html
https://medium.com/williambastidasblog/metodolog%C3%ADas-o-
arquitecturas-css-oocss-bem-smacss-itcss-atomic-design-a1a3cfbfa6c9
https://www.espai.es/blog/2016/07/metodologias-css-oocss-bem-smacss/
https://www.instintoprogramador.com.mx/2019/05/estilo-convenciones-y-
metodologias.html
https://programacion.net/articulo/introduccion_a_itcss_para_desarrollador
es_web_1545

12
ANEXOS

13