Algumas pessoas pensam que CSS é difícil de aprender. Existem muitas muletas e até um pouco de magia, o que torna mais fácil dar um tiro no próprio pé. Eu me sinto triste com isso, pois acho que não.
Depois de pensar um pouco sobre o que pode ser feito, descobri cinco hábitos de desenvolvedor dos quais não gosto e mostrarei como evitá-los.
Defina as margens ou preenchimento e, em seguida, redefina-as
Costumo ver pessoas definir margens ou preenchimento para todos os elementos e, em seguida, redefini-los para o primeiro ou último elemento. Não sei por que eles usam duas regras quando você pode conviver com uma. É muito mais fácil definir margens e preenchimento para todos os elementos necessários de uma vez.
Use um dos seguintes para um CSS mais simples e conciso: seletores n-ésimo / nésimo-do-tipo, a pseudo-classe: not () ou o combinador irmão adjacente mais conhecido como +.
Não faça isso:
Você pode usar:
Adicionar display: bloco para Elementos com posição: absoluto ou posição: fixo
Você sabia que não precisa adicionar display: block para elementos com position: absolute ou position: fixed já que isso acontece por padrão?
Além disso, se você usar valores inline- *, eles mudarão da seguinte forma: inline ou inline-block mudará para block, inline-flex -> flex, inline-grid -> grid e inline-table -> table.
Então, basta escrever position: absolute ou position: fixed e adicionar display apenas quando você precisar de valores flex ou grid.
Não faça isso:
Você pode usar:
Use transform: translate (-50%, -50%) To Center
Havia um problema popular que costumava causar muitos problemas. Isso durou até 2015, e todas as suas soluções levaram a algum tipo de dificuldade. Estou falando sobre centralizar um elemento com uma altura arbitrária ao longo de dois eixos.
Em particular, uma solução foi usar uma combinação de posicionamento absoluto e a propriedade de transformação. Essa técnica causava problemas de texto borrado em navegadores baseados em Chromium.
Mas depois da introdução do flexbox, essa técnica, na minha opinião, não é mais relevante. O problema é que ele não pode resolver o problema de texto borrado. Além do mais, faz com que você use cinco propriedades. Portanto, gostaria de compartilhar um truque que pode reduzir o código a duas propriedades.
Podemos usar margin: auto dentro de um flex container e o navegador irá centralizar o elemento. Apenas duas propriedades e é isso.
Não faça isso:
Você pode usar:
Use largura: 100% para elementos de bloco
Freqüentemente, usamos o flexbox para criar uma grade de várias colunas que se converte gradualmente em uma única coluna.
E para converter a grade em uma coluna, os desenvolvedores usam largura: 100%. Eu não entendo por que eles fazem isso. Os elementos da grade são elementos de bloco que podem fazer isso por padrão, sem usar propriedades adicionais.
Portanto, não precisamos usar largura: 100%, mas devemos escrever a consulta de mídia para que o flexbox seja usado apenas para criar uma grade de várias colunas.
Não faça isso:
Você pode usar:
Definir exibição: bloco para itens flexíveis
Ao usar o flexbox, é importante lembrar que quando você cria um flex container (add display: flex), todos os filhos (flex items) são bloqueados.
Isso significa que os elementos são definidos para exibição e só podem ter valores de bloco. Da mesma forma, se você definir inline ou inline-block, ele mudará para block, inline-flex -> flex, inline-grid -> grid e inline-table -> table.
Portanto, não adicione display: block para flexionar itens. O navegador fará isso por você.
Não faça isso:
faça assim:
Conclusão
Espero ter conseguido mostrar a você como evitar erros simples e você seguirá meu conselho. Obrigado por ler!