Pular para o conteúdo principal

Prefixos e Sufixos das Partes

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-