• WebDev
 

«Uno de los efectos mágicos de la organización es la confianza en tu capacidad de tomar decisiones.»

Marie Kondo 

Tanto si te encuentras iniciando en el arte del diseño y  el desarrollo web, como si ya tienes algo de experiencia, es posible que te hayas encontrado con código CSS difícil de leer y mantener. CSS es un lenguaje relativamente fácil de aprender al principio, sin embargo, la documentación, los cursos y algunos tutoriales existentes, difícilmente nos enseñan formas efectivas de organizarlo. En CSS se vale de todo, pues se permiten técnicas de CSS2 y de cada etapa histórica de la web, por tal motivo es muy común encontrarnos con hojas de estilo complejas y difíciles de modificar. En este post abordaré una de las arquitecturas de CSS que nos ayudarán a resolver el problema del código espagueti en las hojas de estilo.
Este es el primero de una serie en los que abordaré cada una de las arquitecturas CSS más relevantes.  Para comenzar me enfocaré en la arquitectura BEM.

¿Qué es BEM?

Es una metodología que nos ayuda a nombrar nuestras clases en HTML y CSS  mantener todo simple y escalar nuestro proyecto web. Fue desarrollada por Yandex la empresa más grande de tecnología de Rusia en el año 2010. Hoy en día ha sido adoptada por empresas como LinkedIn, Udemy, la BBC y JetBrains. Su nivel de complejidad es el punto medio entre la simplicidad de OOCSS y lo robusto de SMACSS, motivo que la ha vuelto muy popular en la actualidad y es el motivo por el que he decidido comenzar con BEM. Sus siglas significan: Block (bloque), Element (elemento), Modifier (modificador), es decir, Modificador de Bloques de Elementos.

¿Por qué BEM?

 

  • Es sencillo de entender
  • Su nomenclatura ayuda a mantener una buena comunicación entre diseñadores y desarrolladores.
  • Es fácil de implementar
  • Tiene un nivel de complejidad intermedio
  • Existe una extensa documentación
  • Resuelve algunos detalles que no resuelve OOCSS.

¿Cómo se usa?

Esta metodología tiene tres conceptos esenciales, si los comprendemos, lograremos implementar BEM en nuestros proyectos con éxito. Los conceptos son: Bloques, Elementos y Modificadores.

 

Bloques

El concepto es similar al de los bloques de lego —de ellos nace la inspiración para crear BEM—, un bloque es un componente independiente y reutilizable de  nuestro proyecto frontend. Los bloques nunca dependen de otros bloques para funcionar, sin embargo, se pueden anidar bloques dentro de otros, a este tipo de bloques les llamaremos bloques compuestos. Por tanto los bloques simples, son los que no tienen otros bloques dentro.

 

Ejemplos: checkbox, header, footer, search component, navigation component e input. 

¿Cómo nombrar bloques?

Los nombres que le demos a cada bloque deberán describir el propósito del mismo. Responderán a la pregunta: ¿Qué es?, no debemos nombrarlos con adjetivos o propiedades, puesto que esos serían estados del componente no el componente en sí. En caso que el nombre contenga más de una palabra, se deberán separar con el carácter: guión medio ()

<!– Forma correcta. el bloque `busqueda` tiene un significado semántico –>
<div class=”busqueda“></div>

<!– Forma incorrecta. El nombre describe la apariencia –>
<div class=”red-text“></div>

<!– Forma correcta. Bloques anidados –>
<div class=”busqueda“>

    <div class=”search-icon“></div>

    <input type=”text” class=”search-input“></div>

</div>

<!– Forma incorrecta. –>

<div class=”busqueda“>

    <div class=”search-icon-big“></div>

    <div class=”purple-input“></div>

</div>

Elementos

Son partes de la página o de la interfaz que no pueden existir por sí mismas y necesitan de un bloque. Un elemento siempre formará parte de un bloque. Estos deben nombrarse con dos guiones bajos luego del nombre del bloque.

Los elementos se pueden anidar sin importar la cantidad de niveles de anidación. Estos solamente pueden ser parte de bloques, nunca de otros elementos.

Ejemplos:  menu item, header title, list item.

¿Cómo nombrar elementos?

Al igual que con los bloques, sus nombres describirán el propósito del elemento, también responden a la pregunta: ¿Qué es?, no debemos nombrarlos como características pues una característica sería más un estado del elemento que un elemento en sí. Para identificarlos es necesario escribir el nombre del bloque seguido de dos guiones bajos y el nombre del elemento.

bloque__elemento

<!– El bloque `busqueda` tiene un significado semántico –>
<form class=”busqueda“>

    <!– Elemento de entrada del componente busqueda–>
    <input class=”busqueda__input“>

 

    <!– Elemento botón del componente busqueda–>

    <button class=”busqueda__button“></button>

 

</form>

Ejemplos de anidación:
<!– Forma correcta –>
<form class=”busqueda“>

    <div class=”busqueda__content“>

        <!– Elemento de entrada del componente busqueda–>
        <input class=”busqueda__input“>

        <!– Elemento botón del componente busqueda–>

        <button class=”busqueda__button“></button>

    </div>

</form>

<!– Forma incorrecta –>
<form class=”busqueda“>

    <div class=”busqueda__content“>

        <!– Elemento de entrada del componente busqueda–>
        <input class=”busqueda__content__input“>

        <!– Elemento botón del componente busqueda–>

        <button class=”busqueda__content__button“></button>

        <button class=”busqueda__content__busqueda__content__button“></button>

    </div>

</form> 

Modificadores

Este es un concepto muy interesante, pero donde es muy común confundirse. Los modificadores son clases que nos permitirán cambiar solamente la apariencia de nuestros bloques y/o elementos. Estos no deben usarse sin antes declarar un bloque o un elemento. Para nombrar un modificador, usaremos adjetivos o nombres de características que nos faciliten comprender qué hace la clase. Los nombres responderán a la pregunta: ¿Cómo se ve?.

Gracias a este tipo de clases podremos tener uno o varios looks para nuestras pantallas, por ejemplo podríamos crear temas compuestos por varios modificadores para que la app tenga una versión clara y otra oscura.

La manera de nombrar un modificador es: bloque__elemento–modificador

<!– Forma correcta –>
<form class=”busqueda busqueda–dark“>

    <div class=”busqueda__content“>

        <!– Elemento de entrada del componente busqueda–>
        <input class=”busqueda__input“>

        <!– Elemento botón del componente busqueda y su modificador–>

        <button class=”busqueda__button busqueda__button–big“></button>

    </div>

</form>

<!– Forma incorrecta –>
<form class=”busqueda–dark“>

    <div class=”busqueda__content“>

        <!– Elemento de entrada del componente busqueda–>
        <input class=”busqueda__input“>

        <!– Elemento botón del componente busqueda y su modificador–>

        <button class=”button–big“></button>

    </div>

</form>

Si el contenido del post te fue de utilidad o deseas opinar al respecto, deja tu comentario en la sección de abajo. Tu opinión es importante para mí, pues la idea de este espacio es crecer y mejorar cada día.

Sin más, te deseo increíbles creaciones.

Por cierto…

⚔️ Pase lo que pase, sigue mejorando. 🏹

EnglishPolishSpanish

Pin It on Pinterest