nomenclatura - oocss
¿Por qué BEM utiliza a menudo dos guiones bajos en lugar de uno para los modificadores? (4)
El subrayado doble se utiliza para definir el subelemento de un bloque.
es decir:
<nav class="main-nav">
<a class="main-nav__item" href="#">Text</a>
</nav>
Donde main-nav es un bloque & main-nav__item es un subelemento.
Esto se hace porque algunas personas podrían nombrar su bloque como este main_nav lo que creará confusión con un solo guión bajo como este: main_nav_item
Por lo tanto, el subrayado doble aclarará cosas como esta: main_nav__item .
En BEM, entiendo que con los modificadores, dos guiones tienen sentido para que puedas distinguir el modificador en my-block-my-modifier con my-block--my-modifier .
Pero, ¿por qué usar block__element lugar de block_element ?
Porque cuyos bloques pueden ser guiones o guiones bajos delimitados, por ejemplo:
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */
o
.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */
También vale la pena mencionar que la sintaxis de BEM no se nos impone y si encuentra otra sintaxis que le resulte más legible, entonces puede hacerlo. Lo importante es la consistencia, garantizando que otros desarrolladores trabajen con la misma sintaxis.
Un ejemplo de una sintaxis alternativa utilizada en SUIT CSS por Nicolas Gallagher. Que utiliza la siguiente sintaxis.
ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent
Puedes leer más aquí SUIT CSS convenciones de nomenclatura
Voy a la respuesta de 2nd @ Imran Bughio, pero estoy tratando de aclarar el problema.
En el estilo BEM estándar , los guiones bajos individuales están reservados para los modificadores . Además, generalmente representan una combinación de pares clave / valor. P.ej
.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small
Esto contrasta con la sintaxis BEM modificada defendida por inuit.css por ejemplo, que son booleanas.
.block--vertical
.block--horizontal
.block__element--big
.block__element--small
Desde mi experiencia al usar la sintaxis modificada, rápidamente te topas con limitaciones de expresión. Por ejemplo, si escribieras
.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small
La relación clave / valor no sería única, si tratara de describir una clave como background-attachment que resultaría en
.block__element--background-attachment-fixed
Otro beneficio adicional es que puede usar las bibliotecas basadas en la convención de nomenclatura estándar para aumentar la productividad en su flujo de trabajo: