Wprowadzenie do metodyki BEM

#Czym jest BEM?

BEM (Block, Element, Modifier) to metodyka nazewnictwa klas CSS, która pomaga tworzyć komponenty interfejsu użytkownika w sposób modularny i łatwy do utrzymania. BEM dzieli interfejs na bloki, elementy i modyfikatory, co pozwala na lepszą organizację kodu CSS.

#Struktura BEM

#Blok

Blok jest samodzielnym komponentem, który może istnieć niezależnie. Może to być przycisk, nagłówek, formularz itp. Blok jest reprezentowany przez klasę główną.

<div class="block">Treść bloku</div>

#Element

Element jest częścią bloku, która nie może istnieć bez niego. Elementy są reprezentowane przez klasę bloku, po której następuje podwójny podkreślnik (__).

<div class="block">
  <div class="block__element">Treść elementu</div>
</div>

#Modyfikator

Modyfikator zmienia wygląd lub zachowanie bloku lub elementu. Modyfikatory są reprezentowane przez pojedynczy podkreślnik (_).

<div class="block block--modifier">Treść zmodyfikowanego bloku</div>
<div class="block__element block__element--modifier">
  Treść zmodyfikowanego elementu
</div>

#Przykład

Przykładowy kod HTML z zastosowaniem BEM:

<div class="button button--primary">
  <span class="button__text">Kliknij mnie</span>
</div>

Odpowiadający kod CSS:

.button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button--primary {
  background-color: blue;
  color: white;
}

.button__text {
  font-size: 16px;
}

#Zasady BEM

1. Nazwa bloku: Powinna być krótka i jednoznaczna, opisująca funkcję lub zawartość komponentu.
2. Nazwa elementu: Powinna jasno określać, co robi element w kontekście bloku.
3. Nazwa modyfikatora: Powinna opisywać, jak zmienia się blok lub element.

#Przykłady

#Formularz logowania

HTML:

<form class="form form--login">
  <div class="form__group">
    <label class="form__label" for="username">Nazwa użytkownika</label>
    <input class="form__input" type="text" id="username" name="username" />
  </div>
  <div class="form__group">
    <label class="form__label" for="password">Hasło</label>
    <input class="form__input" type="password" id="password" name="password" />
  </div>
  <button class="form__button form__button--submit">Zaloguj się</button>
</form>

CSS:

.form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form--login {
  background-color: #f9f9f9;
}

.form__group {
  margin-bottom: 15px;
}

.form__label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form__input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.form__button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.form__button--submit {
  background-color: blue;
  color: white;
}

#Zadania do wykonania

#Zadanie 1

Utwórz komponent karty produktu (product-card) z elementami dla tytułu (product-card__title), opisu (product-card__description) i ceny (product-card__price). Dodaj modyfikator dla karty wyróżnionej (product-card--featured).

<div class="product-card product-card--featured">
  <h2 class="product-card__title">Nazwa produktu</h2>
  <p class="product-card__description">Opis produktu</p>
  <span class="product-card__price">99,99 zł</span>
</div>

.product-card {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
}

.product-card--featured {
  border-color: gold;
  background-color: #fffbf0;
}

.product-card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.product-card__description {
  font-size: 14px;
  margin-bottom: 15px;
}

.product-card__price {
  font-size: 16px;
  font-weight: bold;
}

#Zadanie 2

Stwórz nawigację (nav) z elementami dla pozycji nawigacji (nav__item) i linków (nav__link). Dodaj modyfikator dla aktywnego linku (nav__link--active).

<nav class="nav">
  <ul>
    <li class="nav__item">
      <a href="#" class="nav__link nav__link--active">Home</a>
    </li>
    <li class="nav__item"><a href="#" class="nav__link">O nas</a></li>
    <li class="nav__item"><a href="#" class="nav__link">Kontakt</a></li>
  </ul>
</nav>

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__item {
  display: inline;
  margin-right: 15px;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__link--active {
  font-weight: bold;
  text-decoration: underline;
}

#Zadanie 3

Utwórz sekcję artykułu (article) z elementami dla nagłówka (article__header), treści (article__content) i stopki (article__footer). Dodaj modyfikator dla nagłówka z obrazkiem (article__header--with-image).

<article class="article">
  <header class="article__header article__header--with-image">
    <h1>Tytuł artykułu</h1>
    <img src="image.jpg" alt="Obrazek w nagłówku" />
  </header>
  <section class="article__content">
    <p>Treść artykułu...</p>
  </section>
  <footer class="article__footer">
    <p>Stopka artykułu</p>
  </footer>
</article>

.article {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
}

.article__header {
  margin-bottom: 15px;
}

.article__header--with-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.article__content {
  margin-bottom: 15px;
}

.article__footer {
  font-size: 14px;
  color: #777;
}

To tyle na temat podstaw metodyki BEM! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej modularne i łatwe do utrzymania style CSS.