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á.