I'm trying to understand all the scenarios to apply BEM and there is something I would like to clarify in my mindset about this method.
Ok, imagine that you need a btn-group to gather the button / anchor elements in a module. If the module is the father of all, then you might think this btn-group is a child so it would like this "module__btn-group" but what happen with the btn?, and what about if you need that btn-group styles to apply another module?, then you will need to copy the same css rules again and again?. I mean, all the inner elements must have a father block of his own?.
Thanks a lot for the help.
If there's a chance to reuse
btn-groupelsewhere, make it a separate block and just you it inside
module. And the same for
btn. So your structure may look like this:
If you need to maintain the fact that this particular
btn-groupis the one that belongs to the
modulejust mix an element to the same DOM node:
The same may be applied to the buttons:
btncan have the styles for any abstract buttons. All the positioning styling and all the rest things the are special for buttons just inside
btn-groupshould be added to
Hi!, first of all thanks a lot for the reply, very appreciated.
So, if I haven't got it wrong, you can have Block elements, inside another bigger one, with his own Elements and Modifiers, is it correct to do it so?.
yes, that's right