What is the BEM methodology and how is it applied in Angular

BEM stands for Block-Element-Modifier, which is a popular methodology for writing CSS styles that are modular, reusable, and easy to maintain. BEM is not specific to Angular, but it can be used with any frontend framework, including Angular.

In BEM, each component or UI element is treated as a “block” that contains one or more “elements” and “modifiers”. A block is a standalone entity that has a distinct purpose in the UI, while an element is a part of the block that cannot exist without it. A modifier is a variation of a block or element that changes its appearance or behavior.

Here is an example of how to apply the BEM methodology to an Angular component:

<!-- app.component.html -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title">Card Title</h2>
    <button class="card__button card__button--primary">Primary Button</button>
    <button class="card__button card__button--secondary">Secondary Button</button>
  </div>
  <div class="card__body">
    <p class="card__text">Card Text</p>
  </div>
</div>

In this example, the app.component is a "block" that represents a card UI element. The card__header and card__body are "elements" that are part of the "block". The card__button and card__text are also "elements" that are part of the "block", but they have "modifiers" (--primary and --secondary) that change their appearance.

Here is the corresponding CSS code for the BEM classes used in the HTML code above:

/* app.component.css */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
}
.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.card__title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}
.card__button {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}
.card__button--primary {
  background-color: #007bff;
  color: #fff;
}
.card__button--secondary {
  background-color: #fff;
  color: #007bff;
  border: 1px solid #007bff;
}
.card__body {
  margin: 0;
}
.card__text {
  font-size: 16px;
}

In this CSS code, we use the BEM classes to style the card component. The card class represents the "block", while the card__header, card__title, card__button, card__body, and card__text classes represent the "elements". The --primary and --secondary modifiers are used to style the primary and secondary buttons.

Here’s another example of applying the BEM methodology in Angular:

<!-- app.component.html -->
<div class="page">
  <header class="page__header">
    <nav class="navigation">
      <ul class="navigation__list">
        <li class="navigation__item">
          <a class="navigation__link navigation__link--active" href="#">Home</a>
        </li>
        <li class="navigation__item">
          <a class="navigation__link" href="#">About</a>
        </li>
        <li class="navigation__item">
          <a class="navigation__link" href="#">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="page__content">
    <h1 class="page__title">Welcome to my website</h1>
    <p class="page__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, lectus id sodales finibus, enim eros posuere ipsum, vel malesuada velit turpis nec dui.</p>
    <button class="page__button page__button--primary">Get started</button>
  </main>
</div>

In this example, the app.component represents a webpage that is divided into a "page" block. The "page" block contains a "header" element and a "content" element. The "header" element contains a "navigation" block, which contains a list of navigation items.

Here is the corresponding CSS code for the BEM classes used in the HTML code above:

/* app.component.css */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}
.page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.navigation {
  display: flex;
}
.navigation__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation__item {
  margin-right: 16px;
}
.navigation__link {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.navigation__link--active {
  color: #007bff;
}
.page__content {
  margin-top: 32px;
}
.page__title {
  font-size: 48px;
  margin: 0;
}
.page__text {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 32px;
}
.page__button {
  border: none;
  border-radius: 4px;
  padding: 16px 32px;
  font-size: 24px;
  cursor: pointer;
}
.page__button--primary {
  background-color: #007bff;
  color: #fff;
}
.page__button--secondary {
  background-color: #fff;
  color: #007bff;
  border: 1px solid #007bff;
}

In this CSS code, we use the BEM classes to style the “page” block, the “header” and “content” elements, and the “navigation” block and its items. We also use modifiers to style the active navigation link and the primary button.

I have simply demonstrated the BEM methodology with an example in this article. I hope it has been useful.

See you soon :)