BEM CSS, Globals, and Class naming

Question

I'm trying to determine an approach for for standardizing classes in CSS, for use on multiple projects.

I understand that the BEM model allows for ease of development by specifying block level elements for stand-alone styling. My concern with this approach is in handling global elements.

Example:

I have two "modules": News and Events. Both modules have a listing of their items but on site 1 the modules are identical, and on site 2 they have fairly unique styles.

Current Understanding:

This post from 2014 leads me to believe the best approach would be:

<div class="news news--listing module module--listing">...</div>
<div class="events events--listing module module--listing">...</div>

I feel that this might be the best approach, since any global styling could be handled under module__listing, and if uniqueness is needed specific classes are available.

I have a tougher time with children from here though. Say both have an item listing, how could this be approached well? Example:

<div class="news news--listing module module--listing">
    <ul class="news__list item__list">
       <li class="news__item item">...</li>
    </ul>
</div>

This feels like going overboard - but I'm not sure of a better solution. Would I just keep this naming convention down the child list?

Question:

I am wondering if there are any best approaches to this that I may not be aware of, or of any concerns maintaining this type of approach.

Answer 1

Block, Element, Modifier methodology (BEM)

Using your example, it would be like:

<div class="[block]">
    <ul class="[block__element1]">
       <li class="[block__element2]">...</li>
       <li class="[block__element2] [block__element2--modifier]">...</li>
    </ul>
</div>

Then your code would look like this:

<div class="news">
    <ul class="news__list">
       <li class="news__item">...</li>
       <li class="news__item news__item--selected">...</li>
    </ul>
</div>

Notice that a modifier (news__item--selected) is always followed by the element class (news__item).

More info:

BEM Documentation, Quick Start: https://en.bem.info/methodology/quick-start/

BEM by Example: https://seesparkbox.com/foundry/bem_by_example