Chaining modifiers and state selectors

[flip-it]

Is it allowed, according to Suit, to chain multiple modifiers or state? I can't find anything that speaks against it in the docs. Something like Icon Icon--small Icon--retweeted, as at twitter.com isn't a problem since the modifiers likely doesn't need to cooperate. But in my case, the CSS need to be:

.Input--noAppearance.Input--spinners .Input-control {
    padding-right: 10px;
}

Is this an acceptable pattern? And despite the added specificity that BEM wants to avoid?.

The need for clarification is because I suggested to allow for it in the Post CSS BEM Linter (https://github.com/postcss/postcss-bem-linter/pull/81).

[timkelty]

Seems like something to be careful of and avoided if possible, but I don't see why it would be explicitly forbidden. Thoughts @simonsmith @giuseppeg ?

[simonsmith]

Sounds like noAppearance could be a utility.

[flip-it]

In this case noAppearance actually resets specific style for this component, other than browser defaults. I could just as well have used another modifier as an example.

Do I understand you correctly that the specificity isn't a concern? And if it shouldn't be forbidden, it also ought to be allowed in the linter.

[simonsmith]

I would agree with @timkelty yeah. It's not a common pattern but one that isn't inherently dangerous. It's obviously going to override something like this if both components target the same property:

<div class="Input Input--noAppearance Input--spinners">
  <input class="Input-control Button">
</div>

But I expect that's intended as you'd want the Input component to win here. So I think it's :+1:

[timkelty]

Do we think we need a specific reference to this in the docs?

[simonsmith]

Yeah, we should add it to the list of other doc updates for sure. Especially if the linter is going to change

[flip-it]

I thought Input-control Button wouldn't be allowed. Two components sharing the same element could have unexpected effects.

[simonsmith]

Two components sharing the same element could have unexpected effects

It's one of the options available to you. If the primary component (in this case Input) was to @import any other components then the order will be respected in the output CSS. It's fine for this to happen everywhere and let postcss-import decide the output.

Some further detail in this article