"btn-group" as BEM

Hi,

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.

5 years ago

tadatuta

If there's a chance to reuse btn-group elsewhere, make it a separate block and just you it inside module. And the same for btn. So your structure may look like this:

<div class="module">
    <div class="btn-group">
        <button class="btn">
        <button class="btn">
        <button class="btn">
    <div>
</div>

If you need to maintain the fact that this particular btn-group is the one that belongs to the module just mix an element to the same DOM node:

<div class="module">
    <div class="btn-group module__btn-group">
        <button class="btn">
        <button class="btn">
        <button class="btn">
    <div>
</div>

The same may be applied to the buttons:

<div class="module">
    <div class="btn-group module__btn-group">
        <button class="btn btn-group__btn">
        <button class="btn btn-group__btn">
        <button class="btn btn-group__btn">
    <div>
</div>

Now btn can have the styles for any abstract buttons. All the positioning styling and all the rest things the are special for buttons just inside btn-group should be added to .btn-group__btn element.

5 years ago

ghost

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?.

Thnx again.

5 years ago

tadatuta

yes, that's right

In order to leave a comment you need to login.