Uzzar
Uzzar

Reputation: 703

BEM: Naming conventions

I would like some clarification about BEM convention. Say that I have a card block which will be used in two places/pages registration and dashboard.

HTML structure for card looks something like this:

<div class="card">
  <header class="cardheader">
    <h3 class="cardheader_title">
      Some Title
    </h3>
  </header>

  <section class="card-body">
    <!-- this can contain other blocks.  -->
    <!-- for example a nav and a form. or simple an acticle  -->
  </section>
</div>

I would like to write scss for this once and then be able to use it wherever I need it. So let's take the registration page for example.

<div class="card registration-card">
  <header class="cardheader registration-cardheader">
    <h3 class="cardheader_title registration-cardheader__title">
      Some Title
    </h3>
  </header>

  <section class="card-body registration-cardbody">
    <!-- this can contain other blocks.  -->
    <!-- for example a nav and a form. or simple an acticle  -->
  </section>
</div>

And then repeat the same for dashboard:

<div class="card dashboard-card">
  <header class="cardheader dashboard-cardheader">
    <h3 class="cardheader_title dashboard-cardheader__title">
      Some Title
    </h3>
  </header>

  <section class="card-body dashboard-cardbody">
    <!-- this can contain other blocks.  -->
    <!-- for example a nav and a form. or simple an acticle  -->
  </section>
</div>

I am only working with block and block__modifer in the above examples

Is the above an acceptable BEM approach?

Upvotes: 0

Views: 213

Answers (1)

tadatuta
tadatuta

Reputation: 2025

Yes, it's definitely acceptable and is called mixes in BEM methodology. See https://en.bem.info/methodology/key-concepts/#mix for details (please also be aware that in official docs different separators are used so don't be confused).

Upvotes: 2

Related Questions