A Evolução
• Evolução do CSS
• Evolução de como nós construímos interfaces
Slide 4
Slide 4 text
CSS Tools
Slide 5
Slide 5 text
Pré-processadores
CSS Tools
Slide 6
Slide 6 text
lesscss.org
Slide 7
Slide 7 text
sass-lang.com
Slide 8
Slide 8 text
stylus-lang.com
Slide 9
Slide 9 text
Pós-processadores
CSS Tools
Slide 10
Slide 10 text
postcss.org
Slide 11
Slide 11 text
React styling solutions
Slide 12
Slide 12 text
Vanilla CSS
React Styling Solutions
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
• Não precisa de nenhuma
ferramenta nem
configuração para
funcionar
Slide 16
Slide 16 text
• Não precisa de nenhuma
ferramenta nem
configuração para
funcionar
• Para manipulação de
diferentes estilos, é
necessário alternar entre
classes CSS
• Utiliza-se de classes como:
is-active, js-active
• Adoção de padrões como
BEM
• Manutenção é bem difícil
Slide 17
Slide 17 text
Inline Styles
React Styling Solutions
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
• Não precisa de nenhuma
dependência extra, ou
processo de build
• Javascript “puro"
• Permite uma dinâmica
entre CSS e JS
Slide 20
Slide 20 text
• Não precisa de nenhuma
dependência extra, ou
processo de build
• Javascript “puro"
• Permite uma dinâmica
entre CSS e JS
• Não é uma prática
recomendável
• Não tem todos os recursos
do CSS (hover, before)
• Imagina a manutenção..
Slide 21
Slide 21 text
CSS Modules
React Styling Solutions
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
• Não precisa se preocupar
com os nomes das classes
• Altera as classes para
terem nomes únicos
(.khjen)
• O componente é o escopo
da classe
• Permite a utilização de um
processador CSS (pré/pós)
Slide 25
Slide 25 text
• Não precisa se preocupar
com os nomes das classes
• Altera as classes para
terem nomes únicos
(.khjen)
• O componente é o escopo
da classe
• Permite a utilização de um
processador CSS (pré/pós)
• Só resolve um único
problema do CSS que é
não ter escopo para as
classes
• Para manipulação de
diferentes estilos, é
necessário alternar entre
classes CSS
Slide 26
Slide 26 text
Styled Components
React Styling Solutions
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
• O JS é transformado em
CSS
• Qualquer coisa que
funcionar no CSS, funciona
com styled-components
(media-queries, hover,
keyframes)
Slide 29
Slide 29 text
• O JS é transformado em
CSS
• Qualquer coisa que
funcionar no CSS, funciona
com styled-components
(media-queries, hover,
keyframes)
• Será adicionada uma nova
dependência ao projeto
• Requer um investimento
em estudo
Slide 30
Slide 30 text
Slide 31
Slide 31 text
Sobre
Styled Components
Slide 32
Slide 32 text
Sobre
• Funciona em projetos que já possuem um CSS
• Você consegue aumentar a especificidade de um estilo
existente
• É compatível com o ecossistema React
• Template literal ES6 é onde está o pulo do gato
Slide 33
Slide 33 text
Por baixo dos panos…
Slide 34
Slide 34 text
Por baixo dos panos…
• Tagged Template Literals
• Nova funcionalidade que veio no ES6
• styled.button`` || styled.button()