Metodología BEM
Se trata de una de las Metodologías de estructura de estilos CSS más conocidas a nivel mundial, la cual consiste en basar todos los estilos únicamente en clases, para evitar problemas de especificidad; por su lado, a estas clases se les aplicarán ciertas pautas a la hora de definir sus nombres para que de este modo no existan errores sobre a qué elemento HTML estas actúan.
Al estructurar los nombres de las clases en la Metodología BEM se utiliza:
En primera instancia el nombre del contenedor en el que se encuentre el elemento.
Seguido de "dos pisos ( __ )"
Seguido del nombre del elemento
De este modo:
Otro caso de uso bastante probable es que un solo documento HTML posea varios elementos del mismo tipo en un contenedor pero se necesite aplicar un estilo diferente a solo uno de ellos, como en el siguiente ejemplo:
Para estos casos existen dos opciones, la primera es definir dentro de CSS la posición del elemento de la siguiente forma:
La otra alternativa es aplicar una clase diferente para este elemento empleando la estructura de su nombre de la siguiente manera:
Como se puede ver se aplican dos barras laterales (--) las cuales significan que todos los elementos son iguales pero uno de ellos es especial, seguidas de cualquier identificador que se desee, en este caso se usará la palabra "active"
Nota: En una página funcional estos estilos pueden ser alternados entre los diferentes elementos utilizando JavaScript.
Para Concluir
En los casos de que se trabaje con elementos que se encuentren dentro de más de un contenedor, la estructura del nombre de las clases sería la siguiente:
Nota: El doble piso únicamente se coloca después del nombre del contenedor principal de la sección.