DEV Community

Cover image for Deixe seu frontend mais consistente com componentes positionless
Kevin Oliveira
Kevin Oliveira

Posted on • Updated on

Deixe seu frontend mais consistente com componentes positionless

Por mais que muita gente diga por aí que front-end é fácil, não é. E só nós pessoas de front-end sabemos disso, pois pode até parecer simples posicionar elementos com CSS numa tela, mas será que está sendo feito da melhor forma?

E são essas boas práticas que levam muito tempo para entrar na cabeça de uma pessoa iniciante, ter o conhecimento de como posicionar, alinhar ou separar elementos numa tela. E vou deixar meus cinco centavos sobre isso neste post.

Mas de onde surgiu o termo "positionless"?

Confesso que esse termo surgiu na minha cabeça (até pesquisei mas não encontrei nada) muito inspirado pelo termo "tableless" que foi uma revolução no desenvolvimento web há uns 15/20 anos quando devs largaram a mão de montar sites com tabelas e também pelo termo "stateless" que é basicamente ter componentes agnósticos livres de manipulação de estado.

E com isso o termo "positionless" veio justamente por pensar na boa prática de deixar componentes de um layout livres de qualquer regra CSS que manipule seu próprio posicionamento na viewport.

Como é uma tela sem componentes "positionless"?

Eu tenho certeza que em projetos pessoais no início de carreira ou até em projetos legados de alguma empresa que tenha trabalhado você já viu um código dessa forma com elementos posicionados hardcoded:

Exemplo de botão no header

<div class="header">
  <img src="logo.png">
  <a href="" class="button">Fale conosco</a>
</div>
Enter fullscreen mode Exit fullscreen mode
.header {
  position: relative;
}

.button {
  position: absolute;
  top: 15px;
  right: 15px;
}
Enter fullscreen mode Exit fullscreen mode

Ou até, também, numa lista de posts de um blog:

Exemplo de lista de posts

<div class="list">
  <div class="card">
    <img src="card-thumb.png">
    <h2 class="card-title">Título do post</h2>
  </div>
  ...
</div>
Enter fullscreen mode Exit fullscreen mode
.card {
  margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Isso tudo se ainda não estiver com o estilo inline que deixaria tudo muito pior, né?

Repare nesses trechos de código que o posicionamento/separação dos elementos .button e .card estão cuidando do próprio posicionamento, seja com position ou com margin.

Mas agora pensa comigo, provavelmente esse button e esse card está sendo ou poderá ser utilizado em outras partes do site, certo? E se o posicionamento ou separação for diferente em outro lugar? Você vai sobrescrever esse código de que forma? Vai criar outra folha de estilo se for em outra página? Vai usar !important se for na mesma página?

Por que não deixar os componentes da sua aplicação agnósticos de posicionamento? Porque o problema não é usar position/margin/etc, isso são recursos que são feitos para serem usados em determinados casos, o problema é usá-los de forma errada que pode prejudicar todo o prosseguimento do seu desenvolvimento de layout.

Então que tal deixar a responsabilidade do posicionamento para o pai daquele componente específico? No exemplo do botão do header, aproveitando o HTML, podemos ao invés de usar position para jogar o botão para o lado direito do header alinhado ao logo, podemos fazer com flexbox dessa forma:

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Ficando ainda melhor não só na questão de deixar a responsabilidade de posicionamento para o pai, mas também por não criar uma nova camada deixando o layout mais complexo para ser renderizado e manutenido.

E no exemplo da listagem de posts, deixando a responsabilidade de separação de cards para o pai podemos usar gap na lista ao invés do margin diretamente nos cards que estava afetando todos os cards da aplicação, dessa forma:

.list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

"Mas e se eu precisar estilizar um elemento específico?"

Certo, pode ser que você realmente precise editar o posicionamento de algum elemento específico, mas pense uma forma que aquilo não afete as outras partes de seu layout e também que force tanto a especificidade, deixando tudo muito complexo.

Pense que uma vez que seu componente é agnóstico, ele pode ser incluído em qualquer lugar de seu layout e o pai/container dele que ficará responsável por isso, logo podemos fazer algo no sentido lá do primeiro exemplo:

.header .button {
  position: absolute;
  top: 15px;
  right: 15px;
}
Enter fullscreen mode Exit fullscreen mode

MAS CALMA LÁ! É aí que você precisa repensar se essa é a melhor forma de se fazer isso, pois mesmo não afetando outras partes do site pode ter uma forma melhor e nesse exemplo específico, vimos que não, pois conseguimos posicionar o botão da forma que gostaríamos sem criar um segundo nível de especificidade, pois zero especificidade é melhor que uma especificidade.

Conclusão

Com tudo isso podemos ver o quão consistente nosso layout fica e também o tanto de recurso que economizados não tendo que sobrescrever estilos usando o horroroso !important ou criando especificidades desnecessárias que poderiam ser evitadas deixando a responsabilidade ao pai do seu componente.

Antes de começar a criar suas divs e seus style.css ou de começar a manutenção do site de qualquer forma, pense bem em como aquele elemento será reutilizado e no que outros lugares de sua aplicação poderá ser afetada com aquela nova edição ou adição.

Eu quero ouvir a opinião de vocês sobre isso nos comentários. That's all folks!

Referências para estudo

Top comments (8)

Collapse
 
lixeletto profile image
Camilo Micheletto

Parabéns pelo artigo, manoooo! Esse tópico é essencial pra criação de um CSS mais robusto e sem desperdícios.

Na minha opinião, pra posicionar elementos em casos que você não precisa posicionar em relação ao body, mas em relação ao parente direto ou a própria posição do componente, transform além de ser bem mais intuitivo de controlar, é menos computation heavy pra animar. O que acha?

Collapse
 
kvnol profile image
Kevin Oliveira • Edited

Valeu, meu mano! Com certeza, eu também prefiro muito o transform. Os exemplos com position foram apenas para exemplificar projetos legados com CSS complexo mesmo 😂.

Collapse
 
phenriquesousa profile image
Pedro Henrique

Obrigado por compartilhar, primo <3

Collapse
 
zoldyzdk profile image
Hewerton Soares

Só vai primo!

Collapse
 
cherryramatis profile image
Cherry Ramatis

Mto bom artigo primo!

Collapse
 
renanvidal profile image
Renan Vidal Rodrigues

Ótimo conteúdo

Collapse
 
fernandoandrade profile image
Fernando Andrade

ótimo artigo

Collapse
 
mels profile image
Melina Schneider

boaaa!!!