[Dúvida] Dúvida na implementação da metodologia BEM

Oi Marcos, tudo bem?

Acho que o primeiro passo seria analisar a estrutura de HTML que você está utilizando. Vamos começar lembrando o uso de ul e li. Essas tags são utilizadas para a criação de listas e, pelo que posso ver aqui, não é exatamente o caso.

Podemos então pensar em uma nova estrutura para o seu HTML que também facilitaria a utilização da metodologia BEM.

Outra solução seria definir um uso para a palavra título. Afinal, só deveria haver um por seção. Talvez a utilização de subtítulo para o h4 fosse melhor. Além disso, também é possível alterar as classes para que tenha outra palavra "principal". Por exemplo, trocar o experiencia__conteudo por experiencia__projeto para que dentro dessa div você possa chamar cada tag filha como projeto__titulo.

Claro que daria para fazer a mesma coisa com a palavra conteúdo, porém ficaria um pouco mais genérico, com risco de ter classes repetidas indesejadas.

Um abraço e bons estudos.

Apenas simplifique o exemplo a único li para não alongar o código no fórum, mas se tratava de uma lista. Já dei uma analisada e tentei implementar a metodologia novamente.

<section class="experiencias container" id="experiencia">
  <h3 class="titulo--centralizado titulo">Experiência profissional</h3>
  <ul class="experiencia__lista">
    <li class="experiencia__item">
      <img src="img/decodificador-de-texto.png" class="experiencia__imagem"
        alt="Imagem do decodificador de texto do Challenge Alura">
      <div class="experiencia__conteudo">
        <h4 class="experiencia__titulo">Decodificador de texto</h4>
        <p class="experiencia__descricao">Challenge Alura Codificador</p>
        <a href="https://github.com/getmarcos/decodificador-de-texto" target="_blank"
          class="experiencia__botao botao">Repositório</a>
        <a href="https://getmarcos.github.io/decodificador-de-texto" target="_blank"
          class="experiencia__botao botao">Ver demo</a>
      </div>
    </li>
    <li class="experiencia__item">
      <img src="img/forca.jpg" class="experiencia__imagem"
        alt="Imagem do jogo da forca criado com HTML, CSS e JavaScript">
      <div class="experiencia__conteudo">
        <h4 class="experiencia__titulo">Jogo criado com HTML, CSS e JavaScript</h4>
        <p class="experiencia__descricao">Challenge Oracle</p>
        <a href="https://github.com/getmarcos/jogo-forca" target="_blank"
          class="experiencia__botao botao">Repositório</a>
        <a href="https://getmarcos.github.io/jogo-forca" target="_blank" class="experiencia__botao botao">Ver
          demo</a>
      </div>
    </li>
    <li class="experiencia__item">
      <img src="img/imersao-java.png" class="experiencia__imagem"
        alt="Imagem do projeto criado na Imersão Java, código criado para consumir API e criar stickers">
      <div class="experiencia__conteudo">
        <h4 class="experiencia__titulo">Imersão Java</h4>
        <p class="experiencia__descricao">Alura</p>
        <a href="https://github.com/getmarcos/imersao-java" target="_blank"
          class="experiencia__botao botao">Repositório</a>
        <a href="https://github.com/getmarcos/imersao-java" target="_blank" class="experiencia__botao botao">Ver
          demo</a>
      </div>
    </li>
    <li class="experiencia__item">
      <img src="img/maratona-explorer.jpg" class="experiencia__imagem"
        alt="Imagem do jogo da sorte criado na Maratona Explorex">
      <div class="experiencia__conteudo">
        <h4 class="experiencia__titulo">Maratona Explorer</h4>
        <p class="experiencia__descricao">Rocketseat</p>
        <a href="https://github.com/getmarcos/maratona-explorer" target="_blank"
          class="experiencia__botao botao">Repositório</a>
        <a href="https://getmarcos.github.io/maratona-explorer/" target="_blank"
          class="experiencia__botao botao">Ver demo</a>
      </div>
    </li>
  </ul>
</section>