In BEM, ho capito che con i modificatori, due trattini ha senso in modo che sia possibile distinguere il modificatore in my-block-my-modifier con my-block--my-modifier.Perché BEM utilizza spesso due caratteri di sottolineatura anziché uno per i modificatori?
Ma perché utilizzare block__element anziché block_element?
Double Underscore è utilizzato per definire l'elemento secondario di un blocco.
cioè:
<nav class="main-nav">
<a class="main-nav__item" href="#">Text</a>
</nav>
Dove main-nav è un blocco & main-nav__item è un elemento secondario.
Ciò avviene perché alcune persone potrebbero chiamare il loro blocco come questo main_nav che creerà confusione con singolo trattino in questo modo: main_nav_item
Pertanto doppia sottolineatura chiarirà cose come questa: main_nav__item.
Vale anche la pena ricordare che la sintassi del BEM non è forzata su di noi e se trovi un'altra sintassi che trovi più leggibile, allora con tutti i mezzi vai con quella. La cosa importante è la coerenza, assicurando che altri sviluppatori lavorino alla stessa sintassi.
Un esempio di sintassi alternativa utilizzata è in SUIT CSS di Nicolas Gallagher. Che utilizza la seguente sintassi.
ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent
Si può leggere di più qui SUIT CSS naming conventions
ho intenzione di risposta di 2 ° @Imran Bughio, ma sto cercando di chiarire ulteriormente la questione.
In standard BEM style, i trattini di sottolineatura singoli sono riservati ai modificatori . Inoltre, di solito rappresentano una combinazione di coppie chiave/valore. Per esempio.
.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small
Questo è in contrasto con la modificato BEM sintassi sostenuto da inuit.css per esempio, che sono booleana.
.block--vertical
.block--horizontal
.block__element--big
.block__element--small
Dalla mia esperienza quando si utilizza la sintassi modificata, si eseguono rapidamente limiti di espressione. Per esempio.se si desidera scrivere
.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small
La chiave/valore di riferimento non sarebbe unico, se si desidera cercare di descrivere una tale chiave come background-attachment che si tradurrebbe in
.block__element--background-attachment-fixed
Un altro vantaggio è che si possono utilizzare le librerie basate sullo standard convenzione di denominazione per una maggiore produttività nel flusso di lavoro:
Non vedo il problema con l'uso del doppio trattino per i modificatori ... è ' È visivamente differente abbastanza da sottolineare che rende i nomi delle classi con i modificatori un aspetto abbastanza diverso. Se parliamo di come appare qualcosa di complesso ... '.block__element_background-attachment-fixed' non è molto diverso dall'uso di double-dash anche se lo è, tranne che ora, a prima vista la tua classe sembra un' block__element 'non un' block__element - modificatore'? la scansione in un codebase riguarda esclusivamente le forme – airtonix
Perché i cui blocchi possono essere trattino o sottolineatura delimitato, ad esempio:
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */
o
.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */
Grazie Colin, mi piace molto SUIT CSS nomi come bene e * * [pianifica di usarlo nel prossimo futuro] (https://github.com/gilbox/futuristic-sass-guide) ** –