There is no official rule in BEM for the state modifiers.
But… BEM has been largely influenced by the methodolgies the developers used before, like SMACSS for example. SMACSS has a guideline on how to write state classes, and in your case it would be .is-open.
The developers I know write the state classes in BEM by folowing this pattern: .[block]--is-[state].
It’s still a valid BEM modifier class, and it’s easily differentiable from modifiers used for static style composition.
An example of sub-classing:
<button class="button button--large">
An example of state:
<button class="button button--open">
The two are meaningfully different. However, I couldn’t find any BEM convention, that would make a distinction, they would both be written as modifiers.
I know other methodologies that might do something like this for state:
<button class="button is-open">
or
<button class="button is-button-open">
I would just go with
Yeah I get that, but the button itself isnt open, whatever it’s affecting is. Buttons are inactive by default, which is why they have an
Buttons are inactive by default, I don’t know what else to tell you. They’re only active when they’ve been interacted with. Focus is when an element has focus, active is when the element is in the process of being clicked – they aren’t the same thing. Honestly, I think you’re going down a long and confusing road when the HTML spec outlines all of this super clearly.