Skip to content
Alebat

BEM (Block, Element, Modifier) en CSS

La metodología BEM (Block, Element, Modifier) es una convención de nomenclatura para las clases en HTML y CSS que busca mejorar la organización y mantenibilidad del código, facilitando la comprensión y la colaboración entre desarrolladores. Aunque BEM no está directamente relacionado con la accesibilidad, sí puede influir en la forma en que se estructura y se escribe el CSS, lo cual puede tener implicaciones indirectas en la accesibilidad del sitio web. A continuación, se presenta una guía sobre cómo aplicar BEM en el desarrollo de un sitio web, con un enfoque en cómo esto puede facilitar la accesibilidad.

Introducción a BEM

BEM se basa en tres componentes:

  • Block: Representa un componente independiente y reutilizable. Por ejemplo, header, menu, button.
  • Element: Es una parte de un bloque que no tiene sentido por sí mismo fuera de su contexto. Por ejemplo, menu__item, button__icon.
  • Modifier: Es una variante o extensión de un bloque o elemento. Por ejemplo, button--large, menu--horizontal.

Aplicación de BEM para Mejorar la Accesibilidad

  1. Organización del Código: BEM ayuda a organizar el CSS de manera lógica y coherente. Esto facilita la comprensión de cómo se aplican los estilos a los elementos, lo cual es crucial para asegurar que las clases se utilicen de manera que no interfieran con la accesibilidad.

  2. Reutilización de Componentes: Al definir componentes de manera clara y reutilizable, se reduce la posibilidad de errores y conflictos de estilos que podrían afectar la accesibilidad.

  3. Estilos Modulares: BEM promueve el uso de estilos modulares y específicos, lo que puede facilitar la aplicación de estilos de accesibilidad, como aumentar el tamaño de la fuente para mejorar la legibilidad.

Ejemplos de BEM en la Práctica

Ejemplo de Bloque y Elemento

<div class="block">
  <div class="block__element"></div>
</div>
.block {
  background-color: #f5f5f5;
  padding: 10px;
}


.block__element {
  color: #333;
  margin-bottom: 10px;
}

Ejemplo de Modificador

<div class="block block--modifier">
  <div class="block__element"></div>
</div>
.block {
  background-color: #f5f5f5;
  padding: 10px;
}


.block--modifier {
  background-color: #fff;
}


.block__element {
  color: #333;
  margin-bottom: 10px;
}

Consideraciones de Accesibilidad con BEM

  • Contraste de Color: Asegúrate de que los colores utilizados en tus bloques y elementos cumplan con las directrices de accesibilidad para el contraste. Utiliza herramientas como a11y.css para verificar el contraste.

  • Navegación por Teclado: Al utilizar BEM para estructurar tu HTML, asegúrate de que la navegación por teclado sea coherente y accesible. Esto incluye el uso de atributos ARIA cuando sea necesario.

  • Tamaño de Fuente Legible: Considera la posibilidad de proporcionar opciones para ajustar el tamaño de la fuente en tus bloques, especialmente en aquellos que contienen texto importante.

  • Etiquetas y Roles ARIA: Utiliza BEM para organizar y estructurar tu HTML de manera que facilite la aplicación de etiquetas y roles ARIA, mejorando así la accesibilidad para tecnologías de asistencia.

Implementar BEM en tu proyecto puede no solo mejorar la organización y mantenibilidad del código, sino también facilitar la implementación de prácticas de accesibilidad. Al seguir las convenciones de BEM, puedes asegurarte de que tu código sea más predecible y fácil de entender, lo que a su vez puede facilitar la identificación y corrección de problemas de accesibilidad.

Vídeo explicativo

Video BEM