Si tu propósito al momento de crear Css es ser especifico, claro, legible, fácil de entender y por supuesto implementar una buena práctica al momento de crear estilos, la metodología BEM (Block Element Modifier) te será de gran ayuda para crecer en el ámbito profesional.
El propósito de BEM que en español seria modificador de bloques de elementos, es que tú puedas crear una estructura de codigo más consistente, no duplicar estilos y traer claridad al codigo definiendo y estableciendo mejor jerarquía en tu proyecto. Si quieres saber mas de como surgió esta metodología te recomiendo leer a fondo sobre su historia.
Lo anterior por supuestos nos ayuda a trabajar más de manera ágil y eficiente, tanto solo como en equipo, ya que como he dicho tendremos la oportunidad de crear un codigo totalmente legible hasta para los usuarios introvertidos que den clic derecho y en inspeccionar elemento.
Esta metodología surgiere incluir en la creación de estilos CSS y HTML una serie de reglas para el desarrollo del frontend de manera general, la cual consiste en crear o nombrar clases de elementos independientes haciendo las hojas de estilos más simples y fáciles de entender divididas en bloque, elemento y modificador. Las cuales describiré cada una.
Bloque: Es esa parte independiente en la cual se escrutará nuestro proyecto y donde se verán contenidos todos los elementos de este. es decir, esos contenedores principales que nos ayudaran a dividir las partes de nuestro documento y que son fácilmente identificadas. Ejemplos de esto serian header, footer, contenedor principal, ítems y demás. En realidad, depende de ti y tu forma de estructurar resaltando que los bloque serán los contenedores de los elementos y así mismo deben ser nombrados de forma coherente.
Ejemplo de cómo nombrar bloques:
.footer
Elemento: Es (valga la redundancia) el elemento que esta dentro de un bloque. En la metodología BEM no puede utilizarse por si solo si no se especifica a que bloque pertenece. Creando un marco de referencia general podemos resumir que el bloque contiene los elementos y así debe estructurarse el nombramiento de la clase. Estos se nombran con dos underscore después del nombre del bloque.
Ejemplo de cómo nombrar elementos
.footer__information
Modificador: Este juega un papel muy importante ya que nos referimos a modificador cuando queremos cambiar la aparicencia especifica de un bloque o un elemento, por ejemplo: si tenemos un menú en el header y estos tienen los mismos nombres de clase para que cada uno tome propiedades iguales, pero hay uno que quieres que sea de otro color y tome otras propiedades como focus, active o hover, pues le agregas un modificador para así de simple modificarlo a tu gusto junto con las propiedades de los demás elementos del menú. para crear un modificador agregamos dos guiones y su nombre.
Ejemplo de como nombrar o hacer llamado a modificadores:
.footer__information--aboutme
De esta manera nuestro codigo estará limpio y reusable, además de una cascada impecable que te ahorrara mucho tiempo al momento de crear estilos, estudairlos o revisarlos.
Y pueda que pienses que los nombres de las clases se alargan demasiado, que toma mucho tiempo planear y aplicar estos principios, que de cierta forma puede que sea complicado y que la implementación en proyectos pequeños no sea tan clara, pero en realidad vale mucho la pena resaltar los puntos positivos mencionados a lo largo de todo el escrito.
De pronto te faltaron algunos conceptos o ejemplos para aclarar lo que esto puede significar para un desarrollador somo el hecho de su utilidad en sass y demas. De mi parte esto solo fue una introducción, pues es lo que he aprendido leyendo e investigando y este artículo es la forma de aprender enseñando. Te invito a que sigas investigando y te apropies del tema con el fin e ejercer buenas prácticas en tu vida. Te pido por favor dejes tu comentario acerca de cómo te pareció para así poder mejorar.
Curso de Sass 2018
