Isso é inspirado quando eu entrei em uma sala e encontrei meus pais e sobrinho tentando fazer carros de A a Z.

Uma acessibilidade

O que muita gente esquece, mas acho que é tão importante quanto a capacidade de resposta.

Bloco B

Perpendicular à direção da escrita.

C calc

Fazendo cálculos em CSS. Muito conveniente.

Exibição D

bloco, inline, bloco inline, flex, inline-flex, grade, grade inline, nenhum, etc

E: vazio

Uma pseudoclasse útil para estilizar elementos sem filhos. Contanto que não haja nenhum espaço em branco dentro deles.

Caixa flexível F

Quando comecei o CSS, aprendi olhando para o Inspector e brincando com as coisas. E então copiei alguém que fazia layouts com carros alegóricos. E foi tão difícil posicionar as coisas. Aprender sobre flexbox fez toda a diferença.

Grade G

O que ainda me parece o irmão mais complicado e poderoso do flexbox.

Altura H

Quanto espaço algo ocupa horizontalmente.

eu inline

A direção da escrita. Muito útil para centralizar, onde você pode usar margin-inline: auto.

J justificar

No Flexbox Zombies, você usa seu laser de justificação para mirar nos zumbis na direção em que está atirando.

K @quadros-chave

Etapas de animação.

Altura da linha L

Pode fazer com que o texto pareça totalmente ilegível se for muito grande ou muito pequeno.

Margem M

Espaço ao redor de um elemento que não o torna maior.

N nenhum

Útil para parar de exibir algo ou remover bordas.

Ó ajuste ao objeto

Embora pareça que isso existe desde sempre, me deparei com algo há um tempo que era relativamente. Incluía algum JavaScript que alguém havia escrito para lidar com o fato de o ajuste de objeto ser novo e ainda não funcionar em todos os navegadores.

Preenchimento P

Espaçamento ao redor do elemento que o torna maior. O preenchimento negativo não é algo como a margem negativa.

Consultas Q

Consultas de mídia e consultas de contêiner, usadas para design responsivo e acessibilidade.

Capacidade de resposta R

Importante para garantir que seu site caiba em todas as telas. Parece bastante básico, mas existem muitos sites que não cabem corretamente em alguns tamanhos.

Especificidade S

Isso se torna um problema ao tentar substituir estilos de terceiros. Embora recentemente eu tenha visto alguns plugins CMS usando :where, o que ajuda muito.

Texto T

Às vezes usado para estilo de fonte. E às vezes você usa fonte. Exceto se você quiser alterar a cor do texto, nesse caso não é nenhuma das duas coisas.

Unidades U

Os mais usados ​​são %, px, em e rem. Também fr em grades e s e ms em transições e animações.

Visibilidade V

Interessante, o oposto de visível está oculto. O que não é o que você logicamente pensaria que seria.

Largura W

Quanto espaço algo ocupa horizontalmente.

X estouro-x

Um pouco de trapaça para x, mas não há nada começando com x. Isso controla o estouro horizontal. x também é usado com Tailwind onde, por exemplo, mx é a margem horizontal.

Y transborda-y

Tal como acontece com x, isso controla o estouro vertical. E y geralmente denota vertical no Tailwind.

Z índice z

O índice z mais alto/mais baixo que você pode usar é (-)2.147.483.647. Ou o infinito lhe dará a mesma coisa. Mas digitar uma carga de 9s e depois se perguntar por que não está funcionando é um método muito mais simples.