title: BEM: Naming conventions
body: <p>I would like some clarification about BEM convention.  Say that I have a card block which will be used in two places/pages <code>registration</code> and <code>dashboard</code>.  </p>
  
  <p>HTML structure for card looks something like this: </p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;header class="cardheader"&gt;
      &lt;h3 class="cardheader_title"&gt;
        Some Title
      &lt;/h3&gt;
    &lt;/header&gt;
  
    &lt;section class="card-body"&gt;
      &lt;!-- this can contain other blocks.  --&gt;
      &lt;!-- for example a nav and a form. or simple an acticle  --&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to write <code>scss</code> for this once and then be able to use it wherever I need it. So let's take the registration page for example.  </p>
  
  <pre><code>&lt;div class="card registration-card"&gt;
    &lt;header class="cardheader registration-cardheader"&gt;
      &lt;h3 class="cardheader_title registration-cardheader__title"&gt;
        Some Title
      &lt;/h3&gt;
    &lt;/header&gt;
  
    &lt;section class="card-body registration-cardbody"&gt;
      &lt;!-- this can contain other blocks.  --&gt;
      &lt;!-- for example a nav and a form. or simple an acticle  --&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then repeat the same for dashboard: </p>
  
  <pre><code>&lt;div class="card dashboard-card"&gt;
    &lt;header class="cardheader dashboard-cardheader"&gt;
      &lt;h3 class="cardheader_title dashboard-cardheader__title"&gt;
        Some Title
      &lt;/h3&gt;
    &lt;/header&gt;
  
    &lt;section class="card-body dashboard-cardbody"&gt;
      &lt;!-- this can contain other blocks.  --&gt;
      &lt;!-- for example a nav and a form. or simple an acticle  --&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>I am only working with <code>block</code> and <code>block__modifer</code> in the above examples</em>  </p>
  
  <p>Is the above an <code>acceptable</code> BEM approach? </p>