CSS Roadmap - Guia para estudo de CSS

Uma das partes mais importantes do desenvolvimento Front-end é o domínio do CSS, e quando entramos no mundo do desenvolvimento web e começamos a estudar pode parecer confuso e quase impossível aprender todas as propriedades, então nesse artigo vou criar um guia com pontos que eu considero importantes ao longo do aprendizado de CSS, desde conceitos básicos, até mais avançados.

Conceitos básicos

A primeira coisa que você precisa se preocupar em aprender e consolidar são os conceitos básicos de CSS, eles são fundamentais e vão ser muito utilizados ao longo da sua jornada como desenvolvedor. 

• Primeiro de tudo, entender o que é o CSS e para que ele funciona.
• Tipos de folhas de estilo: Inline, Interno e Externo e como conectar o CSS ao HTML.
  
• Sintaxe: compreender o que são seletores, propriedades e valores.
• Seletores e como usar cada um deles: classe, id, tags, pseudos e combinadores.
• Especificidade: hierarquia, prioridade e herança de seletores, quando usar (ou não) o !important.
• Definição de cores: rgb, rgba e hexadecimal.
• Unidades de tamanho: pixels, porcentagem, em, rem, vw, vh, auto, inherit.
• CSS Reset: o que é, para quê e quando usar.

Propriedades básicas

• Propriedades de texto: como estilizar textos, alterar tamanho, cor, fonte e estilo, por exemplo, font e text align.
• Propriedades de tamanho: como definir tamanhos para containers, seções, textos ou qualquer elemento da tela, por exemplo, width e height.
• Propriedades de posicionamento: como posicionar elementos e criar layouts para a tela, por exemplo, display e position.
• Propriedades de espaçamento: como separar e dar espaço entre elementos, por exemplo, margin e padding.

Propriedades avançadas

• Flexbox: o Flexbox é um modulo de CSS que possui várias propriedades para criar um layout flexível, aqui no pingback eu já escrevi um guia completo sobre a propriedade, para acessar é só clicar aqui!
• Grid: o Grid Layout introduz um sistema bi-dimensional de grid (que significa literalmente "grades") para CSS. Grids podem ser usados para o design de layouts de grandes seções de uma webpage, assim como de pequenos elementos de interface.
• Transform: o Transform permite modificar o modelo de formatação de um elemento e possui propriedades como: rotate, scale, skew e translate. Podendo girar, redimensionar, inclinar ou mover, respectivamente.
• Transition: o Transition permite controlar a velocidade de uma animação quando há mudanças de propriedades CSS. Ou seja, ao invés da alteração acontecer imediatamente, é possível fazer com que as mudanças de uma propriedade ocorram durante um período de tempo.
• Gradient: o Gradient permite criar transições suaves entre duas ou mais cores, existe o linear gradient e o radial gradient.
• Z index: a propriedade z‐index define o posicionamento do elemento em relação ao fundo da página e aos elementos que o sobrepõem. A propriedade trabalha com o eixo Z, sendo ele o responsável pelo cálculo e posicionamento da profundidade de algum elemento, ou seja, é aquele que irá determinar se o elemento estará mais próximo ou mais afastado da tela.
• Animações: as Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.
• At Rules: uma regra at (at-rule) é uma CSS statement iniciando com um caractere arroba, seguido por um identificador e terminando no primeiro ponto e vírgula, fora de um bloco, ou no fim do primeiro Bloco CSS. Por exemplo: @charset, @import, @media, @font-face.

Responsividade

• Layout Responsivo x Adaptativo: compreender o significado de cada um deles e saber utilizá-los da melhor maneira para criar uma aplicação funcional em diversos aparelhos.
• Media query: saber sua estrutura, breakpoints e como usar da melhor maneira para criar um layout responsivo.

Pré processadores

Entender a utilização dos pré-processadores, o que eles são, quais existem e ter conhecimento de pelo menos um deles.

• Sass
  
• Less 
• Stylus

Frameworks CSS

Entender o que são os Frameworks CSS, para que são utilizados, quais existem e ter conhecimento de pelo menos um deles.

• Bootstrap
• Materialize CSS
• Foundation
  

Arquitetura CSS

Conhecer os estilos de arquitetura, que servem para organizar o código CSS e deixá-lo padronizado e mais simples de ser lido e dar manutenção.

• BEM
• OOCSS
• SMACSS
• SUITCSS
• Atomic

CSS in JS

É uma técnica de estilo em que o JavaScript é usado para estilizar componentes. Quando esse JavaScript é analisado, o CSS é gerado e anexado ao DOM. Ele permite abstrair o CSS no próprio nível do componente, usando JavaScript para descrever os estilos de maneira declarativa e sustentável.

• Styled Components
• Radium
• Emotion

Links úteis

Alguns recursos para estudar os conceitos e propriedades mencionados acima:

• CSS Tricks
• W3Schools
• MDN Web Docs
  
• CSS matic
  
• Css Gradient
• MarkSheet
• Frontend Roadmap
• CSS Reference

Eu sei que pode parecer muita coisa logo de cara, mas com a prática e a organização é possível aprender todos esses tópicos e dominar o CSS!

Espero que tenham gostado ;)