Categorías
CSS

Metodología BEM: Block, Element, Modifier de CSS

La metodología BEM fue desarrollada por el equipo que trabaja en yandex (una empresa de tecnología de origen ruso).

El objetivo principal de la metodología es mejorar la organización de CSS utilizando una nomenclatura para los nombres de clases compuesto por:
* El nombre del bloque HTML
* El elemento dentro de ese bloque
* Un modificador, que define la apariencia, estado o comportamiento.

Veamos un ejemplo (adaptado de la documentación oficial):

<!-- bloque `search-form` -->
<form class="search-form">
    <!-- elemento `input` element del bloque `search-form` -->
    <input class="search-form__input">

    <!-- elemento `button` del bloque `search-form` -->
    <button class="search-form__button">Buscar</button>
</form>

Ventajas:

  • Ofrece un sistema para organizar y nombrar clases.
  • Permite trabajar de forma coordinada y asíncrona a los miembros de un equipo.
  • Permite conocer de un vistazo la estructura, tanto del documento HTML, como de las clases CSS.
  • Permite evolucionar y modificar elementos con facilidad (creando clases de modificadores)

Inconvenientes:

  • Hay que ajustarse a las normas y reglas de la metodología.
  • La cantidad de clases utilizadas puede ser más elevada que otras alternativas.
  • La teoría de que cambiando una clase se cambia el aspecto de una web, no aplica aquí: para ser coherente hay que crear clases que modifique el aspecto de los elementos, y añadirlos al código HTML.
Categorías
CSS

Aprender de una vez posicionamiento CSS

Ahora hay más alternativas en CSS, pero una de las cosas que más me ha costado aprender es el posicionamiento CSS.

Bueno, pues hay un simpático tutorial para refrescar, o aprender de una vez: Learn CSS Positioning.