Veja nesse artigo
Introdução
Essas dicas de CSS podem te ajudar no dia a dia, são pequenos códigos mas que fazem a diferença.
A primeira dica eu utilizo bastante, porém as outras dependem da situação que estiver trabalhando.
Sem enrolação, vamos para as dicas.
Centralizar conteúdo
Antigamente tinha poucas formas de fazer, porém atualmente tem algumas formas a mais, e mais fáceis para centralizar conteúdo.
A forma que vou mostrar é utilizando flexbox, basta 3 linhas para centralizar o conteúdo:
.meu-elemento {
display: flex;
justify-content: center;
align-items: center;
}
Basicamente o display: flex, transforma o elemento em um flexbox, com isso é possível aplicar as outras propriedades do flexbox nele.
Depois é só informar para centralizar na horizontal com o justify-content, e na vertical com o align-items.
Scroll suave
Você já deve ter visto em alguma página que tenha um menu, que faz a navegação para a mesma página.
Esse recurso é chamado de menu âncora.
Esse recurso é muito utilizado no desenvolvimento de sites, onde você pode ter uma página só com todo o conteúdo de uma empresa por exemplo.
Nesse caso, se você colocar um link interno, quando o usuário clicar, irá dar um “tranco” na navegação, o site vai pular diretamente para o conteúdo desejado.
Porém isso para a experiência do usuário não é muito agradável, e dependendo do caso o usuário pode nem perceber que a ação realmente ocorreu.
Para resolver isso é possível fazer com que esse scroll seja mais tranquilo existe a propriedade scroll-behavior:
.meu-elemento {
scroll-behavior: smooth;
}
Somente isso, e quando o usuário for fazer a navegação, será feito de forma suave, dando um efeito de que está descendo, ou subindo, até o conteúdo desejado.
Limitar linhas de parágrafo
Este recurso pode ser muito útil para o layout.
Imagine que você precisa limitar o conteúdo de um parágrafo em dispositivos móveis, isso pode ser útil para adaptar o layout em celulares.
Ou então na página principal de um blog, normalmente os posts listados não vem com a descrição completa, vem com somente alguns parágrafos.
Nesses casos é preciso limitar a quantidade de caracteres que aparece, e para fazer isso é utilizado a propriedade -webkit-line-clamp:
.meu-elemento {
-webkit-line-clamp: 3; // limita em três parágrafos
}
Trocar o cursor
Essa é uma das dicas de CSS que é mais uma curiosidade, porém pode ser muito útil.
É possível trocar o cursor padrão, em vez de ser a seta pode ser qualquer imagem que quiser.
E com isso você tem uma personalização a mais, que pode usar em um site ou sistema que esteja desenvolvendo.
Para isso você vai precisar ter a imagem no projeto, e utilizar a propriedade cursor:
.meu-elemento {
cursor: url(image.png) auto;
}
Com isso o cursor será a imagem desejada.
Margin e padding shorthand
Essa dicas de CSS é para escrever menos código, porém com o mesmo resultado.
Existem os atributos margin-left, margin-right, margin-top e margin-bottom, porém você não precisa utilizar eles todos caso o valor seja igual.
Por exemplo:
.meu-elemento {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
É possível fazer somente:
.meu-elemento {
margin: 10px;
}
Dessa forma, será aplicado o margin de 10 px em todos os lados.
Com o padding funciona da mesma forma, seria só trocar o margin, por padding ali nos exemplos.
Conclusão
Essas dicas de CSS podem ser muito úteis no dia a dia.
Quanto mais dessas dicas e códigos souber, pode acelerar o desenvolvimento, trazer novas soluções para problemas e colocar mais qualidade no código.
Recomendo de tempos em tempos buscar por essas dicas de CSS, porque pode ser que tenha atualizações ou novas dicas de CSS para aprender e utilizar no dia a dia.
Para ver outros canais onde o posto conteúdo sobre CSS, veja os Links do Programando Soluções.
Referências
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content