Aprenda sobre a metodologia BEM (Block-Element-Modifier) para nomear suas classes de CSS.

Metodologia BEM para CSS

Metodologia BEM para Classes de CSS

# Resumo da Aula sobre Metodologia BEM

Nesta aula, discutimos a metodologia BEM (Block Element Modifier), que se relaciona à organização de classes CSS e à estruturação de elementos HTML em desenvolvimento web. 

## O que é BEM?

- **BEM**: Significa Bloco, Elemento e Modificador.
- **Bloco**: Unidade isolada da interface que tem significado próprio. Por exemplo, um botão ou um formulário.
- **Elemento**: Parte do bloco que só faz sentido dentro do seu bloco. Se isolado, não terá significado.
- **Modificador**: Modifica a aparência ou o comportamento de um bloco ou de um elemento, como variações de cor ou tamanho.

## Principais Características

- **Modularidade**: Os blocos são independentes, permitindo código reutilizável.
- **Flexibilidade**: A metodologia permite compor e configurar os elementos de maneira ajustável.

## Exemplo Prático

Um botão pode ter diferentes modificadores para cores (sucesso, aviso, etc.) sendo cada cor um estado diferente do botão.

Para mais informações, você pode consultar o site [getbem.com](http://getbem.com).

## Próximos Passos

Na próxima aula, continuaremos a explorar a metodologia BEM e sua aplicação.

O local pessoal, essa aula vai ser sobre a metodologia de BEM.
Então, isso vai ser relacionado ao CSS e à nomeação das classes dos vários elementos de HTML.
Então, BEM, block element modifier, block elemento e modificador, está aqui a página, se você quiser dar uma olhada, getbem.com.
Então, essa é uma metodologia para a gente usar quando a gente estiver criando nossos componentes,
é utilizáveis na web, o desenvolvimento web.
Então, a gente tem o HTML para fornecer a estrutura ao nosso site, ao nossos aplicativos.
Então, a gente é muito comum a gente aplicar classes de CSS para poder mudar o estilo de cada elemento.
A gente escreve folhas de CSS para definir o estilo daquele documento de HTML.
O BEM, block elemento modificador, como diz aqui no site, a metodologia,
para ajudar a gente a criar componentes real utilizáveis e compartilhar o código no desenvolvimento de front-end, que é o que fala aqui.
Então, o que é esse negócio? Aqui tem várias coisas que ele diz, é fácil, é modular e é flexível.
Então, para poder usar BEM, é muito simples, você só vai nomear as classes de CSS de uma certa maneira.
A gente vai aprender como nomear essas classes.
Então, isso de detalhes de ser modular, porque os blocos que a gente vai criar são independentes.
Então, isso faz com que o selector de CSS, como você tem um código, que pode ser real utilizável.
Flexível, porque tem metodologia, ferramentas, não sei o que, pode ser compostos e configuradas na sua maneira.
Então, depois de blá blá blá, se você quiser olhar no site para ter mais uma referência, vai aqui no getbm.com.
Eu vou clicar no introduction aqui, só para a gente ir dar um olhado nessas coisas.
Se você quiser dar um olhado, introdução, não sei o que.
O principal que a gente deve aprender é o seguinte, é BEM.
Lembre-se, BEM significa bloco, elemento e modificador.
Você sempre vai começar com o bloco.
O bloco vai ser, por exemplo, uma unidade na sua interface de usuário que pode ser isolada.
É o que diz aqui, tem um certo significado, se você pegar aquela parte e isolar, tem significado.
Aí, cada bloco vai ter vários elementos, pode ter vários elementos, certo?
Esses elementos só podem existir dentro do bloco.
Se você pegar um negócio e tirar de dentro daquele bloco e não tiver nenhum significado quando você isolar,
então aquilo não é um elemento.
Desculpa, aquilo não pode ser existir sem o bloco, certo?
Então, se você pegar aquele negócio e tirar, você vai notar, ok.
Isso não é o bloco, porque se eu isolar, ele não tem significado.
Por isso, ele só pode ser um elemento.
Agora, tem um negócio do modificador que é usado no bloco ou no elemento para poder modificar a aparência,
ou a atitude, certo?
Isso significa coisas como, por exemplo, se você tiver um botão.
Então, o botão, se você mostrar aqui no bootstrap, por exemplo,
aqui os exemplos e botões do bootstrap.
Tem várias cores, não é?
Então, cada cor é um estado diferente desse botão.
Então, isso aqui vai ser um modificador.
Modificador para a pôa com azul, modificador para a pôa com verde, que é de sucesso.
Modificador amare para poder dar mensagem de warning, assim por diante.
Então, esse é o modificador.
Modificador também pode ser, por exemplo, aumentar a tamanho da fonte para fazer outras coisas, certo?
Então, ele modifica o bloco ou o elemento.
Certo? Então, é o bloco, elemento e modificador.
Então, isso é o BEM.
Então, eu gostaria de dar uma pausa, só para você poder entender esse negócio.
Aí, na próxima aula, a gente vai continuar a aprender a metodologia de BEM.
Valeu, então.


000e-01 Metodologia BEM para Classes de CSS

Mais Sobre o BEM e o Padrão de Nomeação das Classes de CSS

```markdown
# Resumo da Apresentação sobre BAM (Bloco, Elemento, Modificador)

## Introdução ao BAM
- **BAM** significa **Bloco, Elemento, Modificador** (Block Element Modifier).
- A metodologia ajuda a estruturar CSS de forma mais lógica e organizada.

## Exemplos Práticos
- A apresentação analisou exemplos na página do **gethub**, identificando diferentes partes da interface:
  - **Blocos** têm significado próprio (e.g., logo, caixa de busca).
  - **Elementos** são partes de um bloco e não têm significado isolado (e.g., opções do menu).
  
## Estruturas de Blocos e Elementos
- Cada opção em um menu é um **elemento** de um bloco de menu.
- Um botão logar é um **bloco** com elementos (como texto do botão).
- Modificadores podem ser aplicados tanto em blocos quanto em elementos.

## Nomeação em BAM
- O padrão de nomenclatura consiste em:
  - **Bloco**: `nome-bloco`
  - **Elemento**: `nome-bloco__nome-elemento`
  - **Modificador**: `nome-bloco--nome-modificador`
- Os elementos sempre devem estar dentro de um bloco.

## Prática com HTML
- A apresentação propôs um exercício prático, criando um botão utilizando a metodologia BAM.
- Foi sugerido fazer uso de `div` para estruturar o botão, com classes nomeadas seguindo o padrão BAM.

## Conclusão
- A importância de seguir a nomenclatura apropriada foi enfatizada para manter a organização do código.
```


Pala pessoal, voltamos aqui na sala de metodologia BAM. Então, o que é que significa BAM?
Quero ver você falar. Isso mesmo. Bloco Element Modificado.
Bloco Element Modifier. Ok.
Então, continuando a rodar mais uma olhada aqui na página do getbm.com.
Barra Introduction. A introdução aqui que ele dá, eles dão exemplos como o bloco, como se fosse.
Vamos dar uma olhada aqui nessa imagem. Por exemplo, dá o exemplo da página do gethub.
Tem o logo do gethub. Tem essa caixa de busca.
Tem esse menu. Usa o botão e assim por diante.
Então, dá uma olhada aí nas cores. Se você conseguir ver as cores aqui.
O bloco vai estar em verde. A fonte vai estar em verde. O elemento vai estar nessa cor azulzinha.
E o modificador em vermelho. Então, se você notar aqui, o logo do gethub, se você pegar esse cara e isolar,
tem significado, não é? Que é o próprio logo. Então, vai ser um bloco.
Certo? A caixa de busca também tem significado se você remover essa parte da interface de usuário e olhar em isolamento.
O menu, nesse caso aqui, se você só tirar uma parte do menu, que é esse explore,
nesse caso aqui tem um menu que está combinado com os outros três. Então, ele fez da seguinte maneira.
O negócio todo é um bloco. Certo? Mas se você tirar o texto, não vai ter significado assim,
se não tiver no menu, nesse caso. É meio complicado esse negócio porque é o texto,
mas vamos pensar assim, você tem o menu, que é o negócio todo. Aí, esse é o bloco.
O bloco de menu, incluindo essas quatro opções. Aí, cada opção é um elemento, certo?
Ele chama de menu element, elemento de menu. Então, você vai estar dentro desse bloco, vai ter quatro elementos.
Note que os elementos não podem existir por si próprios. Eles têm que estar sempre dentro de um bloco.
E muito importante isso. Elementes não existem em isolamento, certo? Por si próprios.
Aí, vamos no próximo. O botão de logar é um bloco, certo? Que tem significado por si só.
Aí, tem essas caixas aqui de texto. Então, cada caixa de texto, você é um input, que é um bloco.
E se você quiser fazer o input ter um tamanho maior, não é? Nesse caso aqui, você é de sono modificador size big.
Vai ver melhor aqui. Continuando esse botão aqui de registrar. É um botão que parece com esse outro botão aqui.
Por isso, eles compartilham o mesmo bloco, exceto que a cor do fundo e da texta mudou para verde e branco, respectivamente.
Porque tem um modificador thin green do tema verde, que é de sucesso. Certo?
Você note que o modificador aqui pode ser aplicado no bloco. Também pode ser aplicado ao elemento, mas aqui não temos nesse caso.
A não ser que você pense de outra maneira aqui no botão, por exemplo, você pode pensar de outra maneira.
O botão possível é o bloco e o texto é o elemento, parte do botão. Então, você pode dizer, você pode ser button text,
texto do botão aqui, precário de dentro. Aí, você pode pensar dessa maneira também.
E o texto seria o elemento, parte do bloco do botão. É outra maneira de pensar, a metodologia é...
Continuando aqui, você vê aqui mais exemplos do botão, que tem várias coisas. E assim por diante. Certo?
Agora, eu quero partir para a prática. Então, vamos lá. Vamos dar uma olhada aqui nesse botão do bootstraps aqui, esses exemplos.
Então, tem vários exemplos aqui. Então, eu vou te explicar como fazer um botão aqui no estilo como não mear as classes no BAM.
Deixa eu abrir o editor de texto. Aí, eu quero deixar esse cara aqui do lado do editor de texto. Certo?
Só para ter uma referência. Vamos supor que a gente já tem os estilos, a folha de estilo definida.
E basta a gente só aplicar as classes. Então, a gente vai fazer o seguinte. Vou escrever aqui o HTML no lado direito, na maneira de BAM.
Vamos nomear as classes de maneira BAM. Primeiro, a gente começa com estrutura. Vamos pensar a estrutura assim.
Então, o botão tem o container e dentro do container tem o que? O texto. Então, só vai ter duas coisas.
Então, vamos fazer tudo com div. Está certo? Então, vai ter uma div aqui.
Essa div vai ser para o container. Dentro dessa div tem o texto. Por exemplo, vou botar primary aqui. Só para dizer que é assim primeiro.
Esse aqui é o texto do botão e esse aqui é o container do botão. Agora, o container vai ser o que? Bloco elemento ou modificador.
Vai ser um bloco, porque você pode isolar esse cara com o próprio componente da interface de usuário e o componente de botão.
Então, vou dar uma classe. Você sempre vai usar a classe e dá o certo nome seguindo um padrão de BAM.
O padrão é o seguinte. Vou te explicar aqui. Você fala sempre assim. Você dá o nome para o bloco.
Nome do bloco seguido, se tiver seguido de 2 underscores, seguido do nome do elemento.
E se você tiver modificador, é dois traços. Modificador. Certo?
Agora, não precisa ter os três. Pode ter só o bloco. Pode ter o bloco.
O elemento, esse cara significa o elemento, mas note que sempre o elemento tem que estar dentro do bloco.
Aí pode ter também modificador, seja no bloco, como no elemento.
Esse primeiro é o bloco. Você também pode ter modificador. Então, ponho os dois traços seguidos do nome do modificador.
O elemento sempre tem que estar ao prefixo do nome do bloco e dois underscores. Certo?
Então, essa é a nomeação, o padrão de nomeação de BAM.
Gostaria de dar uma pausa aqui.
Para você dar uma revisada aqui, nesse padrão, antes, a gente partir para nomear esse bloco, esse botão no padrão BAM.
Então, até lá.


000e-02 Mais Sobre o BEM e o Padrão de Nomeação das Classes de CSS

Escrevendo Nomes de Classe na Maneira do BEM

# Resumo do Transcript

Nesta aula, discutimos como criar um botão usando o método BEM (Block Element Modifier). 

## Estrutura do Botão
- **Bloco**: O botão em si é o bloco, nomeado como `botão`.
- **Elemento**: O texto dentro do botão é um elemento, nomeado como `botão__texto`.
  
  Exemplo: 
  ```html
  <div class="botão">
    <span class="botão__texto">Texto do Botão</span>
  </div>
  ```

## Modificadores
- Para criar variações de estilo, utilizamos modificadores, que são responsáveis por alterar as propriedades do bloco.
- Exemplo de um modificador que altera a cor de fundo para azul:
  ```html
  <div class="botão botão--cor-azul">
  ```

## Importante sobre Nomenclatura
- As classes devem seguir a regra do BEM, onde um modificador deve sempre ter um bloco ou elemento precedendo-o.
- Uma classe incorreta seria `botão--cor-branco` se não houver um elemento ou bloco correspondente antes.

## Considerações sobre o uso do BEM
- O uso do método BEM para nomear classes resulta em nomes longos, o que é uma crítica comum, mas oferece flexibilidade na reutilização de componentes.
- Modificadores podem sobrescrever estilos. O estilo da classe modificada terá precedência sobre o estilo original.

## Conclusão
O método BEM é uma abordagem eficaz para estruturar CSS, e é essencial seguir suas regras para garantir um código limpo e reutilizável. 

Até a próxima aula!

Estamos de volta, agora vamos fazer esse botão aqui, primary, que tem cor de fundo azul.
Então, a maneira que eu vou fazer aqui é usando o bloco, que é o contêiner do botão,
e o elemento que sempre pertence a um bloco, vai ser o texto.
Note que eu também poderia fazer dessa maneira aqui, só com o bloco já contendo o texto,
mas eu posso também fazer a maneira de pensar como o texto, como um elemento,
para poder ter mais controle sobre esse cara.
Então aqui, seguindo a regra aqui de nomeação, que a gente aprendeu,
o bloco vai ser nomeado, vamos chamar de botão.
Certo? Agora, com esse elemento, que é o texto do botão, nós vamos nomear da seguinte maneira.
Primeiro, eu posso ter que dizer, aqui bloco, esse elemento pertence,
portanto, tem o prefixo botão, seguido de 2 underscores.
Aí você diz o nome do elemento. Eu posso dizer só texto, dessa maneira.
Então, esse é um elemento texto, pertence ao bloco do botão.
Sempre dessa maneira, certo?
Então, é assim que a gente define esse bloco para o botão, com o texto do botão, um elemento, usando BAM.
Agora, você note que cada botão está dentro do contêiner, que parece ter os mesmos estilos,
exceto que a cor de fundo é diferente, ou o texto, algumas vezes, tem cor diferente.
Para poder ter essas variações, a gente adiciona modificadores.
Então, para o primeiro botão, a gente vai ter o modificador, dessa maneira aqui.
O botão, aí você modifica o bloco, eu quero que o botão seja cor azul, por exemplo.
Então, eu vou adicionar cor de fundo.
Alguma coisa assim, você faz a própria nomeação.
Note que, seja o bloco, seja o modificador, seja o elemento, você pode separar as palavras com o traço.
Esse aqui é o nome do modificador.
Pode adicionar a cor de fundo azul, dessa maneira.
Então, esse cara aqui, a gente vai fazer o seguinte.
Você pega e tem essa classe botão, você adiciona uma nova classe.
Note que é uma nova classe.
Não, você não muda a classe original, você adiciona uma mais.
Então, você tem a classe do botão, que determina o estilo fundamental do botão.
Aí, você adiciona outra classe, que é contêiner o modificador.
Você determina, tem que ter o nome da coisa que você está modificando.
Então, você tem o botão, que é o elemento, que vai ser modificado com o modificador cor de fundo azul.
Que eu espero que o estilo define a cor de fundo para ser azul.
Certo?
Agora, da mesma maneira, você pode fazer também para o texto.
Nesse caso aqui, você tem o texto branco branco branco, mas tem preto aqui, preto aqui.
Tem um do link aqui.
Então, você pode escolher o texto, o acordo texto padrão para ser branco.
E mudar para preta, se você tiver esse light ou warning.
Ou você pode deixar preto e ter que adicionar uma classe adicional para mudar o texto do botão para branco.
Qualquer maneira.
Mas como eu quero desustrar o uso do BEM nesse elemento de texto, eu vou adicionar aqui o modificador.
Por exemplo, o botão texto com a cor do texto branco.
Então, você tem a classe original, aí você adiciona o modificador cor branco para o texto.
Sempre tem que estar seguido daquela coisa que você vai modificar.
Note que sempre tem uma classe adicional.
Se eu fizer assim, isso está errado.
Por quê? Porque você tem um modificador aqui e o modificador precisa de um elemento ou de um bloco.
Nesse caso, não tem.
Então, está errado.
Tem que ter o elemento precedente aqui, antes do modificador.
Esse detalhe.
Então, esse cara aqui também, por exemplo, você vai remover o bloco.
Está errado.
Porque não tem bloco precedente.
Então, esse cara está sendo aplicado a nada.
Porque não existe o bloco-butão.
Sempre tem que estar assim, certo?
Você note que por causa disso, o BEM, os nomes da classe, faz a propriedade que o atributo-classe ser meio longo.
E essa é uma das críticas do BEM, porque o nome das classes fica muito longo.
Mas é uma escolha que você faz para poder ter acesso àquela flexibilidade e para poder reutilizar os componentes e essas coisas.
Por exemplo, o botão tem o cor de fundo original, mas quando você adiciona uma classe adicional que muda o cor de fundo para outra coisa,
quem vai levar precedência aqui é a classe que foi seguida do original.
Então, o cor de fundo original não vai ser mais aplicada ao invés dessa cor, vai ser a cor de fundo azul aqui, dessa classe.
Certo?
Então, esse é o botão.
Estão por essa aula só e até a próxima.


000e-03 Escrevendo Nomes de Classe na Maneira do BEM

Exemplo Concreto de um Botão na Maneira BEM

```markdown
# Aula Prática sobre Botões com BAM

## Introdução
Na aula de hoje, vamos aplicar os princípios do BAM (Bloco, Elemento, Modificador) para criar um botão personalizado utilizando o site JSferol.net.

## Estrutura do Botão
1. **Classes Utilizadas:**
   - `bloco`: Classe responsável pelo bloco do botão.
   - `tiles`: Para um fundo cinza e bordas arredondadas.
   - `bootcursor`: Para indicar que o elemento é clicável.
   - `display inline block`: Para evitar que o botão ocupe toda a linha.
   - `padding`: Para adicionar espaço ao redor do texto.

2. **Elemento de Texto:**
   - Usamos `texto` como elemento dentro do bloco do botão.
   - A cor do texto é definida como `040404`, enquanto a cor de fundo do bloco pode ser definida de forma mais geral.

## Modificação de Aparência
- Para alterar a aparência do botão (por exemplo, para verde "sucesso" do Bootstrap):
  - Adicione uma classe modificadora, como `sucesso`, que define um fundo verde claro (`light green`).
  - Use `texto__sucesso` para modificar a cor do texto.

## Demonstração
- Execute o código para ver as alterações:
  - O fundo do botão passa a ser verde claro ao invés de cinza.
  - A cor do texto é alterada conforme a classe modificadora aplicada.

## Uso de Vários Modificadores
- Você pode adicionar múltiplos modificadores. Por exemplo, para que o texto do botão apareça em maiúsculas:
  - Use `botão__maiuscula` aplicada ao bloco do botão.

## Considerações Finais
- Lembre-se que:
  - Elementos sempre pertencem a um bloco.
  - Modificadores são sempre adicionados para modificar um bloco ou elemento específico.
  
Até a próxima aula!
```

Fala pessoal, agora que a gente já aprendeu os princípios do BAM vamos lá para uma aula
mais prática aqui onde a gente vai ver o próprio componente da interface de usuário
vou usar o JSferol.net, se quiser que você saça esse cara aqui, só aí nesse link
JSferol.net-nbcarrow-esse-negoce aqui
então vamos lá, então a gente já tinha feito no interior esse botão com um
azul do bootstrap, vou tirar esse aqui, esse cara aqui, então agora eu quero partir para
a gente fazer o nosso próprio botão, então já tenho aqui as seguintes classes, certo?
Eu tenho a classe para o botão, nesse caso aqui esse cara é o que? É o bloco, aí você tem esses
tiles, codefundo cinza, adiciona a borda, borda arredondada, bootcursor para esse cara aqui,
pondo, a display inline block, ele não poder tomar toda a linha e um pairing para adicionar
espaço ao redor da texta, esse cara vai ser quem? Vai ser o bloco, não é o bloco?
Agora dentro do bloco tem um elemento que é o texto, então a gente usa o underscore
no score, texto, para esse cara você vai definir mais outros tiles, que está aqui,
nesse caso eu defino a cor de texto como 040404, note que você também poderia definir a
cor do texto, do próprio bloco do botão, mas escolhi mais específico aqui para ser o próprio
texto, então esse aqui é um elemento, elemento sempre pertence a um bloco, nesse caso o bloco
do botão e eu tenho um elemento que é o texto, agora se a gente quiser modificar por exemplo
o bloco, eu quero que esse botão tenha outra aparência, aparência por exemplo da desucessa,
no bootstrap esse verdinho aqui, então eu vou fazer aqui, é o seguinte, não mais maneiro que a gente
fez anteriormente, deixa eu adicionar esse outro cara para você ver, então você vai fazer o bloco
de maneira e adicionar uma classe adicional com modificador sucesso por exemplo, eu dei
nome para o modificador de sucesso, sucesso você define a classe com o background light green
que no meu caso, é um verde assim, certo? Aí para mudar a cor do texto eu só adicionei um
modificador ao elemento, botão underscore underscore text que é o elemento prefix,
seguido do traço-traço sucesso que é uma classe modificadora, sempre tem que ter
classe adicional, não se esqueça disso, não pode ter dessa maneira aqui, está errado, certo?
Agora vamos ver o que dá, eu vou dar o run aqui, então aqui o outro botão, esse outro botão vai ter
não só essa classe aqui por exemplo para o bloco, ele vai pegar esse cara e adicionar o background
cola, vai mudar o background cola do botão de cinza para light green, note que a classe seguida
tem para essa adência, então esse background cinza vai ser, não vai ser aplicado ao invés
disso vai ser aplicado o background color da classe modificadora sucesso, mesma coisa para o
botão texto de sucesso, nesse caso aqui eu botei com preto, se você quiser visualizar
o primeiro aqui para você ver que realmente muda, então adicione a classe modificadora que
vai modificar a cor original do texto ao invés de aplicar esse estilo de 040404 para a cor,
vai ser a cor preta 0 0 0 0 0, certo?
Agora se você quiser por exemplo, você quer que o botão tenha as letras maiúsculas,
todas as letras, você pode sim ter vários, mais de um modificador, por exemplo, para poder fazer
letra maiúscula você pode adicionar aqui outro modificador, por exemplo, botão, texto,
esse pertence, esse elemento modificador, letra maiúscula, maiúscula, eu defini esse cara dessa
maneira aqui, esse é o modificador, ou eu defini no botão, então deixa eu por no botão ao invés
tanto faz, certo? Então eu vou remover esse cara, se você botar no botão, você vai sonar aqui,
aqui em vez do texto vai ser o próprio bloco que vai ser modificado com letra maiúscula,
certo? Vai ser o bloco-botão, vou dar o run, agora você note que todas as letras do botão
são maiúsculas agora, são maiúsculas, então note sempre ter que adicionar uma classe
seguida das originais do próprio bloco nesse caso, porque não há modificador
por si próprio, não pode ter modificador por si próprio, não pode ter elemento por si próprio,
elemento sempre pertence a um bloco, modificador sempre é adicionado
para modificar um bloco ou um elemento, tá certo?
Então é isso por essa aula, é só e até a próxima!


000e-04 Exemplo Concreto de um Botão na Maneira BEM

Detalhes da Nomeação BEM (Tome cuidado!)

# Resumo da Metodologia BEM

Olá pessoal, estamos de volta com a metodologia BEM (Bloco Element Modificador) para nomeação de classes CSS. Vamos praticar um exemplo mais complexo e esclarecer algumas regras importantes.

## Regras do BEM

1. **Estrutura de Blocos e Elementos**:
   - Cada bloco deve conter apenas elementos. Não se deve adicionar múltiplos sufixos de elementos dentro de um mesmo bloco.
   - Um elemento deve ser parte de um bloco, portanto, se um componente tiver sentido por si só, deve ser criado um novo bloco.

2. **Modificadores**:
   - Para cada modificador, é necessário adicionar uma classe adicional. Não se deve combinar modificadores em uma única classe, pois isso gera confusão na aplicação de estilos.
   - O nome do modificador deve sempre seguir o prefixo do bloco ou do elemento correspondente.

3. **Isolamento de Elementos**:
   - Não é permitido ter um elemento sem um bloco pai. Um elemento deve sempre estar associado a um bloco que o contém.
   - Caso um elemento não tenha uma relação clara com um bloco, ele pode se tornar um bloco por mérito próprio, perdendo o prefixo.

## Conclusão

Essas são algumas regras fundamentais do BEM para garantir uma estrutura clara e consistente no desenvolvimento de interfaces de usuário. Vamos dar uma pausa por hoje e continuaremos na próxima. Valeu!

Olá pessoal, estamos de volta no sorprendizado da metodologia BEM,
Bloco Element Modificador, Bloco Element Modifier.
Para a gente nomear nossos classes de CSS,
eu seto padrão.
Agora, vamos fazer um exemplo mais complexo,
vamos praticar mais.
Antes disso, queria só dizer uma coisa aqui.
Vamos aqui no editor de texto.
A gente aprendeu o padrão do BEM,
mas eu queria te falar uma coisa, certas coisas aqui
não são permitidas no BEM, se você fizer, por exemplo.
Dessa maneira, esse aqui é o elemento,
aí você põe outro suffixo de elemento,
isso aqui não pode fazer no BEM, é errado.
Certo?
Porque você só pode ter um elemento dentro de um bloco.
Certo?
Isso aqui não é certo, porque você quer ter o bloco,
e você quer isolar aquele componente de interface de usuário
na parte menor possível,
e que ainda faça sentido dentro daquilo vai ter elementos.
Certo? Se você tiver outra coisa dentro daquele bloco
que faz sentido por si próprio,
então você tem que criar um novo bloco.
Certo? Um novo bloco.
Ou você pode fazer se você tiver...
Você pode mudar o nome do elemento para ser outra coisa assim.
Certo?
Ser uma coisa só.
Mas sempre sugiro que você isolate e diminua
a interface de usuário, aquele componente
na menor maneira possível,
e que ainda tenha significado quando for isolado da interface.
Então, não faça isso.
Isso aqui está errado.
Está?
Está a mesma maneira aqui.
Agora eu quero te dizer que esse cara aqui...
Outro modificador também está errado.
Por quê?
Porque para cada modificador você quer adicionar uma classe adicional.
Esse aqui está errado. Como é que é a jeita?
Você separa e adiciona assim.
Tem esse modificador e tem esse outro modificador.
Está certo?
Então, sempre tem que ter o prefixo do bloco ou elemento.
Seguindo do modificador, do nome do modificador.
Se tiver múltiplos, você não pode fazer esse combinamento aqui, porque está errado.
Esse aqui significa o bloco.
Mas eu sei que você está parecendo dois modificadores.
O problema é que você não pode aplicar duas classes separadas
se você tem uma só classe.
Esse aqui é como se fosse somente uma classe.
Você tem que separar as classes para ter múltiplos estilos aplicados.
Estilos diferentes aplicados a esse bloco.
Essa é a outra detalhe que você tem que aprender.
Tem que citar o cara.
E é outra coisa também.
Se você tiver esse aqui...
Se você tiver esse cara isolado sem nenhum pai que tiver essa classe,
isso não pode existir como por quê?
Porque já mencionei várias vezes que não pode haver um elemento sem um bloco.
Esse cara aqui é um elemento, chamado algum elemento.
Você precisa ter o pai desse cara com o bloco.
Então, tem que ter esse cara se não tem elemento.
Tem que ter esse cara.
Agora, se você não tiver, você nem precisa ter o prefixo.
Se você realmente não tiver nada para pôr esse cara,
se tiver um sentido próprio, um sentido isolado, um significado,
você faz esse cara virar um bloco.
Embora que escrevia algum elemento aqui, agora esse cara virou o bloco,
porque não tem mais que ele prefixo.
Então, só fazer assim para corrigir o problema.
Você quer RG?
Certo?
Então, esses são os detalhes do BEM para você tomar cuidado.
Acho que já está na hora de a gente dar uma pausa aqui.
Continuar na próxima. Valeu.


000e-05 Detalhes da Nomeação BEM (Tome cuidado!)

Prática: Um Cartão na Metodologia BEM

# Resumo da Metodologia BEM em Desenvolvimento de Interfaces

## Introdução
- Retorno à metodologia BEM (Bloco, Elemento, Modificador).
  
## Prática com Cartão (Card)
- Vamos praticar a construção de um componente de interface, o cartão do Bootstrap.

## Estrutura do Card
1. **Container**: O bloco principal.
2. **Elementos do Card**:
   - Imagem
   - Título
   - Descrição
   - Botão

## Classes BEM
- A nomenclatura das classes deve seguir a estrutura:
  - `cartão__imagem`
  - `cartão__título`
  - `cartão__descrição`
  - `cartão__botão`

## Modificadores
- Os modificadores são usados para alterar o estilo de um bloco ou elemento. Exemplo:
  - `cartão__botão--azul`

## Observações Importantes
- Um elemento deve sempre pertencer a um bloco. Elementos isolados devem ser transformados em blocos.
- Evitar o uso de múltiplos elementos com um único nome de classe (duplo underscore).

## Considerações Finais
- A metodologia BEM promove a reutilização e flexibilidade, apesar da crítica sobre a extensão dos nomes das classes.
- É essencial seguir o padrão de blocos, elementos e modificadores para manter a clareza e evitar conflitos de estilo.

## Agradecimento
- Agradecimentos pela atenção e convite para o próximo encontro. 

--- 

Este resumo aborda os principais conceitos da metodologia BEM, destacando sua aplicação prática na construção de um cartão com a estrutura adequada e as nomenclaturas específicas.

Estamos de volta.
Metodologia BEM.
Vamos continuar.
E depois dos detalhes, agora é hora da gente
praticar e fazer
metodologia BEM para esse
componente de interface
de joar, chamado cartão, do bootstrap, por exemplo.
Card.
Então vamos lá. Vamos aqui no editor de texto.
Um lado da gente, para a gente abrir o nova.
A tem MLE.
Sobre o nova.
A BLE.
Se diminuir aqui para você ver melhor.
Então, vamos praticar juntos aqui.
Dá uma olhada aqui nesse cartão.
É um componente de interface de
joar que pode existir por si próprio.
Você note que também tem elementos
que poderiam também existir
como blocos, como esse botão aqui,
se fosse um botão especial.
Você perde pensar também dessa maneira.
Mas eu acho que nesse exemplo a gente vai pensar
nesse cara como um
bloco do próprio cartão.
Então temos essa imagem
que vai aparecer aqui.
Temos o título, temos a descrição,
descrição e temos o botão.
Então como é que vai ser? Primeiro,
esse cara todo vai ser o que?
O bloco.
Vamos fazer o NGVI. Vamos escrever.
Depois que a gente põe esse classe, tá bom?
Que tal? Vamos primeiro escrever a estrutura
com as devas. Então vai ser o container.
Dentro do container vai ter a imagem.
Vamos fazer o NGVI para a imagem.
Aí vai ter o título.
A descrição e vai ter o botão.
Certo? Mas parece que...
Vamos ver aqui a imagem.
É. Vamos deixar simples mesmo.
Pode ser que tenha outros containers aqui.
Dev, DT, DT, DT, DT, mas vamos deixar simples mesmo.
Ah, então.
Quem é o bloco? Vai ser o cartão.
Vamos chamar de cartão.
Então você vai ter o primeiro elemento.
Vai ser o que? A imagem.
Então você vai chamar como? Da classe?
Sempre tem que dizer o prefixo do nome do bloco.
Seguido do 2, 1, 2 cores e o nome do elemento.
Vamos chamar a imagem.
Aí, no próximo, o título.
Classe vai ser o que?
Qual o nome do bloco? Cartão.
Seguido do nome do elemento.
Vamos botar o título.
E assim por diante.
Quero ver você fazer aí para o si próprio.
Pause o vídeo.
Depois a gente confere junto.
E aí, deu certo?
Vamos lá, classe.
Cartão é o bloco.
O elemento vai ser...
Descrição.
E finalmente, o botão, cartão.
Botão.
Certo?
E assim que a gente escreve.
Nós que o botão, você poderia adicionar o modificador, cartão, botão, co-azul, né? Azul.
Modificador sempre adiciona a classe adicional para modificar o botão.
Esse elemento com co-azul.
Nosso também que a gente se definisse o botão, poderia ter o texto aqui.
Já dentro do botão, poderia ter o título.
Nesse caso, o título fica complicado, não é?
Porque o que é que esse cara vai ser?
Porque a gente já tem um elemento.
Então, como eu já disse antes, não pode fazer assim.
Você que está errado.
Porque você pode ter um elemento pertencente ao bloco.
Então, nesse caso, como eu já sugeri antes, você poderia isolar esse botão e fazê-lo da maneira que a gente fez anteriormente.
De definir o botão próprio como o bloco e o texto como o elemento do bloco do botão.
Essa é uma maneira de ajeitar isso.
Ou você pode fazer outra coisa.
Assim, ó.
Você pode, em vez de deixar esse cara com um fazer próprio bloco, pode fazer assim.
Texto do botão ou botão texto.
Você põe o elemento, botão texto, que é pertencente ao cartão.
Mas faz mais sentido você fazer o botão do seu próprio bloco, não é?
Fica melhor.
Mas, se você não faça isso, por favor, que isso está errado.
O underscore duplo.
Porque sempre tem que ter somente um elemento pertencente ao bloco.
Não pode ter múltiplos da maneira que a gente fez.
Certo?
Então, está aí, a gente fez nosso exercício do BEM, do cartão do bootstrap.
Então, vamos dar revisada em tudo que a gente fez.
A gente aprendeu metodologia BEM.
Bloco, elemento, modificador.
Então, o bloco define um componente na interface de usuário que tem significado,
se isolado, por si próprio.
Se não tiver significado, pode ser que seja um elemento que é parte de um bloco.
Não podemos isolar elementos.
Elementos sempre têm que pertencer a um bloco.
No caso de modificadores, você pode modificar o bloco ou o elemento.
Note sempre que a gente adiciona a classe adicional quando for modificar.
Se tiver múltiplos modificadores, que é possível, botão azul, letras maiúsculas,
isso em por diante, tem que fazer uma classe para cada modificador.
Você não pode combinar eles numa só nome de classe.
Aprendemos também nos detalhes que não podemos fazer o duplo elemento,
duplo underscore, está errado.
Significa talvez que você deva isolar aquele elemento e torná-lo um bloco,
porque ele faz sentido, por si próprio.
Certo?
Aprendemos sempre que tem que ter o elemento, ter que ter o bloco, elemento e modificador.
Dessa metodologia, críticos dizem que porque o nome fica muito grande,
a descrição das classes, por isso que eles não gostam,
mas esse é o preço que é pago pela flexibilidade e habilidade de reutilizar componentes
e também de aplicar os tilos sem ter que ter dor de cabeça nos conflitos
de qual estilo vai ser aplicado primeiro essas coisas.
Você sempre vai adicionando os tilos adicionais, nomes de classes adicionais,
se quiser modificar ainda mais o seu componente.
Está certo?
Então, muito obrigado e te vejo na próxima.
Valeu.
