ARQUITETURA CSS

PARTE 2

Demorei muito para continuar a escrever esse artigo sobre arquitetura CSS, estava enrolado com o trabalho e também não estava iniciando novos projetos ou reestruturando algo para poder colocar em prática a teoria. Finalmente tive a chance de usar o BEM. A princípio, tenho que ser bem sincero em dizer que não achei nada atrativa a forma como as classes são nomeadas.

Odiado ou amado? Quando ouço falar do BEM, sempre vem alguém falar da nomenclatura de classes, que é horrível, que não presta, que dá trabalho, que é verboso e mimimimi… O BEM é uma arquitetura amplamente usada pela comunidade e uma das maiores referências quando o assunto é modularização e reaproveitamento do CSS, por isso resolvi testar e tirar minhas próprias conclusões sem me influenciar por opinião alheia ou meus preconceitos.

BEM

Block,
Element,
Modifier

As origens da metodologia

Foi criado pela Yandex (Google da Rússia) que tinha os seguintes objetivos:

• Desenvolvimento rápido e resultados duradouros de padronização. Os projetos devem ser criados rapidamente, utilizando uma arquitetura que garante sustentabilidade e longevidade para o desenvolvimento.
• Um projeto pode envolver muitas pessoas. A capacidade de organizar de forma eficiente o trabalho das pessoas em uma equipe é importante, seja essa equipe formada por apenas duas pessoas ou por dezenas de desenvolvedores.
• Equipes escaláveis. Adicionando mais pessoas para uma equipe, o desempenho deve melhorar . O código deve ser cuidadosamente estruturado para garantir a sua sustentabilidade ao longo do tempo e através das mudanças da equipe.
• A reutilização de código. Cada elemento novo projeto ou interface não deve ser iniciado a partir do zero . Código não deve ser dependente do contexto , mas deve ser fácil de transferir para outros lugares.

METODOLOGIA

Quando você está desenvolvendo um site é fácil olhar para o layout e reparar os blocos do site. No exemplo acima podemos ver o cabeçalho (header), área principal (main) e o rodapé (footer). O cabeçalho contém o logo, barra de busca, menu e área de login. Separando os blocos podemos ver como estruturaremos os blocos e elementos no nosso código.

Um bloco é uma entidade independente , um “bloco de construção “ de uma aplicação. Um bloco pode ser simples ou composto (contendo outros blocos ) .

Um elemento é uma parte de um bloco que executa uma certa função. Elementos são dependentes do contexto: eles só fazem sentido no contexto do bloco a que pertencem.

Por exemplo:

Já que aprendemos como separar cada bloco e elemento da página agora devemos nomea-los para identificar cada coisa. Os blocos devem possuir nomes proprietários e que não se repetem na aplicação. Os elementos devem ter nomes exclusivos dentro do escopo de um bloco, podendo se repetir de um bloco para outro.

Blocos independentes

Quando projetos crescem , blocos tendem a ser adicionados, removidos, ou movidos pela página. Um bloco independente é implementado de uma forma que permite a colocação arbitrária — em qualquer lugar da página, incluindo aninhamento dentro de outro bloco.

Do ponto de vista de CSS, isso significa que um bloco (ou um elemento) deve ter um “nome” único (uma classe CSS). Elementos HTML não deve ser utilizados em seletores CSS (.menu td) como tais seletores não são inseparáveis do contexto. Seleção em cascata deve ser evitada.

Nomenclatura para classes CSS

Agora sim!! HATERS GONNA HATE! #sqn

A idéia é fazer uma classe CSS que seja o mais informativa e clean quanto possível. Também que possa ser entendida logo que seja lida. Facilitando na hora de desenvolver e de debuggar o código.

Vamos ao exemplo:

.list-item-selected ou .listItemSelected

Nomeando dessa forma a casse está informativa e clean. Podemos perceber que o nome do bloco é list, o nome do elemento é item e o modificador é o selected. Só que isso é apenas um exemplo e não o mundo real, normalmente os nome serão mais complicados que isso e é nesse ponto que a nomenclatura do BEM faz a diferença.

Algumas regras:

1. O nome das entidades é escrita usando caracteres minúsculos e números
2. Nomes compostos são separados por hífen.
3. A informação sobre os blocos, elementos e modificadores devem ficar na classe CSS.

BLOCO

O bloco é único e consequentemente sua classe também. Não devem haver dois ou mais blocos com mesmo nome. Em caso de necessidade pode-se usar um prefixo.

.block-name

ELEMENTO

Como os elementos sempre estão atrelados a um bloco, seu nome também contém o bloco a que pertence separado por dois sublinhados.

.block-name__element-name

!important elementos não devem conter elementos!!

Nada de .block-name__element-name__other-element esse não é um padrão recomendado dentro da metodologia BEM. Os elementos pertencem ao bloco e não a outros elementos.

MODIFICADOR

O modificador pode ser usado diretamente com o bloco ou em um elemento. Sua classe é composta pelo bloco e pelo elemento (se houver) separado por um sublinhado apenas.

.block-name__element-name_modifier

.block-name_modifier

O modificador tem uma particularidade, existem duas formas de usar um modificador. Pode ser booleano ou chave valor.

Modificador booleano

.menu__item_visible

.menu_collapsed

.menu_footer

Modificador de chave valor

.menu__icon_size_large

.menu__icon_size_small

.menu_theme_right

EXEMPLO:

HTML

<form class="form form_login form_theme_forest">
  <imput class="form__input">
  <imput class="form__submit form__submit_disabled">
</form>

CSS

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

SCSS ou LESS ou STYLUS….

.form {
    &_theme {
        &_forest {}
        &_ice {}
    }
    &_login {}
    &__input {}
    &__submit {
        &_disabled { }
    }
}

CONCLUSÃO

O BEM ajuda muito na hora de criarmos classes CSS que sejam semânticas, informativas e não tão grandes como a maioria imagina.

Trabalhando com bem é fácil modularizar seu código e torna-lo reaproveitável. Não importando quantas pessoas entrem no projeto no futuro, o BEM auxilia a deixar seu código de uma forma que qualquer pessoa que pegue o seu código entenda e possa dar manutenção sem problemas.

Particularmente eu tinha muito pré-conceito com o BEM por conta do que outras pessoas falavam, mas mudei a minha opinião depois de estudar a documentação e aplicar na prática.

PS: Por se tratar de uma sequência de posts sobre arquitetura CSS não abordei outros pontos do BEM como sistema de arquivos, HTML e JavaScript.