22. Co to jest BEM (Block Element Modifier) i jakie są jego zalety w tworzeniu struktury CSS?

BEM to metodologia nazewnictwa klas CSS, która pomaga w tworzeniu zrozumiałych i skalowalnych struktur kodu CSS. BEM dzieli komponenty na trzy główne części:

• Block (B): Niezależny byt, który może być użyty wielokrotnie, np. .button.
• Element (E): Część bloku, która nie ma sensu bez bloku, np. .button__text.
• Modifier (M): Zmienna wersja bloku lub elementu, np. .button--primary.

Zalety BEM :

• Czytelność: Jasne i zrozumiałe nazewnictwo klas.
• Modularność: Ułatwia ponowne użycie kodu.
• Uniknięcie konfliktów: Zmniejsza ryzyko konfliktów nazw.

/* Przykłady */
.button {
    background-color: blue;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button--primary {
    background-color: green;
}

.button__text {
    font-size: 16px;
}