Dropping the parent modifier

[maxhoffmann]

This is what the CSS the compiler would currently put out:

/* object */
.object { }

/* modifier */
.object--modifier { }

/* parent modifier */
._object--parentmodifier .object { }

Both override the .object styles: modifiers come after the object styles and parentmodifier have a higher specificity. The difference is their usage:

<div class="object object--modifier"></div>

<div class="_object--parentmodifier">
  <div class="object"></div>
</div>

So the question is if this difference in usage is helpful in some way. If not we could kill parent modifiers and alter modifiers so that they can be used in both ways.

/* object */
.object { }

/* modifier */
.object--modifier,
.object--modifier .object { }

Usage:

<div class="object object--modifier"></div>

<div class="object--modifier">
  <div class="object"></div>
</div>

Is there any advantage to have seperate modifiers? Any use case where this is more clear than just using one modifier?

[martzoukos]

Kill parent modifiers. BEM doesn't work like that.
:)

[martzoukos]

If you want to add a parent modifier, then the object object--modifier is sufficient. If you to override a child element, then this object--modifier object__element is also sufficient.

If you want to change some property of the parent (Block in BEM) in relation to its surrounding layout, then creating a new variation with a parrent modifier object--modifier is enough. If you feel that this variation is tightly tied with the parent container (and not repeatable anywhere else), then it might make sense to create a child style on the parent container parent-object object.
But this decision should be left to the developer, and it can also lead to leakage of styles between objects.

[maxhoffmann]

Yeah, I think we should go for simplicity.

Example Documentation:
“Use modifiers to alter objects. Add it to the object element or to one of its parent elements.”

[maxhoffmann]

There is an issue with pseudo selectors:

This:

=object

compiles to:

.object--modifier,
.object--modifier .object { }

That would also mean that this:

=object
  :hover
    outline: 1px solid red

compiles to:

.object--modifier:hover,
.object--modifier .object:hover {
  outline: 1px solid red;
}

This would add the outline to both elements if added to a parent element. Solution could be to scope the first modifier to its object:

.object.object--modifier:hover,
.object--modifier .object:hover {
  outline: 1px solid red;
}

Now the hover styles will only be active for modifiers that are on the object or for the object itself being nested under this modifier.