BEM Naming convention

Wat zijn componenten?

Wat is een component?

Componenten zijn zelf-gedefinieerde delen van een webpagina, die volledig op zich staan.

Wat is een component?

Een component kan herbruikt worden visueel naast andere componenten, op andere pagina's en er bestaan ook variaties van.

Van zodra iets herbruikbaar wordt, kan je het een "component" gaan noemen. Hoe klein een component ook is.

Wat is een component?

Component classes herbruiken

Componenten benoemen

Componenten kunnen we gaan benoemen in HTML met logische classes.

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

Componenten benoemen

Met dezelfde CSS kunnen we dan componenten gaan hergebruiken.

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card-2">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

Componenten benoemen

Met dezelfde CSS kunnen we dan componenten gaan hergebruiken.

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

Wat is BEM?

Een naamgevings conventie wanneer we onze classes schrijven.

Maakt je selectors meer verstaanbaar door gewoon de naam te lezen.
Maakt duidelijk op welke plaats je classes kunt hergebruiken in HTML
Het maakt de relaties duidelijk tussen classes.

Wat is BEM?

Wij gaan kiezen voor de Block - Element - Modifier methodologie, kortweg de BEM methodologie.

Wat is BEM?

Let op: Wil je een component benoemen met 2 woorden, gebruik dan "-".

.navbar {}
.nav-bar {}

.nav_bar {}

Onderdelen van componenten

In BEM kan je met "__" een onderdeel van een component benoemen in een class.

Onderdelen van componenten

.component__onderdeel {
  ...
}

Toegepast op onze card-component:

Onderdelen van componenten

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

4 extra BEM classes

Voordeel: een lagere CSS-specificiteit!

Onderdelen van componenten

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

0 - 1 - 1

0 - 1 - 0

BEM

Geen BEM

Voordeel: meer leesbare CSS

Onderdelen van componenten

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

Een link in een kaart?

Een knop in een kaart!

BEM

Geen BEM

Voordeel: Element-onafhankelijke classes

Onderdelen van componenten

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card button,
.card a {
  color: blue;
  text-transform: uppercase;
}

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

2 elementen die er hetzelfde uitzien

element-onafhankelijk

BEM

Geen BEM

element-onafhankelijk

Let op: Wees pragmatisch!

BEM-classes hebben maximaal 2 onderdelen

Onderdelen van componenten

.card {}
.card__title {}
.title__icon {}

.card__title__icon {}

Variaties van componenten

In BEM kan je met "--" een variatie van een component benoemen met een class.

.component--variatie {
  ...
}

Een variatie wordt dan geïdentificeerd door een extra class.

<article class="green-card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

Variaties van componenten

<article class="card card--green">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

Een class variatie toevoegen is slechts 1 class toevoegen: "card--green"

Variaties van componenten

<article class="card card--green">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}

Variaties van componenten

Let op: Laat de class "card" staan in de HTML, zo hoef je enkel de CSS te schrijven voor die de variatie vereist.

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}

Variaties van componenten

Of voeg meerdere variatie classes toe!

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card card--center">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

Variaties van componenten

Of voeg meerdere variatie classes toe!

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card card--center">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}
...
.card--green {
  background: green;
  color: #FFF;
}
...
.card--center {
  text-align: center;
}

Variaties van componenten

Welke variatie kan ik nog maken door de 2 variatie-classes te combineren?

<article class="card card--green card--center">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

Een groene card die ook gecentreerd is!

Variaties van componenten

Hoeveel variaties van de "card" zijn mogelijk als we deze CSS extra toevoegen?

.card--funky {
  border-radius: 80px 0px 80px 0;
  border: 6px solid black;
}

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green .card__button {
  color: green;
}

.card--center {
  text-align: center;
}

.card--funky {
  border-radius: 80px 0px 80px 0;
  border: 6px solid black;
}

Let op: Wees pragmatisch!

BEM-classes hebben nog steeds maximaal 2 onderdelen

.card {}
.card--green
.card__title {}

.card--green__title {}
.card__title__icon {}

Variaties van componenten

Wanneer BEM gebruiken?

"-" Lezen we als een spatie.
Met "__" gaan we een onderdeel van een component benoemen in een class.
Met "--" gaan we een variatie van een component benoemen

Wanneer BEM gebruiken?

Wanneer

je selectors niet meer verstaanbaar zijn
je duidelijk wilt zien op welke plaats je specifieke classes kunt hergebruiken in HTML
je bepaalde relaties tussen elementen duidelijk wilt maken in CSS

Wanneer BEM gebruiken?

Bem is geen regel, maar een mogelijkheid

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

BEM

Geen BEM

Wanneer BEM gebruiken?

BEM is een mogelijkheid waar je wel voor moet kiezen als het de herbruikbaarheid van je CSS te bevorderen in jouw context

.cards .card .button .icon {
  width: 2rem;
}

Geen BEM

.button__icon {
  width: 2rem;
}

BEM

Wanneer BEM gebruiken?

Wat als hetzelfde component (bv: een button) er hetzelfde uitziet als onderdeel van zowel een card als een hero?

.hero__button

.form__button

Wanneer BEM gebruiken?

.hero {...}

.hero__button {
  font-size: 2rem;
  border-radius: 10px;
  padding: 0.5rem 2rem;
}

.form {...}

.form__button {
  font-size: 2rem;
  border-radius: 10px;
  padding: 0.5rem 2rem;
}

Onnodig gebruik BEM

.hero {...}

.form {...}

.button {
  font-size: 2rem;
  border-radius: 10px;
  padding: 0.5rem 2rem;
}

Vermijd BEM-classes

indien onnodig

Wanneer BEM gebruiken?

Hoe zou je het volgende onderdeel benoemen in HTML?

a) site__header

b) header

c) header--blue

Hoe zou je het volgende onderdeel benoemen in HTML?

a) menu

b) header__menu

c) main-menu

Hoe zou je het volgende onderdelen benoemen in HTML?

a) menu-link

b) header__menu-link

c) link

Hoe zou je het volgende onderdelen benoemen in HTML?

a) menu-link--active

b) menu-link + menu-link--active

c) menu-link + menu-link--white

.button

Hoe zou je het volgende onderdeel benoemen in HTML?

a) button button--outlined

b) button button__outlined

Een meer uitgebreide blogpost over BEM

Wanneer BEM gebruiken?

BEM naming convention

By Lecturer GDM

BEM naming convention

2 years ago
194

BEM naming convention

More from Lecturer GDM