Mais conteúdo relacionado Semelhante a CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano (20) Mais de Dan Vitoriano (20) CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano3. AGENDA
▹ O que é CSS in JS?
■ Como surgiu
▹ Por que usar?
▹ Como funciona?
■ Inline CSS
▹ Bibliotecas
■ JSS
■ Glamor
■ Styled-Components
▹ Referências
3
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
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'
}
}
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
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!!!
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
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
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
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