'BEM naming techniques for reusable components

So I am trying to learn BEM and basically I have a element that appears more than once but in different blocks, the styling for the element is the same in both blocks so usually I would give them both the same classes to share styling but in BEM I am not sure if this is correct, the example below shows a title block in both the header and footer sections adhering to BEM naming conventions:

<div class="l-overlay-panel">
    <div class="b-overlay-panel__header">

        <div class="b-overlay-panel__header-title-wrapper">
            <p class="b-overlay-panel__header-title">
                Filters:
            </p>
        </div>

    </div>
    <div class="b-overlay-panel__footer">

        <div class="b-overlay-panel__footer-title-wrapper">
            <p class="b-overlay-panel__footer-title">
                Filters:
            </p>
        </div>

    </div>
</div>

My thinking was rather than treating and naming this as a block level element rename it as a component for example so it becomes its own standalone thing with its own shared classes / styling but I don't think this adheres to BEM practices:

<div class="l-overlay-panel">
    <div class="b-overlay-panel__header">

        <div class="c-title-wrapper">
            <p class="c-title-wrapper__title">
                Filters:
            </p>
        </div>

    </div>
    <div class="b-overlay-panel__footer">

        <div class="c-title-wrapper">
            <p class="c-title-wrapper__title">
                Filters:
            </p>
        </div>

    </div>
</div>

Also the issue with this approach is from my understanding a component or element level item should just be a single thing for instance the <p> tag not the <p> tag and the <div> wrapper as this is now its own block as apposed to a single component / element.

Thank you for any help anyone can offer.

htmlcsssassbem


Solution 1:[1]

I might not have understood your question correctly, but I think

<div class="l-overlay-panel">
    <div class="b-overlay-panel__header">

        <div class="c-title-wrapper">
            <p class="c-title-wrapper__title">
                Filters:
            </p>
        </div>

    </div>
    <div class="b-overlay-panel__footer">

        <div class="c-title-wrapper">
            <p class="c-title-wrapper__title">
                Filters:
            </p>
        </div>

    </div>
</div>

is not against BEM practices as long as you don't have dependent classes like

.b-overlay-panel__header > .c-title-wrapper{

}

You can make it an element of its own. I'll wait for other answers as I might be wrong.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Imanpal Singh

Related Questions