Boas práticas para construção de temas no Drupal 8

A documentação de temas para Drupal 8 vai te ajudar a construir seus primeiros temas temas rapidamente. Mas depois que você passa do nível básico, quais boas práticas você deve aplicar para criação de temas no Drupal 8? Existem vários métodos populares para escrita e organização de CSS. O básico de CSS, claro, também se aplica ao Drupal:

  • Não seja tão específico
  • Coloque seu CSS no cabeçalho e JavaScript no rodapé
  • Organize bem seu CSS
  • Estilize por padrões, não vá "de cima para baixo"
  • Pré-processe seus estilos

Use as configurações primeiro

Existem alguns erros comuns que desenvolvedores front-end podem comecer caso não conheçam o Drupal. Em geral, procure aplicar suas classes pelas configurações. Não encha seu tema desnecessariamente com um monte de templates personalizados como você faria com WordPress. Arquivos de templates, especialmente com Twig, são úteis e podem ser utilizados. Mas as configurações devem ser sua ferramenta principal.

Seguem algumas excelentes ferramentas para aplicar classes no Drupal:

Aplicar suas classes nas configurações permite que você as edite, reuse e aplique facilmente a qualquer coisa no Drupal. Se você aplicar classes nos templates, vai ser difícil reusá-las em outros elementos de conteúdo sem copiar e colar parte do código.

Entretanto, não fique com medo de usar algumas lógicas de apresentação nos templates Twig.

Seja cuidadoso com seus alvos/seletores

No Drupal, existem alguns casos em que o único seletor que funcionará para você é o ID. Se você se deparar com isso, não use! Nunca, nunca, nunca aplique seu CSS aos IDs no Drupal. Isso é verdade para qualquer framework, mas no Drupal isso é mais grave pois os IDs não são reusáveis. Eles são definidos de forma rígida e frequentemente podem mudar (dependendo do módulo ou tema que você está usando).

Um desenvolvedor backend não conseguirá aplicar seus estilos a outros elementos sem corrigir seu CSS. Não escreva CSS que você sabe que um programador PHP precisará alterar. Se você é o desenvolvedor front-end, você é o mais apto a fazer isso.

Use view modes (modos de visualização)

Certifique-se de aplicar estilos a elementos reutilizáveis. Então, evite estilos específicos por tipos de conteúdos pois eles não serão reusados em outros tipos. Em vez disso, utilize os modos de visualização e configurações para aplicar seletores onde você precisar. O Display Suite (mencionado anteriormente) pode ajudar muito nisso.

Evite machine names (nomes de máquina)

Isso tem a ver com o item "evite IDs". Machine names as vezes precisam mudar no Drupal, e eles não são reutilizáveis. Então, não aplique estilos a eles. Em vez disso, use classes para blocos, views e outras configurações para aplicar seletores aos seus conteúdos.

Não seja tão específico

O markup do Drupal 8 é melhor, mas o Drupal ainda é muito "verboso". Não se afunde nas DIVs do Drupal. Apenas seja específico quando realmente precisar ser. Não replique a estrutura HTML do Drupal no seu CSS.

Aplique um Grid ao Drupal

Escolha um sistema de grid que pemita que seja aplicado a qualquer elemento, como Singularity ou Neat. Você pode usar o Bootstrap no Drupal, já está pronto e é fácil de usar. Mas tenha em mente que, para adequar os elementos de interface ao Drupal, muito HTML precisou ser reescrito e isso pode fazer alguns módulos quebrarem. Por outro lado, ele te agiliza muito na construção do layout.

Não implemente funcionalidades no tema

Não escreva uma lógica de negócios avançada nos seus templates. Se seu tema tem funcionalidades complexas, mova para um módulo personalizado. Ou use um módulo contribuído para isso.

Lembre-se que isso não é WordPress, seu tema não precisa vir empacotado com uma cópia do Panels.

Evite o uso do template.php

Isso tem a ver com o item anterior. Sempre que possível, leve as configurações ou personalizações para um módulo. O Drupal é feito por vários pequenos módulos. Aprenda a gostar disso pois módulos bem escritos são reutilizáveis, mantidos pela comunidade e sempre evoluídos. Códigos personalizados colocados diretamente no seu tema pode torná-lo difícil de manter.

Não "marrete" o layout

Use {{ content }} nos seus templates e deixe os modos de visualização, Display Suite, Panels ou outro módulo construir seu layout.


Este artigo é uma tradução livre e adaptada do Drupal 8 theming best practices.