Metodologia BEM: organizando seu CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 46 Min 45 Seg Tempo restante da oferta: 15 46 45 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Metodologia BEM: organizando seu CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Metodologia BEM: organizando seu CSS Melhore a qualidade do código CSS em seu projeto web com a Metodologia BEM. Aprenda como aplicá-la e aproveite seus benefícios. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/Metodologia-bem-organizando-seu-css.jpg) A metodologia BEM, ou Block Element Modifier, é uma forma de organizar o código [CSS](https://www.treinaweb.com.br/blog/seletores-basicos-do-css "CSS") para solucionar problemas frequentes no desenvolvimento web. Ela divide o código em blocos, elementos e modificadores para uma melhor organização. [ ![HTML5 + CSS3 - Propriedades e seletores avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados) ## Como surgiu a metodologia BEM? A metodologia BEM surgiu em 2012, criada pela empresa russa de tecnologia Yandex, para resolver problemas comuns no desenvolvimento web, como complexidade e dificuldades na manutenção do código CSS. É uma das abordagens mais utilizadas para nomenclatura das classes em CSS. ### Como aplicar a metodologia BEM em seu projeto? A princípio, podemos otimizar a legibilidade e a reutilização do código CSS. Essa técnica requer uma nomeação clara e organizada dos blocos e seus elementos, proporcionando benefícios significativos para a escalabilidade e manutenção do projeto. Portanto, é altamente recomendável a adoção da metodologia BEM para melhorar a eficiência do desenvolvimento web. Ademais, os modificadores são utilizados para realizar mudanças em partes específicas do código CSS. Isso torna o código mais simples de editar e personalizar. Ao aplicar os modificadores, é possível criar diferentes estilos para diversas situações, permitindo fazer alterações de forma ágil e descomplicada. A fim de entender melhor como funciona a metodologia BEM, vamos analisar um exemplo de código CSS, que certamente, irá facilitar o entendimento: [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) ```css .block { display: block; width: 100%; } .block__element { font-size: 16px; } .block__element--modifier { color: #ff0000; } ``` Nesse exemplo, a classe `.block` representa o bloco e define algumas propriedades CSS para o componente. A classe `.block__element` representa um elemento dentro desse bloco e define uma propriedade específica para ele. A classe `.block__element--modifier` representa o modificador que muda a aparência do elemento. Agora vamos imaginar um cenário real em que temos um menu de navegação para uma página web. Aplicando os conhecimentos da metodologia em nosso projeto terá um bloco, que será todo o menu de navegação e seus links serão os elementos. Caso haja necessidade de uma modificação de estilização, no link ativado, por exemplo, a estrutura de CSS ficaria dessa forma: ```css .navmenu { display: flex; justify-content: center; } .navmenu__link { color: blue; font-size: 1.2rem; } .navmenu__link--active { color: black; font-size: 1.4rem; } ``` ### Benefícios da metodologia BEM Certamente, a metodologia BEM oferece muitos benefícios para o desenvolvimento web quando aplicada. Em primeiro lugar, ela torna o código mais organizado, facilitando a compreensão e manutenção do projeto. Além disso, a metodologia aumenta a escalabilidade do código, permitindo que ele seja modificado sem gerar confusão, ou, erros. Além disso, ao utilizar uma nomenclatura de classe bem estruturada, viabiliza uma ampla reutilização do código, tornando os componentes prontamente aplicáveis em distintas seções do site. ## Conclusão Para concluir, essa metodologia, traz várias vantagens ao desenvolvimento web, sua aplicação é direta e descomplicada. Com a utilização dessa abordagem, o código CSS se torna mais claro e fácil de gerenciar, melhorando a qualidade e agilizando o processo de desenvolvimento. Assim, se você ainda não adotou essa metodologia em seu projeto, é aconselhável avaliar sua implementação para aproveitar essas vantagens. Para isso, basta seguir alguns passos simples e começar a usufruir dos benefícios oferecidos pela metodologia BEM. Se você quiser aprender mais sobre sobre esse tema tão importante no CSS, nos temos um [direto ao ponto dedicado a metodologia BEM](https://www.treinaweb.com.br/direto-ao-ponto/html5-css3-metodologia-bem "direto ao ponto dedicado a metodologia BEM") na nossa plataforma. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Desenvolvimento Front-End ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-front-end) - [ #Metodologia BEM ](https://www.treinaweb.com.br/blog/tag/metodologia-bem) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/organizando-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ ITCSS - Organizando melhor o CSS ](https://www.treinaweb.com.br/blog/itcss-organizando-melhor-o-css) Você já teve dificuldade com a organização e escalabilidade do seu CSS? Veja como a arquitetura ITCSS pode te ajudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/ASD-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ O que é ASD - Adaptative Software Development? ](https://www.treinaweb.com.br/blog/o-que-e-asd-adaptative-software-development) Confira neste artigo o ASD - Adaptive Software Development e como esta metodologia procura facilitar o desenvolvimento de softwares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/21191326/CRYSTAL-400x280.png) [ Metodologias Ágeis ](https://www.treinaweb.com.br/blog/categoria/metodologias-ageis) 7 anos atrás ## [ Metodologia Crystal: o que é e para que serve? ](https://www.treinaweb.com.br/blog/metodologia-crystal-o-que-e-e-para-que-serve) Confira neste artigo o que vem a ser a família Crystal. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/scrum-como-ferramenta-de-apoio-ao-gerenciamento-de-projetos-400x280.png) [ Scrum ](https://www.treinaweb.com.br/blog/categoria/scrum) 10 anos atrás ## [ Scrum como ferramenta de apoio ao gerenciamento de projetos ](https://www.treinaweb.com.br/blog/scrum-como-ferramenta-de-apoio-ao-gerenciamento-de-projetos) Você conhece a metodologia Scrum? Sabe como utilizá-la corretamente? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/TWELVE-FACTOR-APP-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ O que são os 12 Factor App? - Parte 1 ](https://www.treinaweb.com.br/blog/o-que-sao-os-12-factor-app-parte-1) Se você trabalha desenvolvendo aplicativos que funcionam como um serviço, conheça os 12 (Twelve) Factor App, uma metodologia que te ajudará a criar aplicações melhores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/10171338/AUP-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 7 anos atrás ## [ Afinal, o que é AUP - Processo Unificado Ágil? ](https://www.treinaweb.com.br/blog/afinal-o-que-e-aup-processo-unificado-agil) Vamos abordar neste artigo mais uma metodologia: AUP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/18162506/XP-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 7 anos atrás ## [ O que é XP - Extreme Programming? ](https://www.treinaweb.com.br/blog/o-que-e-xp-extreme-programming) Seguimos nossa série de artigos de metodologias, abordando hoje mais uma metodologia ágil: XP (Extreme Programming). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/o_que_e_pwa-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ O que é PWA? ](https://www.treinaweb.com.br/blog/o-que-e-pwa) Veja neste artigo o que é PWA. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/06/29091155/KANBANxSCRUM-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 9 anos atrás ## [ Kanban x Scrum: diferenças e como implementá-los ](https://www.treinaweb.com.br/blog/kanban-x-scrum-diferencas-e-como-implementa-los) Veja nesse artigo algumas diferenças entre o Kanban e Scrum e como implementá-los na sua equipe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/15150148/design-thinking-400x280.png) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 7 anos atrás ## [ O que é Design Thinking? ](https://www.treinaweb.com.br/blog/o-que-e-design-thinking) Confira neste artigo o que vem a ser o Design Thinking e quais são suas etapas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/04201917/RUP-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 7 anos atrás ## [ O que é RUP - Rational Unified Process? ](https://www.treinaweb.com.br/blog/o-que-e-rup-rational-unified-process) Confira neste artigo o que vem a ser o RUP - Rational Unified Process. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/28200809/RAD-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 7 anos atrás ## [ O que é RAD - Rapid Application Development? ](https://www.treinaweb.com.br/blog/o-que-e-rad-rapid-application-development) Hoje em dia, existem diversas metodologias de desenvolvimento de software, por isso estamos fazendo uma série de artigos focados em metodologias. Conheça neste artigo o RAD - Rapid Application Development. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 46min 45s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58