Arquitetura CSS – Parte 2

Dando continuidade ao post anterior  “Arquitetura CSS – Parte 1”, vamos abordar neste post uma metodologia que muitos amam e outros nem tanto, será feito uma introdução a metodologia BEM, abra sua mente e vamos ver o que temos a ganhar.

No início do projeto, o CSS é facilmente mantido, pois é pequeno, com o tempo e seu crescimento, o grande desafio é mantê-lo organizado, legível e componentizado.

Antes de começar a clarificar sobre como é o BEM, vale ressaltar ainda que, um projeto possui a colaboração de uma ou mais pessoas, ressaltando que o código não deve ter a personalidade da Patrícia ou do estagiário, o código deve ser impessoal e deve ter a personalidade da equipe, isso não vale só para CSS, vale para qualquer outra linguagem. Portanto, crie padrões para evitar que cada membro da equipe escreva código como quiser, defina guias de estilos. O combinado não sai caro e todos falarão a mesma língua, seja disciplinado e siga as regras definidas pela equipe.

Então o que queremos?

» Um código padronizado e impessoal;

» Um código familiar para a equipe;

» Um código que o time entende e escreve mais rápido;

» Um código legível;

» Um código sustentável ao longo do tempo;

Listagem 1 – Objetivos

Sobre o BEM

A sigla BEM significa, Block, Element e Modifier (Bloco Elemento Modificador), basicamente a metodologia visa estruturar a forma como é escrito o nome de suas classes, levando em consideração o elemento em si, dessa forma que essa metodologia pode ajudar a resolver os problemas com a estruturação do nosso código, provendo guidelines para alcançarmos os objetivos acima (Listagem 1).

Basicamente a ideia gira em torno desses três pilares:

  • Bloco: é relativo a um componente.
  • Elemento: parte de um bloco, este não existe sozinho, ele(s) são semanticamente ligados ao seu bloco.
  • Modificador: Use-o para alterar a aparência ou comportamento de um dos dois itens anteriores.

Reforçar nunca é demais…de novo, o BEM sugere uma forma estruturada de nomear suas classes, tenham em mente que usaremos somente classes, não podemos utilizar IDS. O objetivo é escrever uma classe CSS que seja mais informativa e legível possível e que possa ser entendida logo que seja lida, facilita o entendimento e a manutenção.

Bloco

O bloco é único, não deve existir mais de um bloco com o mesmo nome. O bloco é um container, ou seja, o contexto em que os elementos se encontra, por exemplo, o bloco pode ser um header, footer, sidebar entre outros.

.block-name { }

Listagem 2 – Exemplo classe bloco

Elemento

O elemento está atrelado ao seu bloco, o bloco é o todo e os elemento são as partes. O nome do elemento é escrito após o nome do bloco, conectado com dois underscores. Lembrando que, não podemos utilizar .block-name__element-name__other-element-name {}, este padrão não é recomendado na metodologia BEM, os elementos pertencem a um bloco e não a um elemento.

.block-name__element-name { }

Listagem 3 – Classe elemento

Modificador

Este pode ser usado no bloco ou no elemento, sua classe é escrita com o nome do bloco e do elemento (se existir), conectados com dois traços.

.block-name--modifier-value { }

.block-name__element-name--modifier-value { }

Listagem 4 – Classe modificador

Vamos ver um exemplo:

Menu BEM
 

Figura 5 – Componente

<ul class="menu">
  <li class="menu__item">Tab 1</li>
  <li class="menu__item">Tab 2</li>
  <li class="menu__item menu__item--active">Tab 3</li>
  <li class="menu__item">Tab 3</li>
</ul>

Listagem 6 – Marcação usando BEM

.menu {}
.menu__item {}
.menu__item--active {}

Listagem 7 – Classes usando BEM

Muitos podem se assustar com a nomenclatura do BEM, comigo também foi assim, mas a medida que vamos nos acostumamos, percebemos que a nomenclatura ajuda muito, ao bater o olho em um código HTML e CSS, já conseguimos entender o que ele faz, ou seja, classes mais semânticas e informativas. Além de ser mais fácil reutilizar componentes.
Não existe bala de prata, existem várias metodologias cada uma contendo pontos positivos e negativos, aconselho a leitura de todas elas, afinal, são propostas diferentes.

Entenda o seu cenário para tornar seu CSS escalável e aplique os fundamentos no seu contexto,
subtraia o melhor de cada metodologia e seja feliz! =)

Gostou? Escrevi alguma coisa torta? Precisa melhorar? Vamos comentar!

Referências
Figura 01 retirada de http://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/
[1] http://getbem.com/introduction/
[2] http://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

Por PATRÍCIA GOMES DOS SANTOS SILVA

Analista de Sistemas apaixonada por front-end e boas práticas em desenvolvimento web, acredita que HTML, CSS e Javascript são a base e podemos mudar o mundo através da web.

Postado em: 28 de dezembro de 2015

Confira outros artigos do nosso blog

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

Three laws that enable agile software development

09 de março de 2017

Celso Gonçalves Junior

Medindo performance de uma API REST

21 de fevereiro de 2017

Monise Costa

Deixe seu comentário