Como aprender CSS

Recebo muitas pessoas me pedindo para recomendar a eles tutoriais sobre várias partes do CSS, ou perguntando como aprender CSS. Eu também vejo muitas pessoas confusas sobre bits de CSS, em parte por causa de ideias desatualizadas sobre a linguagem. Dado que o CSS mudou bastante nos últimos anos, este é um bom momento para atualizar seus conhecimentos. Mesmo que CSS seja uma pequena parte do que você faz (porque você trabalha em outro lugar na pilha), CSS é como as coisas acabam ficando como você quer na tela, então vale a pena estar razoavelmente atualizado.

Portanto, este artigo tem como objetivo delinear os principais fundamentos do CSS e recursos para leitura adicional sobre as principais áreas do desenvolvimento moderno de CSS. Muitas dessas são coisas aqui na Smashing Magazine, mas também selecionei alguns outros recursos e também pessoas para seguir em áreas-chave de CSS. Não é um guia completo para iniciantes ou destinado a cobrir absolutamente tudo. Meu objetivo é cobrir a amplitude do CSS moderno com foco em algumas áreas-chave, que ajudarão a desbloquear o restante da linguagem para você.

Fundamentos da linguagem

Para grande parte do CSS, você não precisa se preocupar em aprender propriedades e valores de cor. Você pode procurá-los quando precisar deles. No entanto, existem alguns fundamentos-chave da linguagem, sem os quais você terá dificuldade em entendê-la. Realmente vale a pena dedicar algum tempo para garantir que você entenda essas coisas, pois isso economizará muito tempo e frustração a longo prazo.

Seletores, mais do que apenas classe

Um seletor faz o que diz na lata, ele seleciona alguma parte do seu documento para que você possa aplicar regras CSS a ele. Embora a maioria das pessoas esteja familiarizada com o uso de uma classe ou com o estilo de um elemento HTML como body diretamente, há um grande número de seletores mais avançados que podem selecionar elementos com base em sua localização no documento, talvez porque eles vêm diretamente após um elemento, ou são as linhas ímpares em uma tabela.

Os seletores que fazem parte da especificação de Nível 3 (você já deve ter ouvido falar deles como seletores de Nível 3) têm excelente suporte ao navegador. Para uma visão detalhada dos vários seletores que você pode usar, consulte a Referência MDN.

Alguns seletores agem como se você tivesse aplicado uma classe a algo no documento. Por exemplo p:first-child se comporta como se você adicionasse uma classe ao primeiro elemento p , estes são conhecidos como seletores de pseudo-classe . Os seletores de pseudo-elemento agem como se um elemento fosse inserido dinamicamente, por exemplo ::first-line age de maneira semelhante a você envolvendo um span em torno da primeira linha de texto. No entanto, ele será reaplicado se o comprimento dessa linha for alterado, o que não seria o caso se você inserisse o elemento. Você pode ficar bastante complexo com esses seletores. No CodePen abaixo está um exemplo de um pseudo-elemento encadeado com uma pseudo-classe. Nós direcionamos o primeiro elemento p com uma :first-child psuedo-class, então o seletor ::first-line seleciona a primeira linha desse elemento, agindo como se um span fosse adicionado em torno dessa primeira linha para torná-lo negrito e mudar a cor.

A herança e a cascata

A cascata define qual regra vence quando várias regras podem ser aplicadas a um elemento. Se você já esteve em uma situação em que não consegue entender por que alguns CSS não parecem estar se aplicando, é provável que a cascata esteja atrapalhando você. A cascata está intimamente ligada à herança, que define quais propriedades são herdadas pelos elementos filho do elemento ao qual são aplicadas. Também está ligado à especificidade; seletores diferentes têm especificidade diferente que controla o que ganha quando há vários seletores que podem ser aplicados a um elemento.

Nota : Para entender tudo isso, sugiro a leitura de The Cascade and Inheritance, no MDN Introduction to CSS.

Se você está lutando para obter algum CSS para aplicar a um elemento, então o DevTools do seu navegador é o melhor lugar para começar, dê uma olhada no exemplo abaixo no qual eu tenho um elemento h1 direcionado pelo seletor de elemento h1 e tornando o título laranja. Também estou usando uma classe, que define o h1 como rebeccapurple. A classe é mais específica e por isso o h1 é roxo. No DevTools, você pode ver que o seletor de elemento está riscado, pois não se aplica. Uma vez que você possa ver que o navegador está recebendo seu CSS (mas outra coisa o anulou), então você pode começar a descobrir o porquê.

