araujlarissa / hora-do-codigo-modulo-02-aceleradev

Aplicação desenvolvida durante o módulo 02 do Aceleradev React da Codenation

💻 🏃 Acelera Dev React 🏃 💻

📌 BEM (Block Element Modifier)

A sigla BEM significa block, element e modifier, é uma metodologia que é aplicada na nomenclatura das classes CSS dos nossos elementos HTML.

Estrutura:

.card__item--active
 ^--^  ^--^  ^----^
 |     |     |
 |     |     +-> Modifier.
 |     |
 |     +-> Element
 |
 +-> Block

O __ indica um element e o -- indica um modifier. Tudo que vem antes do __ é um block.

Exemplo da estrutura em HTML:

<div class="card">
  <ul class="card__list">
    <li class="card__item card__item--active">Figma</li>
    <li class="card__item">Invision</li>
    <li class="card__item">Adobe XD</li>
  </ul>
</div>

💻 Exemplo prático

Nesse projeto usamos o BEM (Block Element Modifier), a fim de padronizar a nomenclatura das classes desse card.

---

Made by 💙 by Larissa Araújo