Resumo da Aula sobre Metodologia BEM

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.