BEM (Block-Element-Modifier) es una metodología de desarrollo web , así como un conjunto de librerías de interfaz, frameworks y herramientas auxiliares.
"Bloque", "elemento" y "modificador" son los términos básicos de BEM. Estos son conceptos necesarios y suficientes para describir una interfaz de cualquier complejidad.
BloqueUn bloque es un componente de interfaz independiente. Un bloque puede ser simple o compuesto (contener otros bloques). Al crear un bloque, debe asegurarse de que pueda usarse en cualquier parte de la página web, así como repetirse en el mismo lugar de la página (el elemento principal). El bloque debe incluir toda la implementación necesaria para representar la parte de la interfaz que expresa.
ElementoUn elemento es un componente de un bloque. Los elementos son sensibles al contexto: solo tienen sentido dentro de su bloque. Un elemento es un componente opcional de un bloque; los bloques pequeños funcionan sin elementos.
ModificadorUn modificador es una propiedad de un bloque o elemento que especifica cambios en su apariencia o comportamiento. El modificador puede ser un valor booleano (por ejemplo , button_big) o un par clave-valor (por ejemplo menu_type_bullet, , menu_type_numbers). Un bloque o elemento puede tener múltiples modificadores al mismo tiempo.
BEM ofrece un modelo semántico común para todas las tecnologías utilizadas en el desarrollo front-end (HTML, CSS, JavaScript, plantillas, etc.)
Usando los conceptos de "bloque", "elemento" y "modificador" es posible describir la estructura de árbol del documento. Tal descripción se llama árbol BEM y es una representación semántica de la interfaz, una abstracción sobre el árbol DOM.
En HTML / CSS , los bloques, elementos y modificadores se representan como clases CSS nombradas de acuerdo con la convención de nomenclatura. Se pueden ubicar varios bloques en el mismo nodo DOM, en cuyo caso al nodo DOM se le asignan 2 clases CSS. Un bloque y un elemento de otro bloque también se pueden ubicar en el mismo nodo DOM.
Reglas de nomenclatura para las clases BEM de YandexLa clase CSS del bloque coincide con el nombre del bloque. Se utiliza un guión para separar palabras en nombres de bloques complejos.
<div clase= "encabezado" > ... </div> <ul clase= "menú" > ... </ul> <span class= "botón" > ... </span> <div class= "panel con pestañas" > ... </div>La clase CSS de un elemento contiene el nombre del bloque y el nombre del elemento, separados por dos guiones bajos.
<div clase= "encabezado" > <div clase= "encabezado__fondo" > ... </div> </div> <ul class= "menu" > <li class= "menu__item" > ... </li> </ul> <span class= "botón" > <input class= "button_control" > ... </input> </span> <div class= "panel con pestañas" > <div class= "panel con pestañas__panel" > ... </div> </div>La clase CSS del modificador contiene el nombre del bloque y el nombre del modificador separados por un solo guión bajo. En el caso de que el modificador sea un par clave-valor, también se separan con un guión bajo. Para un modificador de elemento, tanto el nombre del bloque como el nombre del elemento se almacenan en la clase CSS. La clase CSS modificadora se usa junto con su clase de bloque (o elemento).
<div class= "header header_christmas" > ... </div> <!-- Edición navideña del encabezado --> <ul class= "menu" > <li class= "menu__item menu__item_current" > ... </li> </ul> <span class= "botón button_theme_night" > ... </span> <div class= "panel con pestañas panel con pestañas_deshabilitado" > ... </div> Convenciones de nomenclatura de clases BEM por Harry RobertsHarry Roberts [1] ha propuesto convenciones de nomenclatura alternativas . Aconseja usar 2 guiones para separar los nombres de bloques y elementos del modificador.
<div class= "header header--navidad" > ... </div> <!-- Edición navideña del encabezado --> <ul class= "menu" > <li class= "menu__item menu__item--current" > ... </li> </ul> <span class= "botón botón--theme_night" > ... </span> <div class= "panel con pestañas panel con pestañas--deshabilitado" > ... </div> PrefijosAlgunas convenciones de nomenclatura recomiendan el uso de prefijos . Entonces, todas las clases de bloques pueden comenzar con el prefijo b-.
<div class= "b-encabezado" > ... </div> <ul class= "b-menú" > ... </ul> <span class= "botón-b" > ... </span> <div class= "b-tabbed-pane" > ... </div>A veces se utiliza como prefijo el nombre abreviado del proyecto. Por ejemplo, OrangePool->op.
<div class= "op-header" > ... </div> <ul class= "op-menú" > ... </ul> <span class= "botón de operación" > ... </span> <div class= "op-tabbed-pane" > ... </div>En BEM , JavaScript funciona con la estructura abstracta de elementos de bloque y modificadores sin acceder directamente a los nodos DOM subyacentes y sus clases CSS. Además, no se utilizan clases CSS "específicas de JavaScript" adicionales para identificar los nodos DOM. Para brindar esta posibilidad, se utiliza un marco o su propio conjunto de ayudantes.
Ayudantes para trabajar con la estructura BEMEntonces, si cada bloque con funcionalidad JavaScript corresponde a un objeto, sus métodos permiten:
Dado que el modificador refleja el estado del bloque, cuando se asigna el modificador, el bloque o elemento debe llevarse al estado apropiado. Para cambiar la apariencia, basta con asignar una clase CSS modificadora. En casos más complejos, llevar el bloque al estado deseado requiere la funcionalidad de JavaScript. Por lo tanto, el marco de JavaScript utilizado debe poder declarar una lista de acciones correspondientes al modificador.
BloqueObj . on ({ active : function () { // hacer algo cuando esté activo }, disabled : function () { // hacer algo cuando esté desactivado } }); i-bem.jsHasta la fecha, el marco i-bem.js(parte de la biblioteca bem-core) ofrece la implementación más completa de los principios BEM en JavaScript. Puede encontrar información sobre el marco y ejemplos de uso en las páginas:
En el sistema de archivos, los bloques, elementos y modificadores se representan como archivos de sus implementaciones en varias tecnologías web. Los archivos que pertenecen a un bloque se combinan en un directorio.
Estructura planaLa estructura de proyecto más simple no implica anidar en el directorio de bloques:
botón/ botón.css botón.js botón.tpl button_control.css encabezamiento/ encabezado.css encabezado.tpl encabezado_navidad.css panel con pestañas/ panel con pestañas.css tabbed-pane.js tabbed-pane.tpl Estructura anidadaEn proyectos o bibliotecas grandes, es conveniente utilizar una estructura de archivos de bloques anidados, donde se asignan directorios para elementos y modificadores.
botón/ __control/ button_control.css botón.css botón.js botón.tpl encabezamiento/ _Navidad/ encabezado_navidad.css encabezado.css encabezado.tpl panel con pestañas/ panel con pestañas.css tabbed-pane.js tabbed-pane.tplLa metodología fue desarrollada por Yandex y es ampliamente utilizada en los productos de esta empresa [2] .
Ha encontrado aplicación como parte de un marco HTML5 especialmente desarrollado para rediseñar y refactorizar el servicio de correo mail.ru [3] [4] .
La misma metodología, entre otras cosas, fue utilizada por la compañía de radio y televisión BBC al desarrollar su nuevo sitio web [5] .
BEM también se utiliza en el lanzamiento de Material Design Lite de Google en 2015 , un marco HTML5 como Twitter Bootstrap que admite el diseño de materiales [6] .
| Web y sitios web | |
|---|---|
| globalmente | |
| En la zona | |
| Tipos de sitios y servicios |
|
| Creación y mantenimiento | |
| Tipos de diseños, páginas, sitios. | |
| Técnico | |
| Marketing | |
| sociedad y Cultura | |