Confusion with BEM modifiers

Question

I have started using BEM methodology while writing my CSS and there have been few occasions where I have struggled to find out the best way to do a particular thing.

I would like to take up a simple example of a panel here.

Lets say I am writing a panel component CSS using BEM style. So my CSS might look as follows:

.panel {}

.panel__titlebar {}

.panel__content { display: none; }

A panel can be either chromeless or with chrome. So I define another modifier class for the panel:

.panel--with-chrome {
 border: 4px solid black;
 border-radius: 4px;
}

Now lets say, the panel can be in a fullscreen/maximized state also in which the chrome and titlebar disappear. Instead of defining modifiers for both panel and titlebar, it would be be wise to define the modifier just on parent (say panel--fullscreen) and rest elements shall change accordingly. So now my CSS becomes:

.panel--fullscreen {
 /* something has to be done here */
}

.panel--fullscreen .panel__titlebar { display: none; }

To remove the chrome in fullscreen mode, I can either:

1. toggle the panel--with-chrome class in JS along with the panel--fullscreen class

2. overwrite the chrome CSS inside the panel--fullscreen class.

First isn't good because ideally I would like to simply toggle just one class (.panel--fullscreen) in JS to toggle fullscreen mode.

And second one is bad because I'll have to overwrite previous CSS which is a bad practice.

So whats the best way to go about it? Appreciate your comments.

Thanks

Answer 1

The answer depends on many things.

First, how much logic and appearance have "panel--with-chrome" and "panel--fullscreen" modifiers. And also on what kind this logic is.

If "panel--with-chrome" brings a lot of CSS properties and special JS functionality, I would toggle it in JavaScript when applying "panel--fullscreen".
It also depends on a JavaScript framework you use. In "i-bem.js" which we use at Yandex it's easy to react to appending a modifier:

• A square changes size modifier when after a click
• Reacting on applying a modifier

But if the framework you use doesn't allow to express such a reaction handy, this answer won't work that great for you.

In the other case, when "panel--with-chrome" has not very much properties and doesn't bring any JavaScript logic to a page, I would redefine those CSS properties in "panel--fullscreen" class.

To sum up, there is no universal solution and strict rules to follow. You should decide yourself what will be useful in your case. The decision should depend on many things:

• if you expect your project to be maintained in the future, which solution will be easier to support?
• capabilities of the JavaScript framework you use
• performance stuff
  Not in this particular case, but sometimes we measure speed of rendering for variants we are choosing from.
• opinion of the other guys, if you work in team
• file structure of your project
  We, here at Yandex, store CSS and JavaScript for a block in the same block folder. So, it is not a problem to share logic between CSS and JavaScript since they all are in one place.
  But if you keep your JavaScript files separately, this can influence on how comfortable it is to support shared logic.

And so on...

Answer 2

I’d go with the first option; you are toggling state after all, so you need to add/remove/toggle classes accordingly. It’s better than undoing a load of stuff in CSS IMO.