Você já teve problemas com overflow ao estilizar seu site com CSS? Scrolls horizontais infinitos, onde você não faz ideia de qual elemento está causando o comportamento? Esses problemas são comuns, especialmente em projetos grandes. No artigo desse mês vou te ensinar um macete super simples que aprendi com o Kevin Powell para encontrar elementos que estão causando overflow facilmente. Ao final, deixarei o vídeo em questão para você conferir se estiver curioso.
Tudo se resume a uma única linha de css:
*, *::before, *::after {
outline: 2px solid lime;
}Para exemplificar, criei uma demo no Codepen com um overflow horizontal, analise abaixo:
No exemplo, ao aplicar a propriedade outline, conseguimos encontrar os elementos que estavam causando o overflow horizontal, e assim podemos debugar sem estresse nosso css.
O Kevin chamou essa técnica de "O console.log do CSS". A ideia é simples: Com 1 linha de código, aplique uma borda para todos os elementos da página utilizando o seletor universal "*", inclusive para todos os pseudo-elementos, com isso você conseguirá encontrar os elementos que estão causando overflow com muito mais facilidade.
Se as bordas não forem a sua preferência, você também pode visualizar os elementos em camadas de profundidade utilizando a propriedade background-color:
*, *::before, *::after {
background-color: hsl(0 100% 50% / .1);
}