O modelo da caixa

CSS é tudo sobre caixas. Tudo o que é exibido na tela tem uma caixa, e o Modelo de Caixa descreve como o tamanho dessa caixa é calculado — levando em consideração margens, preenchimento e bordas. O modelo de caixa CSS padrão pega a largura que você deu a um elemento e adiciona a essa largura o preenchimento e a borda - o que significa que o espaço ocupado pelo elemento é maior do que a largura que você deu a ele.

Mais recentemente, pudemos optar por usar um modelo de caixa alternativo que usa a largura fornecida no elemento como a largura do elemento visível na tela. Qualquer preenchimento ou borda inserirá o conteúdo da caixa a partir das bordas. Isso faz muito mais sentido para muitos layouts.

Na demonstração abaixo, tenho duas caixas. Ambos têm largura de 200 pixels, com borda de 5 pixels e preenchimento de 20 pixels. A primeira caixa usa o modelo de caixa padrão, portanto, ocupa uma largura total de 250 pixels. O segundo usa o modelo de caixa alternativo, então na verdade tem 200 pixels de largura.

O Browser DevTools pode mais uma vez ajudá-lo a entender o modelo de caixa em uso. Na imagem abaixo, uso o Firefox DevTools para inspecionar uma caixa usando o modelo content-box padrão. As ferramentas me dizem que este é o modelo de caixa em uso e posso ver o dimensionamento e como a borda e o preenchimento são adicionados à largura que atribuí.

Nota : Antes do IE6, o Internet Explorer usava o modelo de caixa alternativo, com preenchimento e bordas inserindo o conteúdo fora da largura especificada. Então, por um tempo, os navegadores usaram diferentes modelos de caixa! Quando estiver frustrado com problemas de interoperabilidade hoje, fique feliz que as coisas melhoraram, então não estamos lidando com navegadores calculando a largura das coisas de maneira diferente.

Há uma boa explicação sobre o Box Model e Box Sizing em CSS Tricks, além de uma explicação sobre a melhor maneira de usar globalmente o box model alternativo em seu site.

Fluxo normal

Se você tiver um documento com algum HTML marcando o conteúdo e visualizá-lo em um navegador, esperamos que seja legível. Cabeçalhos e parágrafos começarão em uma nova linha, as palavras serão exibidas como uma frase com um único espaço em branco entre elas. Tags para formatação, como em, não interrompem o fluxo da frase. Este conteúdo está sendo exibido em fluxo normal ou layout de fluxo de bloco. Cada parte do conteúdo é descrita como “em fluxo”; ele conhece o restante do conteúdo e, portanto, não se sobrepõe.

Se você trabalha a favor e não contra esse comportamento, sua vida fica muito mais fácil. É uma das razões pelas quais começar com um documento HTML corretamente marcado faz muito sentido, pois devido ao fluxo normal e às folhas de estilo incorporadas que os navegadores têm que o respeitam, seu conteúdo começa em um local legível.

Contextos de formatação

Depois de ter um documento com conteúdo em fluxo normal, convém alterar a aparência de parte desse conteúdo. Você faz isso alterando o contexto de formatação do elemento. Como um exemplo muito simples, se você quiser que todos os seus parágrafos sejam executados juntos e não comecem em uma nova linha, você pode alterar o elemento p para display: inline alterando-o de um bloco para um contexto de formatação inline.

Os contextos de formatação definem essencialmente um tipo externo e um tipo interno. O externo controla como o elemento se comporta ao lado de outros elementos na página, o interno controla a aparência dos filhos. Então, por exemplo, quando você diz display: flex , você está configurando o exterior para ser um contexto de formatação de bloco e os filhos para ter um contexto de formatação flexível.

Observação : a versão mais recente da Especificação de exibição altera os valores de display para declarar explicitamente o valor interno e externo. Portanto, no futuro você pode dizer display: block flex; ( block sendo o externo e flex sendo o interno).

Leia mais sobre display no MDN.

Estar dentro ou fora do fluxo

