The key point of BEM is a distinction between element (prefixed by __ in the classname) and modifier (prefixed by --):

Element
A part of a block that has no standalone meaning and is
semantically tied to its block.

Modifier
A flag on a block or element. Use them to change appearance
or behavior.

In your example, both --heading, --subheading and --author are not modifiers of elements – they ARE elements. If, for some reason, you decide to apply actual modifiers to those elements (like highlighted or clickable), you end up either rewriting the classnames completely – or having some weirdness like article__textbox--heading--clickable.

Now, the real question I see here is ‘ok, it’s not modifiers, but what should I do with elements sitting inside other elements?’ In other words, which classnames should be applied to elements nested into other elements? This question is actually answered in BEM FAQ:

Q: What should I do if my block has a complex structure and its elements
are nested? CSS classes like block__elem1__elem2__elem3 look scary.

A: According to BEM method, block structure should be flattened; you do
not need to reflect nested DOM structure of the block. So, the class
names for this case would be:

.block {}
.block__elem1 {}  
.block__elem2 {}  
.block__elem3 {}

… whereas the DOM representation of the block may be nested:

  <div class='block'>
     <div class='block__elem1'>
         <div class='block__elem2'>
             <div class='block__elem3'></div>
         </div>
     </div>
  </div> 

Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.

So in your case it might be better to have them styled like this:

<div className="article">
  <div className="article__textbox">
    <h1 className="article__heading"></h1>
    <p className="article__subheading"></p>
    <span className="article__author"></span>
  </div>
</div>

Another approach, covered in this article, is treating textbox as a separate block, and all its innards as its own elements:

<div className="article">
  <div className="textbox">
    <h1 className="textbox__heading"></h1>
    <p className="textbox__subheading"></p>
    <span className="textbox__author"></span>
  </div>
</div>

Remember, it’s all about DRY: if that textbox is intended to be reused in other blocks, treat it as block. Quoting the same article:

When you’re unsure if something even is a block, ask yourself: “Could
this BEM element I’m about to add to a block be used as a component in
other areas of the website?”

Based on your markup structure there should not be Modifier.

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox--heading"></h1>
        <p className="article__textbox--subheading"></p>
        <span className="article__textbox--author"></span>
    </div>
</div>

h1.article__textbox--heading, p.article__textbox--subheading, span.article__textbox--author are child elements of the div.article__textbox they should have be treat like Elements not like modifier which will look like this.

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox__heading"></h1>
        <p className="article__textbox__subheading"></p>
        <span className="article__textbox__author"></span>
    </div>
</div>

Modifier which are prefixed with -- are use when you want to have element which are completely similar by structure but you want to change style like color, font-size, etc.

.article {
  width: 320px;
  background-color: #e2e8f0;
  padding: 8px;
  border-radius: 3px 3px 3px 3px;
  margin-bottom: 8px;
}

.article__textbox__heading {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 1.2px;
  color: #2c5282;
}

.article__textbox__subheading {
  font-size: 0.75rem;
  color: #718096;
  
}

.article__textbox__author {
   font-size: 0.875rem;
   
}

.article__textbox__author--premium {
   color: blue;
   font-weight: 700;
}

<div class="article">
    <div class="article__textbox">
        <h1 class="article__textbox__heading">Learning BEM </h1>
        <p class="article__textbox__subheading">The Block, Element, Modifier methodology</p>
        <span class="article__textbox__author">John Doe</span>
    </div>
</div>

<div class="article">
    <div class="article__textbox">
        <h1 class="article__textbox__heading">Mastering CSS BEM Principle </h1>
        <p class="article__textbox__subheading">The Block, Element, Modifier methodology</p>
        <span class="article__textbox__author article__textbox__author--premium">Jeanne Doe</span>
    </div>
</div>

Learn more here

So I have been writing my classNames in what I think is correct BEM. Something like this:

<div className="article">
    <div className="article__textbox">
        <h1 className="article__textbox--heading"></h1>
        <p className="article__textbox--subheading"></p>
        <span className="article__textbox--author"></span>
    </div>
</div>

See how I have the textbox & then everything within I am giving 2 dashes? I recently saw that this is invalid BEM & now I need to know how I should be naming things that are nested. Like, for example, what should I be naming the <p> tag?