Sacha Greif abertamente se perguntou se o CSS chegou a ser, você sabe, muito grande. Com todas as novidades lançadas nos navegadores nos últimos dois anos — consultas de contêiner! sintaxe de cor relativa! camadas em cascata! propriedades lógicas! intervalos em consultas de mídia! transformações individuais! :has() seletor! — e tudo o que está no horizonte possível — Alternar CSS! nidificação! mistura de cores! animações com links de rolagem! estilos com escopo! — há definitivamente uma curva de aprendizado diferente para CSS hoje em dia para front-enders novos e experientes.
Pode ter havido um tempo em que era possível conhecer a maioria das propriedades CSS e como elas funcionam. Esses dias já se foram, pelo menos para um veterano como eu. Mas isso meio que levanta a questão: que CSS você absolutamente precisa saber?
Vincas Stonys recentemente deu uma facada em uma lista. cris coloque um junto baseado em recursos lançados desde CSS3. Você provavelmente tem uma idéia do que você incluiria em uma lista. Se eu tivesse que montar um Top 5 e me limitar apenas a propriedades e seletores, poderia ser algo assim…
writing-mode
Eu não posso dizer o suficiente sobre o writing-mode propriedade. O que o torna importante - especialmente do ponto de vista do aprendizado - é que ele o prepara para princípios inclusivos que explicam a criação de layouts, independentemente do idioma do usuário. Uma boa compreensão de writing-mode vai levar a uma compreensão propriedades e valores lógicos, e esses, por sua vez, preparam o terreno para entender o fluxo de documentos e pensar em termos de block, inline, start e end em vez de direções físicas.
display
Eu tenho dificuldade em acreditar que alguém pode escrever um bom CSS sem ter uma sólida compreensão do display propriedade. É uma propriedade e uma estrutura para criar layouts. Não há Flexbox ou CSS Grid sem ele, tornando-o uma espécie de gatekeeper para entender esses recursos importantes.
Além disso, o display propriedade complementa perfeitamente writing-mode. É exatamente o que você vai precisar uma vez writing-mode expôs você ao fluxo de documentos e direções lógicas. Você precisará de uma propriedade para alterar o fluxo normal de um elemento (como alterar um elemento de bloco para um inline) ou começar a organizar as coisas (como criar um contexto de layout flexível) e é aí que display entra em jogo.
margin / padding / border
Ugh, estou totalmente trapaceando aqui, mas acho que aprender margin, padding e border juntos é meio que inevitável. Eles são todos partes de O modelo da caixa, todos ajudam com espaçamento e estilo, e todos requerem familiarização com Unidades de comprimento CSS. Saber o que essas propriedades são projetadas para fazer e como elas contribuem para o tamanho calculado de um elemento certamente lhe dá muito mais controle de estilo e dissipa qualquer confusão sobre por que um elemento é do tamanho que é - uma dor de cabeça comum em CSS!
::before e ::after
Outro onde eu estou trapaceando um pouco. Sim, ::before e ::after são dois pseudo-elementos individuais, mas, novamente, não consigo imaginar aprender sobre um sem o outro. É um dois-fer!
Lembro-me de como foi alucinante para mim saber que eles existiam e podem ser usados para criar tudo, desde efeitos legais da interface do usuário para completar ilustrações de div único. Ele abre novas possibilidades e fornece uma primeira olhada em quão poderoso o CSS realmente é.
@media
Oof, eu já estou no meu quinto e último item na lista e sinto que ainda há muita coisa boa CSS que pertence aqui. Mas se eu tiver que escolher uma última coisa, seria consultas de mídia. Por quê? Porque é um ingrediente primordial para criar layouts fluidos e flexíveis e diferentes contextos de visualização. Consultas de contêiner pode acabar tirando isso da minha lista à medida que amadurece, mas por enquanto, @media é um ótimo primer para design responsivo.
Além disso, @media é um bom primeiro passo para as qualidades condicionais do CSS. Se estamos escrevendo uma consulta com base no tipo de dispositivo que está sendo usado (por exemplo, screen or print) ou a quando a janela de visualização do navegador atende a determinados critérios (por exemplo, width >= 768px), O @media A sintaxe é incrivelmente útil para criar layouts otimizados para diferentes condições.
Ah, e nós nem tocamos em como @media diz respeito à acessibilidade, graças à sua capacidade de aplicar estilos com base nas preferências de um usuário (por exemplo, prefers-reduced-motion). Portanto, além de criar layouts condicionais, as consultas de mídia são um bom próximo passo para entender o design inclusivo.
Menções honrosas
Destilar CSS em uma lista de cinco propriedades e seletores obrigatórios é difícil, especialmente agora que o CSS é mais poderoso hoje do que era, digamos, cinco anos atrás. Há uma série de outros itens que eu realmente queria incluir, como (em nenhuma ordem específica):
calc()has()colorfontoverflowposition(especialmente este)z-index
Mas mantenho minhas escolhas. Aprender CSS é mais importante do que memorizar uma lista de propriedades. É uma jornada e acho que os cinco que escolhi criam um pequeno caminho de aprendizado que prepara o terreno para escrever boas regras de estilo e os próximos passos para mergulhar mais fundo no CSS.
Tudo bem, me diga o seu!
Discorda da minha lista? Você deve! Aposto que você tem algumas opiniões inteligentes e quero ver como você teria completado uma lista dos 5 melhores.