Elementos em CSS são descritos como 'em fluxo' ou 'fora de fluxo'. Elementos em fluxo recebem espaço e esse espaço é respeitado pelos outros elementos em fluxo. Se você retirar um elemento do fluxo, flutuando ou posicionando-o, o espaço para esse elemento não será mais respeitado por outros itens do fluxo.

Isso é mais perceptível com itens absolutamente posicionados. Se você der uma position: absolute , ele é removido do fluxo, você precisará garantir que não haja uma situação na qual o elemento fora do fluxo se sobreponha e torne ilegível alguma outra parte do seu layout.

No entanto, os itens flutuantes também são removidos do fluxo e, embora o conteúdo a seguir envolva as caixas de linha encurtadas de um elemento flutuante, você pode ver colocando uma cor de fundo na caixa dos seguintes elementos que eles subiram e estão ignorando o espaço usado pelo item flutuante.

Você pode ler mais sobre elementos em fluxo e fora de fluxo no MDN. O importante a lembrar é que, se você retirar um elemento do fluxo, precisará gerenciar a sobreposição, pois as regras regulares do layout do fluxo de blocos não se aplicam mais.

Esquema

Há mais de quinze anos fazemos layout em CSS sem um sistema de layout projetado para o trabalho. Isso mudou. Agora temos um sistema de layout perfeitamente capaz que inclui Grid e Flexbox, mas também Layout de várias colunas e os métodos de layout mais antigos usados ​​para seu propósito real. Se o CSS Layout é um mistério para você, vá para o tutorial MDN Learn Layout, ou leia meu artigo Getting Started With CSS Layout aqui na Smashing Magazine.

Não imagine que métodos como grid e flexbox estejam de alguma forma competindo . Para usar bem o Layout, às vezes você descobrirá que um componente é melhor como um componente flex e às vezes como Grid. Ocasionalmente, você desejará o comportamento de fluxo de coluna de multicol. Todas essas são escolhas válidas. Se você sente que está lutando contra a maneira como algo se comporta, isso é, em geral, um bom sinal de que pode valer a pena dar um passo atrás e tentar uma abordagem diferente. Estamos tão acostumados a hackear CSS para fazê-lo fazer o que queremos que é provável que esqueçamos que temos várias outras opções para tentar.

Layout é minha principal área de especialização e escrevi vários artigos aqui na Smashing Magazine e em outros lugares para tentar ajudar a domar o novo cenário do Layout. Além do artigo Layout mencionado acima, tenho uma série inteira sobre Flexbox – comece com O que acontece quando você cria um contêiner Flexbox Flex. No Grid By Example, eu tenho um monte de pequenos exemplos de CSS Grid – além de um tutorial de screencast em vídeo.

Além disso – e especialmente para designers – confira Jen Simmons e sua série de vídeos Layout Land.

Alinhamento

Separei o Alinhamento do Layout em geral porque, embora a maioria de nós tenha sido apresentada ao Alinhamento como parte do Flexbox, essas propriedades se aplicam a todos os métodos de layout, e vale a pena entendê-las nesse contexto em vez de pensar em "Alinhamento Flexbox" ou “Alinhamento de grade CSS.” Temos um conjunto de propriedades de Alinhamento que funcionam de maneira comum sempre que possível; eles então têm algumas diferenças devido à maneira como os diferentes métodos de layout se comportam.

No MDN, você pode explorar o Box Alignment e como ele é implementado para Grid, Flexbox, Multicol e Block Layout. Aqui na Smashing Magazine, tenho um artigo cobrindo especificamente o alinhamento no Flexbox: Tudo o que você precisa saber sobre o alinhamento no Flexbox.

Dimensionamento

Passei grande parte de 2018 falando sobre a especificação de dimensionamento intrínseco e extrínseco e como ela se relaciona com o Grid e o Flexbox em particular. Na web, estamos acostumados a definir tamanhos em comprimentos ou porcentagens, pois é assim que conseguimos fazer layouts do tipo Grid usando floats. No entanto, os métodos modernos de layout podem fazer muito da distribuição do espaço para nós – se permitirmos. Compreender como o Flexbox atribui espaço (ou a unidade Grid fr funciona) vale o seu tempo.

Aqui na Smashing Magazine, escrevi sobre Dimensionamento em Layout em geral e também para Flexbox em How Big Is That Flexible Box?.

