#CSS Naming Conventions that Will Save You Hours of Debugging
▻https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35
#BEM attempts to divide the overall user interface into small reusable components.
– You may have already guessed that the B in BEM stands for ‘Block’.
– The E in ‘BEM’ stands for Elements.
– The M in ‘BEM’ stands for Modifiers.
Je comprends un peu mieux, mais je n’accroche toujours pas :p
Cet article parait récent, pourtant il ne décrit pas la norme BEM actuelle. Cela fait quelque temps que BEM a arrêté d’alterner entre tirets et soulignés ! Ce qui finissait pas être très confus.
Désormais BEM n’utilise plus que les soulignés et uniquement ça.
– Deux soulignés = un enfant d’un bloc
– Un souligné = un modificateur
Les tirets sont laissés à chacun pour séparer quand on veut plusieurs mots (pour ne pas faire de chameaux, ce qui n’est pas la norme en CSS).
Tout est là :
▻https://en.bem.info/methodology/quick-start
.search-form {
/* styles du bloc */
}
.search-form__button {
/* styles d'un élément bouton de CE bloc */
}
.search-form_has-filters {
/* styles d'un form de recherche qui auraient des filtres en plus du champ de recherche */
}
.search-form__button_disabled {
/* styles d'un bouton de CE form de recherche qui serait désactivé */
}