Resumo da Metodologia BEM em Desenvolvimento de Interfaces

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.