3

Using BEM CSS class syntax, lets say I have an element with the following class:

...
<div class="purchase__module2__heading__tooltip">...</div>
...

Now lets say there is an event or something where this "tooltip" becomes active or visible. What is the proper way to express this with BEM? Do I replace the current class so now it becomes:

...
<div class="purchase__module2__heading__tooltip--active">...</div>
...

or do I add it

...
<div class="purchase__module2__heading__tooltip purchase__module2__heading__tooltip--active">...</div>
...

Or can I just do something simple like this:

...
<div class="purchase__module2__heading__tooltip active">...</div>
...

I think the answer is #2, but it seems very drawn out. #3 is nice and simple but I can't tell if this follows proper BEM guidelines or not.

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370

2 Answers2

5

If you're modifying a block or element you must include the base class as well.

For example

<div class="block">
  <div class="block__element">...</div>
</div>

could have the block modified as:

<div class="block block--modifier">
  <div class="block__element block--modifier__element">...</div>
</div>

or the element modified as:

<div class="block">
  <div class="block__element block__element--modifier">...</div>
</div>

In either case you start needing to use multiple classes.

Looking over your example of:

<div class="purchase__module2__heading__tooltip">

It's clear that you're nesting too deeply, preventing yourself from being able to reuse the majority of your code.

Given the names you're using, I'd guess that what you actually have is:

  • a purchase module (.purchase-module)
    • with a heading (.purchase-module__heading)
  • a tooltip (.tooltip)

The markup could look something like:

<article class="purchase-module">
  <h1 class="purchase-module__heading">
    ...heading text...
    <span class="tooltip">...</span>
  </h1>
</article>

Note how making the tooltip active now just requires changing a short class:

<span class="tooltip tooltip--active">...</span>

That's the ideal with BEM.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • Thank you. That seems too generic... I would be afraid that I could have a `.tooltip` elsewhere that needs completely different styles than this tooltip, so I have to override the styles of `.tooltip`. Or would I use a tested selector for the styles? Ex. `.purchase-module .tooltip` ? – Jake Wilson Apr 27 '16 at 19:09
  • If you're afraid of reusing styles, you're doing it wrong. If they need different styles, they're different things and require different names. If you're using BEM you shouldn't be using selectors like `.purchase-module .tooltip`. – zzzzBov Apr 27 '16 at 19:11
  • @JakeWilson, think of it like this. Imagine you create a `car`, and then you need another one, but it has to carry a bunch of stuff, and half of it needs to be flat to carry stuff. You don't change `car`, you create a `truck`. For the stuff that's shared you might refactor so that `car` and `truck` extend `vehicle`. All of that can be done using a CSS preprocessor. – zzzzBov Apr 27 '16 at 19:14
  • Okay, trying to get my head wrapped around what you said. So with BEM you should aim for a single selector for something, right? No nested selectors like `.purchase-module .tooltip`. Okay so back to my original point, if I have more than one `.tooltip` on the page, what do I do if I don't use nested selectors? Change the `.tooltip` class name to something more specific? Thanks for the help – Jake Wilson Apr 27 '16 at 19:28
  • @JakeWilson, two tooltips should appear the same, unless they're in different states. Different states are represented by modifiers. If they look nothing alike, then they're not both tooltips. One might be a `tooltip` the other might be a `popup` another might be a `modal`. You might have a `purchase-tooltip`, and a `checkout-tooltip`, and a `red-fish-tooltip` and a `blue-fish-tooltip`, and all of them could be similar but would have different styles. – zzzzBov Apr 27 '16 at 19:33
  • Hmmm I guess I would think that `checkout`, `red-fish` and `blue-fish` would be modifiers of the `tooltip` class... After all, that's what common libraries like Bootstrap do (even though not BEM-based). They have `button`, then `button-primary`, `button-secondary`, etc. – Jake Wilson Apr 27 '16 at 20:05
  • 1
    @JakeWilson, I can only tell you what has worked best for me given my experience with maintaining inherited projects. At some point you're going to have to decide for yourself, but keep in mind that you want to make your life easier in six months when you need to make changes or fix bugs. I suggest using modifiers for state only, and that themes are better served by extending a block. You don't have to believe me, in fact I would encourage you to try it out for yourself. At the end of the day, it's your choice. – zzzzBov Apr 27 '16 at 20:10
0

You are right and the answer is #2.

Here's why:

BTW, you shouldn't keep DOM structure in naming. And here's why: https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2

tadatuta
  • 2,007
  • 11
  • 12