If h1 is considered a block, then does that make the spans elements of the h1 block? I guess, they are elements of the h1 block. What I want to know is, which one of the two codes is accurate? In the first one, I used underscores, and in the second one, I used dashes. Which one is accurate?
<h1 class="heading">
<span class="heading__main">physics</span>
<span class="heading__sub">the mother of all sciences</span>
</h1><h1 class="heading">
<span class="heading--main">physics</span>
<span class="heading--sub">the mother of all sciences</span>
</h1>NOTE: Do not answer if you don't know BEM. I am telling this because the above terminology resembles very much with basic HTML and CSS.
Up front:
From a BEM point of view it is irrelevant whether an html element in a block has semantic meaning (like H[1...6], P, ARTICLE, SECTION etc.) or is meaningless like SPAN or DIV. BEM is concerned with organizing the presentation not with organizing html structure. BTW, you could make SPAN a block element or DIV an inline element with the respective display-definition in your BEM-class. None of this matters when it comes to BEM.
Let's get to the core of your question.
I challenge the answer of Himanshu Saxena.
If you have a block class named
heading
then if you are using a modifier on that very class like
heading--main
the BEM semantic expresses that you are modifying that very block, which in your case is the h1 tag.
If you apply the block's class modifier on a tag other than the tag to which the block class is applied, it's a contradictory information you send to the reader of your code.
So, your first code example is accurate because it clearly states, that
heading
is your block. All potential modifiers on heading should be applied to the tag which contains the heading block class. That's the only location that that class' modifier belongs to.
If you indeed had a modifier like
heading--main
you'd have to to apply it to your h1 tag, because your bem expression semantically reads: "I am modifying the rendering of heading by applying the class heading--main".
You can't (of course you can, but then it's not BEM anymore) apply the heading's modifier to another tag, which does not bear the heading tag.
The classes
heading__main
heading__sub
clearly express that there is structural relationship between heading and main and that heading__main refers to an element somewhat below heading.
Bear in mind, that the BEM structure does not need to reflect the HTML structure.
Another important aspect of BEM is that the block should be in control of the location and the size of its enclosed elements.
In order to allow this you need to have an element class.
The only modifiers BEM allows on elements are the elements' modifiers but never ever its surrounding block's modifiers.
I hope, it wasn't too confusing. In any case stick with your first example, it's definitely the right one.