CSS in JS é uma técnica que envolve escrever CSS dentro de JavaScript ao invés de arquivos separados. Isso permite que cada componente tenha seu próprio CSS encapsulado e escrito de forma declarativa. Bibliotecas populares como JSS, Glamor e Styled-Components facilitam a implementação de CSS in JS.

1. CSS in JS
Escrevendo CSS no JavaScript

2. 2
Dan Vitoriano
Engenheiro de Software, PagSeguro
dnvtrn

3. AGENDA
▹ O que é CSS in JS?
￭ Como surgiu
▹ Por que usar?
▹ Como funciona?
￭ Inline CSS
▹ Bibliotecas
￭ JSS
￭ Glamor
￭ Styled-Components
▹ Referências
3

4. Esqueça os conceitos
front-end de separar
HTML, CSS e JS
Abra sua mente!
4
Primeiro passo:

5. O que é CSS in JS

6. “CSS in JS consiste em
abstrair o CSS para o
nível do componente em
si e não ao nível do
documento, usando
JavaScript para
descrever estilos de
uma maneira
declarativa e escalável.
6

7. “
TL;DR
▹ Escrever CSS dentro do .js
▹ Cada componente com seu CSS
▹ Usar estilos inline
▹ CSS agora são variáveis
7

8. Como surgiu?
▹ Em 2014
▹ Nos laboratórios do Facebook
▹ Tornou-se público depois desta talk do
@vjeux, engenheiro do FB
8

9. Por que usar?
Segundo @vjeux

10. Resolver problemas como:
Escalar CSS
▹ Escopo global
▹ Dependências
▹ Eliminar código não utilizado
▹ Minificação
▹ Compartilhar constantes
10

11. Como funciona?

12. Estilizando botões com CSS
12
/* button.css */
.button {
background: #f6f7f8;
border: 1px solid #cdced0;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.button-depressed {
border-color: #c6c7ca;
color: #5890ff;
}

13. Estilizando botões com JS
13
/* button.js */
var styles = {
container: {
background: '#f6f7f8',
border: '1px solid #cdced0',
borderRadius: 2,
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)'
},
depressed: {
borderColor: '#c6c7ca',
color: '#5890ff'
}
}

14. cssinjs.org

15. Diferenças de sintaxe
15
/* button.js */
var styles = {
container: {
background: '#f6f7f8',
border: '1px solid #cdced0',
borderRadius: 2,
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)'
}
}
CSS in JS:
● Strings
● Vírgulas
● camelCase
● Numbers

16. Como converter CSS para JSS
staxmanade.com/CssToReact
16

17. “
E como aplicar?
17

18. 18
/* button.js */
var styles = {
container: {
background: '#f6f7f8',
border: '1px solid #cdced0',
borderRadius: 2,
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)'
},
depressed: {
borderColor: '#c6c7ca',
color: '#5890ff'
}
}
/* button.js */
<div style={styles.container}>
CSS Inline!!!

19. Bibliotecas

20. As mais populares libs
▹ JSS
▹ Glamor
▹ Radium
▹ Aphrodite
▹ Emotion
▹ Glamorous
▹ Glamor
▹ Glam
▹ Fela
▹ Styletron
▹ React-CSS-Modules
▹ Babel-Plugin-CSS-in-JS
▹ JSXStyle
▹ Styled-Components
20

21. Nossos exemplos
▹ JSS
▹ Glamor
▹ Radium
▹ Aphrodite
▹ Emotion
▹ Glamorous
▹ Glamor
▹ Glam
▹ Fela
▹ Styletron
▹ React-CSS-Modules
▹ Babel-Plugin-CSS-in-JS
▹ JSXStyle
▹ Styled-Components
21

22. JSS

23. 23
const styles = {
wrapper: {
padding: 40,
background: '#f7df1e',
textAlign: 'center'
},
title: {
font: {
size: 40,
weight: 900
},
color: '#24292e'
},
link: {
color: '#24292e',
'&:hover': {
opacity: 0.5
}
}
}
Ver código completo
no CodeSandBox:
https://codesandbox.io/s/z21lpmvv33
Repositório:
cssinjs.org

24. Glamor

25. 25
const styles = {
container: css({
background: Globals.colors.white,
alignItems: 'center',
'@media(max-width: 720px)': {
alignSelf: 'auto',
},
}),
paragraphAfterParty: css({
textAlign: 'center',
':first-letter': {
textTransform: 'uppercase',
},
}),
card: css({
width: 250,
'@media(min-width: 721px)': {
height: 100,
},
backgroundColor: Globals.colors.white,
'> a > img': {
display: 'block',
},
})
};
Ver código completo
no Github:
github.com/frontinsampa/site2018
github.com/react-brasil/conf
Repositório:
github.com/threepointone/glamor

26. Styled-components

27. “
Principal committer styled-components:
Max Stoiber
@mxstbr
27

28. 28
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
render(
<div>
<Button
href="https://github.com/styled-components/styled-components"
primary
>
GitHub
</Button>
</div>
)
Ver código completo
no CodeSandBox:
codesandbox.io/s/rkmNRByE4
Repositório:
github.com/styled-components/styled-components

29. Referências ▹ https://cssinjs.org/performance/?v=v10.0.0-alpha.10
▹ https://speakerdeck.com/vjeux/react-css-in-js
▹ https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b
▹ https://staxmanade.com/CssToReact/
▹ https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc
▹ https://medium.com/@oleg008/jss-is-css-d7d41400b635
▹ https://cssinjs.org/performance/?v=v10.0.0-alpha.10
▹ https://cssinjs.org/from-sass-to-cssinjs
▹ https://github.com/mxstbr
▹ https://www.styled-components.com/
▹ https://docs.google.com/presentation/d/1uACCYWjAjkLBNU4m3qyCuts32uiWR6UsooaNY
aQYVsg/edit?usp=sharing
▹ https://www.npmjs.com/package/react-styled-shadow-dom
29

30. Dúvidas?
twitter.com/dnvtrn
medium.com/@dnvtrn
github.com/danvitoriano
github.com/react-brasil
30