Prefixos e Sufixos das Partes

Para uma boa compreensão geral do projeto, é preciso também que os nomes dos arquivos sigam um padrão, para que toda a navegação entre as pastas siga de forma fluida, e consigamos entender todos

Prefixos

section-

Partes de template iniciadas em section- vão representar uma seção do site.

Isso vai significar, fundamentalmente, que vai essa parte de template vai ocupar toda a largura da página, de canto a canto, dentro da área do seu layout. Uma section não pode ocupar, por exemplo, 6 colunas num grid de 12.

O nome é inspirado na <section> do HTML, até mesmo porque parece a escolha lógica do container para essa parte de template, para a maioria dos casos, mas não é obrigatório que seja essa a tag utilizada.

card-

Visualmente é muito fácil entender o que é um card, porque é uma parte de template que vai lembrar um cartão, com bordas que se destacam do resto da página, tendo um formato quadrado ou retangular.

Geralmente ele vem dentro de um loop, com várias iterações daquele mesmo card com conteúdos distintos.

item-

Um item pode se parecer um card em algumas formas de como podem ser utilizados, porque também são comumente utilizados em loops. Só que visualmente não ocupa esse papel de ser um cartão.

Nesse caso, é mais fácil explicar por exemplos: Quero imprimir uma série de accordions que vão ter um título, conteúdo e botão específico. Nesse caso, eu posso fazer a base do accordion como um item e fazer um loop para jogá-los na tela.

Se tenho um carrossel de banners na home, cada um deles representa um item também. Quando tenho um cabeçalho que um dos links precisa abrir uma tela de megamenu, vou construir um item também.

Perceba que nesse caso o item é usado de formas mais genéricas. Então é interessante dar a ele um segundo prefixo, como, por exemplo, item-accordion-, item-slide-, item-megamenu-. Isso você pode criar de acordo com a situação em que você se encontrar.

O nome tem inspiração nas <li>, que significa basicamente list item, e possivelmente será uma das tags usadas para demarcar esse tipo de conteúdo.

block-

Partes de template iniciadas em block- vão representar um bloco no site. Mas o que isso quer dizer realmente?

Bom, se está ali olhando ali para uma parede de tijolos aparentes, cada tijolo ali vai ser um bloco. E esse é o papel do block, ser um tijolo na parede do seu layout, ocupando algumas colunas e linhas no seu layout. Mas sem representar uma seção inteira, porque aí teríamos section- em vez de block-.

O nome é inspirado na prioridade/valor display:block do CSS, que é o padrão aplicado quando você tem uma tag <div>. Mas não necessariamente, claro, essa parte de template vai precisar ter esse estilo, pode usar um flex tranquilo.

slider-

Quando você tiver um slider que precise organizar muitos wrappers e containers, e você já tiver muito conteúdo prévio na section onde vai esse slider, o ideal é isolar o conteúdo do slider dentro desse template-part com o prefixo de slider-. Assim como também você pode isolar os itens do slider em item-slider- ou card-slider.

aside-

Representa uma barra lateral, tendo claramente o nome inspirado na tag HTML <aside>. Esse tipo de parte de template é bastante utilizada na página da Loja, onde existe uma barra lateral com os filtros dos produtos, ou no blog que existe a barra com links para compartilhar e a lista de categorias. Outro uso para uma aside- é o carrinho lateral que aparece quando um botão é apertado.

modal-

Os modais, que são as janelas que abrem em cima dos conteúdos ao clicar, também devem ser separados em seus arquivos de template-part. Por padrão, o tema virá com um modal localizado abaixo do footer, com um sugestivo nome de modal-footer.php que pode ser acionado para carregar iframes dentro dele. Mas caso precise de mais modais em seu projeto, fique à vontade para usar desses template-parts.

linha-

Normalmente essas partes são usadas no footer, que é composto por várias linhas com informações diversas. Na linha superior, por exemplo poderá ter o logo do cliente com suas redes sociais, telefones para contato e menus de navegação do site. Na inferior, geralmente vai o copyright, logo da Alpina no centro, e do outro lado um menu com Termos de Uso e Políticas de Privacidade.

O uso geral de um template-part de linha- são nesses casos que a configuração lembrar visualmente uma tabela, com várias linhas.

fixed-

Se você tem algum elemento que fica fixo na tela, você pode usá-lo dentro desse template-part. O nome vem claramente inspirado na declaração CSS de position:fixed, mas não precisa que o elemento utilize necessariamente essa posição, podendo além do fixed usar valores como sticky ou até mesmo absolute.

{mais}-

Dependendo da sua necessidade, novos prefixos podem ser declarados em seu projeto, desde que seguindo uma lógica que deixe clara a funcionalidade daquele prefixo, para que quando a pessoa esteja navegando na lista de arquivos, antes mesmo de abrir, já entenda o papel daquele template-part no projeto.

Novas criações que comecem a fazer parte dos projetos serão adicionadas aqui.

Nome do arquivo

Após ser declarado o prefixo, você segue com o nome do arquivo, identificando ali de qual seção, card, item, entre outros, você está falando.

Se é a seção de Missão, Visão e Valores do site, você poderia tranquilamente escrever section-missao-visao-valores.php. Se for um item do banner principal do site, você poderá escrever item-banner-principal.php.

Mas e se você for um card de um produto, e você escrever card-produto.php, mas existem outros cards diferentes de produtos pelo site? Aí que entra o sufixo na jogada.

Sufixos

O sufixo é muito simples, e traz somente uma forma de diferenciar aquele template-part para outro que seja similar.

Você pode seguir o padrão do Cody, que usa versões para seus componentes, e nomear as partes como -v1, -v2, -v3, etc.

Se você tem múltiplos cards de produto, ficaríamos então com card-produto-v1.php, card-produto-v2.php, card-produto-v3.php e assim sucessivamente.

Ou então pode ser mais criativo e colocar uma diferença no nome como -full, -simples, -sem-imagem, -texto, -maior, ou qualquer característica a mais que você possa encontrar para diferenciar as duas partes.