Resumo do Transcript

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.