CODEWITHSUNDEEP
cssnaming-conventionsbem
Stu Furlong
Stu Furlong

Reputation: 3629

BEM CSS, Globals, and Class naming

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.

Upvotes: 1

Views: 538

Answers (2)

Treedbox
Treedbox

Reputation: 770

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

Upvotes: 2

tadatuta
tadatuta

Reputation: 2025

You may use the concept of Redefinition levels to have diffenent styling for same entities on different project and still keeping common code in one place without adding additional module entity.

Upvotes: 1

Related Questions