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.

Detectando imágenes sin alt mediante CSS

En una micropublicación de Addy Osmani, muestra un pequeño truco para visualizar de forma clara cuando una imagen no tiene alternativa textual (atributo alt):

img:not([alt]){
    border: 5px solid red;
}

De esta manera, veremos un llamativo y grueso borde de 5 pixels rojo en las imágenes que probablemente estén incumpliendo una regla básica de accesibilidad web (tal vez sean decorativas, pero no es lo habitual).

Una alternativa —también propuesta por el mismo autor—, aprovecha una interesante y potente característica de CSS3: la aplicación de filtros en imágenes.

img:not([alt]){
    filter:blur(5px);
}

Y como consecuencia, veremos las imágenes sin alternativa textual desenfocadas.

Más allá del aspecto cómico que pueda tener el mostrar una imagen desenfocada, y dar a entender que no se ha cargado correctamente, creo que en situaciones en los que sea factible incluir imágenes sin textos alternativos —ya sea por los editores encargados de generar contenidos, o el propio software de creación de contenidos—, creo que no viene mal incluirlo en las hojas de estilos utilizadas, aunque sea en entornos previos (desarrollo, pre-producción, QA).

Porque, pasa el tiempo, y todavía tenemos que seguir insistiendo en las ventajas de la accesibilidad web, y la satisfacción del trabajo bien hecho: por los editores y desarrolladores. Pero sobre todo por los usuarios. Por todos.


Por cierto: blog posible comenzó su historia en el lejano año 2005. Estuvo funcionando hasta el 2008, en el que por diversos motivos, decidí aparcar este blog (junto con web es móvil) y empezar de nuevo, con Xposible.

Más tarde, empecé a utilizar tumblr (¿cómo se pronuncia?) haciendo blogs temáticos, en los que básicamente, incluía enlaces (lo contaba en asuntos varios y ahí puedes encontrar los enlaces).

Hoy, casi doce años después de la última publicación, vuelvo a escribir de nuevo aquí.

Probablemente este blog se nutra de esos enlaces y recursos pero utilizando y revitalizando webposible.  Mientras muchos blogs de aquella época, continúan en estado zombie o directamente han desaparecido, yo vuelvo tras un descanso de casi doce años. Cuento contigo.

Expresiones de Zen en los bonsais y su aplicación en el diseño web

Leyendo el título, parece que el discurso de este artículo va a tratar sobre CSS Zen Garden, y las virtudes de separar la presentación del contenido en una página web. Pero no es así, aunque todo puede ocurrir 🙂

Comencemos por el principio. Hace poco he pedido prestado de la biblioteca un libro:

Título
Bonsai
Autor
Peter Chan
ISBN:
84-329-1659-5

En las primeras páginas de este libro se habla de los principios estéticos chinos y japoneses, que tienen su origen en el taoísmo y el zen (budismo chino-japonés). Estos principios son los conceptos de wabi y sabi. Lo que cuento a continuación, se ha extraído de ese libro. No es una copia literal, pero se parece bastante 🙂

Wabi y sabi

Literalmente, wabi significa pobreza. Pero maticemos más este concepto, no se trata de tener o no tener posesiones, hablamos de la no dependencia de las posesiones materiales. Quiere decir que una persona puede ser rica interiormente, teniendo pocas posesiones.

Desde el punto de vista intelectual o artístico, el wabi se asocia con las cosas simples de la vida, con las personas que no caen en complejidades estructurales, ni en el exceso de adornos. Como dijo el poeta “una cruz más sencilla carpintero”.

Sabi significa soledad. Pero de nuevo hay que matizar el concepto para entender mejor sus implicaciones en términos estéticos. El término sabi está relacionado con la antiguedad, como por ejemplo con los utensilios usados en la antigua ceremonia del té. Así, también puede significar imprerfección antigua a propósito y ausencia de sofisticación.

Uniendo estos dos conceptos, obtenemos siete características que se consideran expresiones Zen de una obra de arte.

  • Wabi: Libertad de ataduras, profundidad sutíl
  • Sabi: Sublimidad austera, asimetría
  • Wabi y Sabi: Simplicidad, tranquilidad, naturalidad.

Y ahora desarrollemos un poco estos conceptos

  • Asimetría: En los bonsais (¿recordáis?, hablámos de un libro de bonsais), la mayoria de los diseños son asimétricos en la forma y el balance. Muy pocas composiciones necesitan ser simétricas: la armonía se consigue mediante un balance de la masa visual, el espacio abierto (o espacio en blanco) y las proporciones adecuadas.
  • Simplicidad: A veces, en campos como la filosofía y la ciencia, los pensamientos más profundos se expresan en términos simples. Un exceso de decoración (hablando de bonsáis) en la maceta o el árbol, resta méritos al diseño.
  • Sublimidad austera: Todas las partes sobrantes deben ser eliminadas, manteniendo únicamente los elementos esenciales que se requieren para transmitir el mensaje del artista. Un bonsái se puede diseñar mediante una aproximación minimalista: fuertes líneas del tronco y pocas ramas y follaje.
  • Naturalidad: El propósito de los bonsáis es crear una obra “natural” en una maceta. Debe evitarse cualquier rastro de artificialidad: el objetivo es observar y copiar las características de la naturaleza para crear una impresión de lo accidental ó incidental. Como si no se hubiese tocado por el hombre.
  • Profundidad sutil: Es un término complejo, y de difícil transmisión implica insinuaciones de inagotabilidad y reverberaciones interminables. Hay una sugestión de profundo espacio que implica alguna escondida habilidad o cualidad.
  • Libertad de ataduras: Romper con los convencionalismos, costumbres, ser original,…
  • Tranquilidad: Esta característica, un profundo sentimiento de calma profunda y reposo, está muy asociada al arte chino y japonés y también está presente en los bonsáis.

Después de toda esta explicación, conviene recordar el diseño original de CSS Zen Garden, y visitarlo de nuevo. ¿Comprendéis mejor el diseño ahora?

Si de vuelves atrás, a ojear las características consideradas como expresiones Zen de una obra de arte (ya sabes, asimetría, simplicidad,…) perfectamente se pueden extrapolar a otros ámbitos de la web, como por ejemplo la usabilidad (al menos con algunas características), o incluso el código fuente de una página web (ya sabéis the code is poetry).

Quizás esta analogía te parece demasiado forzada. Ten en cuenta que cuando empezé a escribir esto, estaba de baja con faringitis, otitis y una infección en un ojo. De todas formas te reto, de forma elegante y amistosa, a encontrar similitudes con otras obras, artes, escritos, libros,… que aparentemente estén muy alejando del diseño web. Por pura diversión. 🙂