O que é BEM (Block, Element, Modifier) ​​e como pode ser usado com Drupal Emulsify Twig

Ao trabalhar com tecnologias e software de código aberto, é ainda mais importante simplificar o esforço necessário para ler e entender seu código. Uma boa convenção de nomenclatura ajuda a resolver problemas maiores em vez de se concentrar na sintaxe e nas preferências de estilo durante as revisões de código. Desenvolvedores experientes entendem a importância de um código bem escrito e organizado ao trabalhar com sites maiores com toneladas de elementos de estilo.

A metodologia BEM (Block, Element, Modifier) ​​é uma convenção de nomenclatura amplamente utilizada para classes CSS que está ganhando popularidade devido à facilidade de uso que oferece. O conceito fundamental do BEM é o desenvolvimento web baseado em componentes. O BEM torna o desenvolvimento de interface fácil e rápido, especialmente quando você está lidando com grandes projetos com interface de usuário complexa. Vamos explorar mais sobre o BEM e como ele pode funcionar com o módulo Drupal Emulsify Twig.

O que é BEM

A metodologia BEM foi introduzida para ajudar a tornar as classes CSS mais fáceis de acessar, entender e dimensionar. Ele pode acelerar o processo de desenvolvimento e ajuda a construir componentes reutilizáveis.

O BEM inclui três partes:

1. Quadra
2. Elemento
3. Modificador

Quadra

Os blocos são o componente mais externo e funcionalmente independente e são reutilizáveis. Exemplos: cabeçalho, rodapé, barra lateral, menu, conteúdo, etc.

Características:

• Os nomes dos blocos devem sempre refletir a finalidade do bloco.
• Os blocos não devem usar margem ou posição. Se você precisar adicionar margem ou posição, precisará aplicá-la aos contêineres internos.
• Não use tags CSS ou seletores de ID ao usar o BEM.

Exemplo:

 <div class=”icon-button”></div>

Elemento

Elementos são itens filhos de um Bloco. Cada elemento pode ter apenas um bloco e não pode ser usado fora dele. Exemplos: itens de menu, itens de lista, campo de entrada, etc.

Características:

• O nome do elemento (classe) deve descrever sua finalidade (título, legenda) e não seu estado (pequeno/vermelho).
• O elemento e o bloco são separados por um sublinhado duplo (__). Assim: block-name__element-name.

Exemplo:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

Modificador

Um nome de classe através do qual você pode definir a aparência, estado ou comportamento de um bloco ou elemento. Exemplos: vermelho, grande, desativado, fixo, etc.

Características:

• O nome do modificador descreve sua aparência. Por exemplo, se a aparência for “_large”, a classe modificadora será como icon-button__title_large .
• O modificador é separado do bloco ou elemento por um único sublinhado (_).

Exemplo:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Tipos de modificadores

1. Booleano

Você pode verificar a condição do valor booleano e configurá-lo em uma variável. Esta variável pode passar como um valor modificador.

2. Valor-chave

A estrutura do nome completo do modificador com valor-chave seguirá um destes padrões:

1. block-name_modifier-name_modifier-value
2. block-name__element-name_modifier-name_modifier-value

Convenções de nomenclatura: regras e esquemas

Existem diferentes esquemas de nomenclatura. Todos os esquemas têm algumas regras comuns como:

• Os nomes são escritos em letras latinas minúsculas.
• As palavras são separadas por um hífen (-).

1. Esquemas de nomenclatura clássicos

O esquema de nomenclatura clássico é o esquema de nomenclatura padrão do BEM.

Block-name__elem-name_mod-name_mod-val

• O nome do elemento e o nome do bloco são separados por um sublinhado duplo (__).
• O nome do modificador e o nome do bloco ou elemento são separados por um único sublinhado (_).
• O valor do modificador e o nome do modificador são separados por um único sublinhado (_).

2. Estilo de nomeação de dois traços

block-name__elem-name--mod-name--mod-val

• O elemento e o nome do bloco são separados por um sublinhado duplo (__).
• O bloco e o elemento são separados por um hífen duplo (--).
• O valor de um modificador e um modificador são separados por um hífen duplo (--).

3. Estilo de nomenclatura CamelCase

blockName-elemName_modName_modVal

• Cada palavra após a primeira começa com uma letra maiúscula.
• Blocos, elementos e modificadores são usados ​​da mesma maneira que no esquema de nomenclatura padrão.

4. Reagir Estilo de Nomenclatura

BlockName-ElemName_modName_modVal

• O nome do bloco e os nomes do elemento começam com uma letra maiúscula.
• O nome do modificador começa com uma letra minúscula.
• Um nome de elemento e o nome de bloco são separados por um único hífen (-).
• Os nomes e valores dos modificadores são separados da mesma forma que no esquema padrão.

BEM em Drupal com módulo Emulsify Twig

No Drupal, podemos usar a função BEM Twig com a ajuda do módulo Emulsify Twig. A função BEM permite criar classes BEM em elementos nos componentes. Abaixo mencionadas são algumas extensões do BEM Twig e seu uso.

1. Nome do bloco simples (argumento obrigatório):

<div {{ bem('ícone') }}>

Isso cria:

<div class="icon">

2. Bloco com modificadores:

Se você quiser adicionar vários modificadores, poderá fazê-lo usando uma matriz.

<div {{ bem('ícone', ['pequeno', 'vermelho']) }}>

Isso cria:

<div class="ícone ícone-–ícone pequeno-–vermelho">

3. Elemento com modificadores e blockname (opcional):

<div {{ bem('ícone', ['pequeno', 'vermelho'], 'ícone-botão') }}>

Isso cria:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red">

4. Elemento com blockname, mas sem modificadores (opcional):

<div {{ bem('ícone', '', 'ícone-botão') }}>

Isso cria:

<div class="icon-button__icon">

5. Elemento com blockname, modificadores e classes extras:

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'something-else']) }}>

Isso cria:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-click something-else">

6. Elemento apenas com classes extras (opcional):

<div {{ bem('ícone', '', '', ['js-clique']) }}>

Isso cria:

<div class="icon js-click">

Adicionar Atributos Extensão Twig

A função Adicionar atributos Twig permite adicionar atributos HTML aos elementos de seus componentes. Dê uma olhada em algumas funções Add Attributes abaixo:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Pensamentos finais

A metodologia BEM é extremamente útil para desenvolvedores que desejam escrever e manter um código de melhor qualidade que possa ser fácil de ser entregue e compreendido. Cada elemento tem um propósito que pode ser facilmente identificado pelo seu nome e de qual bloco está vindo. Quando usado corretamente, você verá que usar o BEM pode aumentar a velocidade de desenvolvimento. Se você gostou do que leu, inscreva-se em nosso boletim informativo semanal, onde enviaremos informações frescas e quentes diretamente para sua caixa de entrada!