Design responsivo

Nossos novos métodos de layout de Grid e Flexbox geralmente significam que podemos obter menos consultas de mídia do que precisávamos com nossos métodos mais antigos, devido ao fato de serem flexíveis e responderem a alterações na janela de visualização ou no tamanho do componente sem precisarmos alterar o larguras dos elementos. No entanto, haverá lugares em que você desejará adicionar alguns pontos de interrupção para aprimorar ainda mais seus designs.

Aqui estão alguns guias simples para o design responsivo e, para consultas de mídia, em geral, confira meu artigo Using Media Queries for Responsive Design in 2018. Eu dou uma olhada no que as consultas de mídia são úteis e também mostro os novos recursos que estão chegando Consultas de mídia no nível 4 da especificação.

Fontes e tipografia

Junto com o Layout, o uso de fontes na web passou por uma grande mudança no último ano. Fontes variáveis, permitindo que um único arquivo de fonte tenha variações ilimitadas, estão aqui. Para obter uma visão geral do que são e como funcionam, assista a esta excelente palestra curta de Mandy Michael: Variable Fonts and the Future of Web Design. Além disso, eu recomendaria Tipografia Dinâmica com CSS Moderno e Fontes Variáveis ​​de Jason Pamental.

Para explorar as fontes variáveis ​​e seus recursos, há uma demonstração divertida da Microsoft, além de vários playgrounds para experimentar as fontes variáveis ​​- o Axis Praxis é o mais conhecido (também gosto do Font Playground).

Depois de começar a trabalhar com fontes variáveis, este guia no MDN será incrivelmente útil. Para saber como implementar uma solução de fallback para navegadores que não suportam fontes variáveis, leia Implementando uma fonte variável com fontes da Web de fallback de Oliver Schondorfer. O Firefox DevTools Font Editor também tem suporte para trabalhar com fontes variáveis.

Transformações e Animação

CSS Transforms and Animation são definitivamente algo que eu procuro sempre que preciso saber. Eu não preciso usá-los com frequência, e a sintaxe parece pular direto da minha cabeça entre os usos. Felizmente, a referência no MDN me ajuda e eu sugiro começar com os guias sobre o uso de transformações CSS e o uso de animações CSS. Zell Liew também tem um bom artigo que fornece uma ótima explicação para transições CSS.

Para descobrir algumas das coisas que são possíveis, dê uma olhada no site do Animista.

Uma das coisas que podem ser confusas sobre animações é qual abordagem adotar. Além do que é suportado em CSS, pode ser necessário envolver JavaScript, SVG ou a API de animação da Web, e todas essas coisas tendem a ser agrupadas. Em sua palestra, Choose Your Animation Adventure gravada no An Event Apart, Val Head explica as opções.

Use Cheatsheets como um lembrete, não uma ferramenta de aprendizado

Quando menciono recursos de Grid ou Flexbox, muitas vezes vejo respostas dizendo que não podem fazer Flexbox sem uma certa folha de dicas. Eu não tenho nenhum problema com cheatsheets como um auxiliar de memória para procurar sintaxe, e eu publiquei alguns dos meus próprios. O problema de confiar inteiramente neles é que você pode perder por que as coisas funcionam enquanto você copia a sintaxe. Então, quando você encontra um caso em que essa propriedade parece se comportar de maneira diferente, essa aparente inconsistência parece desconcertante, ou uma falha da linguagem.

Se você se encontrar em uma situação em que o CSS parece estar fazendo algo muito estranho, pergunte por quê . Crie um caso de teste reduzido que destaque o problema, pergunte a alguém que esteja mais familiarizado com a especificação. Muitos dos problemas de CSS que me perguntam são porque essa pessoa acredita que uma propriedade funciona de uma maneira diferente da maneira como funciona na realidade. É por isso que eu falo muito sobre coisas como alinhamento e dimensionamento, pois esses são lugares onde essa confusão muitas vezes vive.

Sim, existem coisas estranhas no CSS. É uma linguagem que evoluiu ao longo dos anos, e há coisas nela que não podemos mudar – até inventarmos uma máquina do tempo. No entanto, uma vez que você tenha algumas noções básicas e entenda por que as coisas se comportam como agem, você terá muito mais facilidade com os lugares mais complicados.