Qu'est ce que le
Avant tout
Mais publié différemment
import { css, cx } from 'emotion'
const color = 'white'
render(
<div
className={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)
De retour en 1990 ?
<div style="margin:30px;">
<font size="16" color="red">
Ok boomer !
</font>
</div>
Pourquoi "CSSinJS" ?
oui et non...
import { css, cx } from 'emotion'
const color = 'white'
render(
<div
className={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)
<div class="css-1h3ivcl">Hover to change color.</div>
Quel sont les avantages
Les choses ne se mélangent pas
.article {
border: solid 1px grey;
padding: 20px;
color: black;
background: #FFF;
box-shadow: 0px 0px 2px rgba(0, 0, 0.2);
}
😈 Cet inconvénient peut être limité avec une bonne rigueur de nommage
.article_c287ryX {
border: solid 1px grey;
padding: 20px;
color: black;
background: #FFF;
box-shadow: 0px 0px 2px rgba(0, 0, 0.2);
}
Comportement plus prévisible
<button class="btn background-blue">
Ceci est un bouton
</button>
😈 Cet inconvénient peut être limité avec une bonne rigueur dans l'organisation des classes
const Styles = {
Button: {
background: COLORS.red,
padding: 10
}
}
function MonComposant ({children}) {
return <button css={{...Styles.button, background: COLORS.blue}}>
{children}
</button>
}
Simplification de l'optimisation
Un composant non chargé = style non chargé ;)
😿 Des solutions existent mais leur portée est limitée
On peut profiter de l'écosystème JavaScript
const Styles = {
Button: {
background: opacity(COLORS.red),
padding: 10,
position: absolute,
...inset(0),
[screen('small')]: {
padding: 5
}
}
}
On groupe par fonction, tout est au même endroit
function MonComposant ({children}) {
return <Card depth={2}>
<Box padding={2}>
<Title level={2}>Titre de la carte</Title>
<Text>Une petite description de test pour voir</Text>
<Button variant="primary">Voir plus de détails</Button>
</Box>
</Card>
}
Des solutions qui apportent aussi des problèmes
Ce n'est pas une solution miracle
function MauvaisComposant () {
return <Box flex color="primary" p={10} shadow="shadow1" bold alignItems="center" typo="heading2">
Cet élément fait trop de chose
</Box>
}
function MeilleurComposant () {
return <Card padding={2} depth={1}>
<Flex center>
<Text variant="heading2">Ceci est un text</Text>
</Flex>
</Card>
}
Pas de standard
Couplage fort avec le framework front-end
Le CSS ne peut pas être mis en cache
Difficile à inspecter & éditer
Comment se comportent les navigateurs ?
Pour conclure