Ya está aquí la función de copiar y pegar entre sitios. Ahora, veamos cómo aprovecharla al máximo.
Ahora que copiar y pegar entre proyectos es una realidad, los diseñadores de Webflow de todo el mundo están dando saltos de alegría. Y lo mejor: ¡la modularidad al máximo! Además de causar furor, esta función hace que poner nombres claros a los elementos sea vital para poder reutilizarlos sin complicaciones.
Solo hay dos problemas difíciles en informática: la invalidación de caché y poner nombres a las cosas.
— Phil Karlton
¿Por qué es importante poner nombres? Pues porque si nombras los elementos sin ton ni son, acabarás con un CSS imposible de mantener.
¿Un CSS imposible de mantener?
¡Ni hablar!
—yo, tú, todos nosotros.
Aquí entra BEM, una de las convenciones de nombres más fiables para tu proceso de diseño. En este artículo, analizaremos a fondo qué es BEM y qué puede aportar a tu trabajo. Y mejor aún, te daremos una excusa para clonar este proyecto y hacerlo tuyo.
Entonces… ¿qué es BEM?
BEM significa bloque (block), elemento (element) y modificador (modifier). Es una convención de nombres que divide la interfaz en componentes pequeños y reutilizables, preparándonos para cualquier cambio en el diseño de nuestros sitios web.
Esta convención también potencia la función de copiar y pegar entre sitios, ya que ayuda a convertir los elementos en componentes reutilizables.
Así es como se ve la convención BEM visualmente:
¿Te has perdido? No te preocupes, vamos a desglosarlo.
La convención BEM te ayuda a organizar las cosas de una forma que ya conoces. Por ejemplo, piensa en cómo está organizado tu cuerpo: tienes cabeza, torso, piernas, pies, etc. Cada parte forma parte del cuerpo y, a su vez, puede dividirse en partes más pequeñas.
Tu cabeza está formada por dos ojos, una boca, una nariz, etc.
Esta forma de organizar es exactamente como funciona BEM, pero aplicada a los elementos de tu sitio web.
Echemos un vistazo a la estructura BEM.
B es de bloque
Los bloques, representados en verde en la imagen de arriba, son elementos de alto nivel y autónomos, como una navegación, un menú, elementos hero o cualquier entidad independiente. Los elementos de bloque tienen sentido por sí mismos.
Nombrar bloques
Empecemos por nombrar la navegación: .c-menu { }
¡Qué bien!
¿Por qué c-, preguntas? Significa "componente" y es la base de cómo organizo mis clases BEM en Webflow.
Un espacio de nombres nos indica exactamente qué hace una clase (o un grupo de clases) en términos no relativos y cómo se comportan en un sentido más global. Profundizaremos en los espacios de nombres, ya que son súper útiles.
E es de elemento
Ya tenemos dominada la parte del bloque de BEM, así que vamos a profundizar en el elemento. Los elementos, representados en azul, son la siguiente pieza de construcción en nuestra estructura BEM.
Por ejemplo, el bloque de menú incluye dos elementos: enlaces de navegación y enlaces sociales. Los enlaces de navegación y sociales son como hijos del bloque de menú principal.
Nombrar elementos
Vale, ya entendemos que la "E" de BEM es un elemento. Nombrar elementos es tan fácil como nombrar bloques.
Creamos nombres de clase para elementos empezando por el bloque, añadiendo dos guiones bajos y, a continuación, el nombre del elemento. Por ejemplo: .c-menu__nav-link {}.c-menu__social-link {}
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
M es de modificadores
¡Vale, ya casi estamos! Nombrar nuestros elementos fue pan comido. Ahora, vamos a profundizar en la "M" de BEM: los modificadores.
Como su nombre indica, los modificadores indican variaciones o cambios en los elementos. En la imagen de abajo, todas las clases etiquetadas representan texto que aparece en el hero del sitio. La principal diferencia entre ellas es su tamaño: de ahí los modificadores small (pequeño) y big (grande).
Los modificadores están representados en amarillo en nuestra imagen de ejemplo:
Nombrar modificadores
Ya tenemos este tema de los nombres casi dominado. Pero, ¿qué pasa con los bloques o elementos que solo son ligeramente diferentes? ¿Y si necesitáramos modificar toda la navegación? ¿Cómo llamaríamos al elemento si a veces necesitáramos una navegación blanca o transparente en nuestro sitio web? Estas preguntas también podrían aplicarse a ejemplos como un botón rojo o azul. Todas estas son modificaciones del bloque. Los modificadores amplían el estilo de los bloques y elementos. Esta extensión se reconoce rápidamente en cómo se nombran los modificadores.
La forma BEM directa de añadir un modificador es crear un nombre de clase de modificador añadiendo dos guiones "--" después del nombre del bloque. Al usar BEM con Webflow, creamos nombres de clase de modificador añadiendo una clase combinada ".is". Por ejemplo: .c-nav .is--white {}.c-nav .is--transparent {} El ejemplo anterior muestra cómo modificar un bloque. También podemos modificar elementos de la misma manera.
Recuerda, el elemento es un hijo dentro del bloque contenedor. .c-hero representa el bloque y .c-hero__text el elemento. Como se ve en el ejemplo anterior, podemos usar guiones dobles así: .c-hero__text .is--small {}.c-hero__text .is--big {} De nuevo, observa el uso de los guiones dobles en el ejemplo anterior para mostrar un modificador. ¡Ya lo tenemos! Así es como funciona la convención de nombres BEM. Consejo profesional: mantén los nombres de las clases cortos. Usa solo acrónimos que tus compañeros reconozcan y cuando sea apropiado.
BEM en Webflow
Un recordatorio rápido: las clases funcionan de dos maneras en Webflow:
1. Clases globales
Las clases de Webflow funcionan exactamente igual que en CSS. Cuando añadimos un elemento a la página, le damos un nombre de clase (también conocido como selector) y luego le aplicamos estilos. Al añadir esa misma clase global a otro elemento, los estilos se aplicarán. También podemos combinar dos o más clases globales en un mismo elemento y recibir los estilos de cada una, aunque es mejor usar una clase combinada.
2. Clases combinadas
Estas nos permiten añadir una clase a una clase global, creando una variante de la original. Pensemos en nuestro ejemplo: tenemos una clase global llamada .c-hero__text. Podemos añadirle otra clase, por ejemplo, .is--small. Esto crea la clase combinada .c-hero__text .is--small. De esta forma, podemos añadir un tamaño pequeño a .c-hero__text sin modificar la clase global original. En Webflow, debemos aprovechar las clases combinadas para los modificadores. Usarlas para este fin nos permite reutilizar las interacciones de Webflow manteniendo intactos los nombres de las clases globales.
¿Deberías usar BEM?
En mi humilde y sesgada opinión: ¡por supuesto que sí! BEM ha sido un salvavidas a la hora de crear sitios web en Webflow de forma modular y basada en componentes.
Existen varias convenciones de nomenclatura que podrías considerar, pero espero que este artículo te dé la motivación suficiente para probar BEM.
Ahora, una pregunta para los expertos:
¿Has probado a diseñar en Webflow con otra convención de nombres? Me encantaría conocer los pasos que sigues para trabajar de forma rápida y eficiente. ¡Compártelo!
¿Te apuntas al reto?
Clona este proyecto, adáptalo a tu estilo y compártelo con nosotros cuando termines. ¡Toma este pequeño sitio de tutorial y hazlo increíblemente tuyo!
