Reputation: 703
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
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