Spanish (Español) translation by Daniel Oyola (you can also view the original English article)
Hay que decirlo de frente, todos queremos hacer que nuestro código sea más fácil de leer. Esto nos ayuda a trabajar más rápidamente y de manera eficiente, y cuando otros trabajen con nosotros podremos mantener claridad y coherencia. Pareciera que en estos días existen muchos estándares y términos en el mundo del CSS: OOCSS, SMACSS, BEM y otros. Todos estos son acercamientos para mejorar la estructura del CSS, y hoy vamos a cubrir la metodología BEM.
BEM significa Modificador de Bloques de Elementos (Block Element Modifier) por sus siglas en inglés. Sugiere una manera estructura de nombrar tus clases, basado en las propiedades del elemento en cuestión. Si alguna vez has visto un nombre de una clase como header_from-email eso es precisamente BEM en acción. Cuando utilices la metodología BEM, debes tomar en cuenta que solamente usarás nombres de clases (no IDs). Los nombres de clases te permiten repetir el nombre BEM si es necesario, y crear una estructura de código más consistente (en ambos archivos el HTML y CSS/Saas). Ahora vamos descifrarlo.
Bloque
El bloque es un contenedor o contexto donde el elemento se encuentra presente. Piensa como si fueran partes estructurales de código más grandes. Puede que tengas un encabezado, pie de página, una barra lateral y un área de contenido principal; cada uno de estos sería considerado como un bloque. Mira la imagen de abajo:
El bloque de elementos forma la raíz de la clase y siempre irá primero. Solo debes saber que una vez que has definido tu bloque, estarás listo para comenzar a nombrar tus elementos.
Elemento
El elemento es una pieza de un bloque. El boque es el todo y los elementos son las piezas. Cada elemento se escribe luego del bloque conectado por dos barras bajas.
1 |
.block__element
|
Sé que esto puede parecerte extraño pero una vez que comienzas a usarlo te preguntarás cómo es que has escrito CSS sin usar BEM. La doble barra baja te permite visualizar, navegar rápidamente y manipular tu código.
Aquí hay algunos ejemplos de cómo funciona la metodología de elementos:
1 |
.header__logo {} |
2 |
.header__tagline {} |
3 |
.header__searchbar {} |
4 |
.header__navigation {} |
Como puedes ver, hay espacio para la creatividad y hacer de esta metodología tuya. En el ejemplo, "navigation" puede ser cambiado a "nav", "tagline" puede cambiarse a "tag" o "tagLine". El punto es mantener los nombres simples, claros, y precisos. No lo pienses demasiado, y solo porque tus hojas de estilos y html serán estáticos, no quiere decir que tengas que volver a repetir el mismo código. Actualizar el nombre de las clases no debería ser un problema cuando encuentras una mejor semántica que funcione (solo debes tratar de ser consistente y apegarte a ella). Los elementos se convertirán en el centro de los nombres de tus clases, y te ayudarán a entender cómo estructurar tus hojas de estilos y cómo manejar tu diseño.
Modificadores
Ahora se pone divertido (por si aún no te estabas divirtiendo). Cuando nombras una clase, la intención es ayudar a que ese elemento pueda ser repetido para que no tengas que escribir nuevas clases en otras áreas del sitio si los elementos de estilo son los mismos. Cuando necesitas modificar el estilo de un elemento específico, puedes usar un modificador (¡por supuesto!). Para lograr esto, añades un doble guión -- luego del elemento (o bloque). Aquí tenemos un corto ejemplo:
1 |
.block--modifier {} |
2 |
.block__element--modifier {} |
Ten cuidado al usar los modificadores, recuerda que se quiere manter todo más simple y no tener que repetir lo mismo o crear clases extra a menos que sea absolutamente necesario. Lo explicaremos con un código usando el encabezado del sitio como nuestro bloque:
1 |
.header__navigation {} |
2 |
.header__navigation--secondary {} |
Si estás usando una segunda navegación, lo más probable es que el diseño y espaciado no cambien, pero puede que la navegación secundaria tenga un color distinto. Puedes ya sea, duplicar los estilos originales, o mejor aún, usar un pre-procesador. Con Sass, podrías @extender el elemento principal (así el elemento secundario heredará todas las propiedades) y cambiar los estilos apropiados.
1 |
.header__navigation { |
2 |
background: #008cba; |
3 |
padding: 1rem 0; |
4 |
margin: 2rem 0; |
5 |
text-transform: uppercase; |
6 |
}
|
7 |
|
8 |
.header__navigation--secondary { |
9 |
@extend .header__navigation; |
10 |
background: #dfe0e0; |
11 |
}
|
Puede que pienses, "¡pero el nombre de la clase es muy largo!". Yo lo veo así: Los nombres de las clases BEM son específicos, claros, fáciles de leer dentro del html, y comunican claramente para qué existen.
Lo que también me gusta de los nombres de las clases cuando usamos BEM es que solo tienes que usar un nombre de clase por cada etiqueta html. Fíjate cómo funcionaría para la etiqueta "label". Selectores estándares:
1 |
.label .label-default {} |
2 |
.label .label-alert {} |
vs. selectores BEM:
1 |
.label {} |
2 |
.label--alert {} |
Los lenguajes como Sass (específicamente Scss) nos permiten rápidamente tener elementos, compartir los mismos estilos con pequeñas excepciones. El ejemplo de abajo nos evita duplicar estilos, mas bien cambiamos sólo lo necesario. Lo que más me gusta de la metodologéa BEM es que no tienes que combinar clases ambiguas como "panel panel-default col-md-3". Si utilizas un framework como Foundation puedes comenzar a nivelar las diferencias. Pero para un ejemplo simple, pongamos estilo a las etiquetas que acabamos de definir.
1 |
.label { |
2 |
background: #eee; |
3 |
border-radius: 505; |
4 |
color: #333; |
5 |
font-size: 1rem; |
6 |
}
|
7 |
|
8 |
.label--alert { |
9 |
@extend .label; |
10 |
background: #da4531; |
11 |
color: #fff; |
12 |
}
|
Conclusión
Bien, ahí tienes la simplicidad de BEM. Como puedes ver, hay mucho más por explorar. BEM es un sistema en constante evolución que permite traer claridad a tu código y te ayuda a definir y establecer una mejor jerarquía en el desarrollo de la interfaz.
En mi experiencia personal, me ha ayudado tremendamente a construir prototipos más eficientemente, y la transición a código de nivel de producción ha sido aún mas rápida.
Lecturas adicionales
¿Qué piensas sobre BEM, tienes algún consejo, sugerencia o truco para tus amigos lectores en Tuts+? ¡Haznos saber en los comentarios de abajo!
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
