O que é a metodologia BEM?

BEM (Bloco, Elemento, Modificador) — uma metodologia de nomeação de classes em CSS para criar código escalável e fácil de manter. O objetivo é tornar os componentes independentes, reutilizáveis e facilmente modificáveis.

Princípios básicos:

Bloco: Componente independente, com um nome único. Pode conter elementos e outros blocos.
```
<div class="card">...</div>
```
Elemento: Parte do bloco que não tem significado independente fora do contexto do bloco. O nome do elemento é separado do nome do bloco por dois underlines (__).
```
<div class="card">
  <h2 class="card__title">...</h2>
  <p class="card__text">...</p>
</div>
```
Modificador: Adiciona estado ou altera a aparência/comportamento do bloco ou elemento. O nome do modificador é separado do nome do bloco ou elemento por dois hífens (--).
```
<button class="button button--primary button--disabled">...</button>
<div class="card card--featured">...</div>
```

Vantagens:

Legibilidade: As classes são fáceis de entender, a estrutura do componente é visível.
Reutilização: Os componentes são independentes e podem ser usados em diferentes partes do projeto.
Manutenção: As mudanças em um componente afetam minimamente os outros.
Escalabilidade: Adequado para grandes equipes e projetos.

Exemplo de estrutura:

.card {
  /* Estilos do bloco */
}

.card__title {
  /* Estilos do elemento */
}

.card__text {
  /* Estilos do elemento */
}

.card--featured {
  /* Estilos do modificador do bloco */
}

.button {
  /* Estilos do bloco */
}

.button--primary {
  /* Estilos do modificador do bloco */
}

.button--disabled {
  /* Estilos do modificador do bloco */
}