CSSinJS

Qu'est ce que le

Cela reste du CSS

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>

Séparer la forme du fond ?

Pourquoi "CSSinJS" ?

Cela ne revient pas à utiliser l'attribut style="" ?

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

Par rapport au *.css

Les choses ne se mélangent pas

Portée limitée par défaut

.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

Plus de cascade

<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

Suppression du code "mort"

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

C'est du 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

Librairie de composant

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

Les inconvénients

Ce n'est pas une solution miracle

Il faut bien décomposer

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

Il faut choisir un outil

JSS
Emotion
styled-components
Aphrodite
cxs
yocss
linaria
Radium
Styletron
...

Couplage fort avec le framework front-end

Beaucoup dépendent de react

Le CSS ne peut pas être mis en cache

Pour le rendu côté serveur

Difficile à inspecter & éditer

Il faut adapter les outils

Comment se comportent les navigateurs ?

Les performances ?

Pour conclure