JavaScript isn't enabled in your browser, so this file can't be opened. Enable and reload.

1 of 125

Tour d’horizon des 3 grandes méthodologies CSS

JS-STAR Paris | 28/09/2016 | @verekia

2 of 125

Jonathan Verrecchia

3 of 125

Jonathan Verrecchia

Créateur d'Initializr

4 of 125

Jonathan Verrecchia

Créateur d'Initializr

Co-auteur d'un livre sur HTML5 chez Dunod

5 of 125

Jonathan Verrecchia

Créateur d'Initializr

Co-auteur d'un livre sur HTML5 chez Dunod

Ex-ingénieur Front-End chez Yelp

6 of 125

Jonathan Verrecchia

Créateur d'Initializr

Co-auteur d'un livre sur HTML5 chez Dunod

Ex-ingénieur Front-End chez Yelp

Freelance

7 of 125

Jonathan Verrecchia

Créateur d'Initializr

Co-auteur d'un livre sur HTML5 chez Dunod

Ex-ingénieur Front-End chez Yelp

Freelance

@verekia | verekia.com

8 of 125

CSS : Résumé des épisodes précédents

9 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

10 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 :

11 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...)

12 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...) ⇒ Apparition d'une étape de build

13 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...) ⇒ Apparition d'une étape de build

A partir de 2012 :

14 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...) ⇒ Apparition d'une étape de build

A partir de 2012 : Changement de paradigme sur la sémantique CSS (.newsfeed ⇒ .blocklist)

15 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...) ⇒ Apparition d'une étape de build

A partir de 2012 : Changement de paradigme sur la sémantique CSS (.newsfeed ⇒ .blocklist), démocratisation des classes utilitaires (.float-right)

16 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...) ⇒ Apparition d'une étape de build

A partir de 2012 : Changement de paradigme sur la sémantique CSS (.newsfeed ⇒ .blocklist), démocratisation des classes utilitaires (.float-right) et apparition des conventions de nommage (.l-grid, .MyComponent-Child--modifier, .u-text-center)

17 of 125

CSS : Résumé des épisodes précédents

Avant 2010 : CSS pur (en général). Peu de conventions. 1 fichier CSS global, 1 fichier CSS par page spécifique pour économiser les requêtes HTTP.

A partir de 2011 : Avènement des préprocesseurs (imports de fichiers, variables, mixins réutilisables...) ⇒ Apparition d'une étape de build

A partir de 2012 : Changement de paradigme sur la sémantique CSS (.newsfeed ⇒ .blocklist), démocratisation des classes utilitaires (.float-right) et apparition des conventions de nommage (.l-grid, .MyComponent-Child--modifier, .u-text-center)

A partir de 2015 : PostCSS, CSS Modules, CSS-in-JS...

18 of 125

Le CSS en 2016...

19 of 125

Le CSS en 2016...

BEM

SUITCSS

OOCSS

Aphrodite

JSS

SMACSS

PostCSS

SASS

Less

Stylus

Atomic CSS

ITCSS

Tachyons

Basscss

CSS Modules

Radium

React Inline Styles

CSSX

Web Components

React Native for Web

20 of 125

Le plus gros problème du CSS

21 of 125

Le plus gros problème du CSS

(d'autres problèmes)

22 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

23 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

24 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

sidebar.css : .sidebar .pretty-link { color: green }

25 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

sidebar.css : .sidebar .pretty-link { color: green }

promo.css : .promo a { color: red }

26 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

sidebar.css : .sidebar .pretty-link { color: green }

promo.css : .promo a { color: red }

HTML : <a class="pretty-link">Lien</a>

27 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

sidebar.css : .sidebar .pretty-link { color: green }

promo.css : .promo a { color: red }

HTML : <a class="pretty-link">Lien</a>

Impossible de savoir si un pretty-link sera effectivement bleu.

28 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

sidebar.css : .sidebar .pretty-link { color: green }

promo.css : .promo a { color: red }

HTML : <a class="pretty-link">Lien</a>

Impossible de savoir si un pretty-link sera effectivement bleu.

C'est un peu comme si const num = 5 pouvait contenir d'autres valeurs que 5 selon l'endroit où vous la déclarez.

29 of 125

Mutabilité + pas d'encapsulation = imprédictibilité

global.css : .pretty-link { font-weight: bold; color: blue }

sidebar.css : .sidebar .pretty-link { color: green }

promo.css : .promo a { color: red }

HTML : <a class="pretty-link">Lien</a>

Impossible de savoir si un pretty-link sera effectivement bleu.

C'est un peu comme si const num = 5 pouvait contenir d'autres valeurs que 5 selon l'endroit où vous la déclarez. Ouch.

30 of 125

Les solutions : 3 grandes familles

31 of 125

CSS-in-...

32 of 125

CSS-in-CSS

CSS-in-HTML

CSS-in-JS

33 of 125

CSS-in-CSS

La méthodologie classique

34 of 125

CSS-in-CSS | Les préprocesseurs

35 of 125

CSS-in-CSS | Les préprocesseurs

CSS n'est pas un langage de programmation, il est déclaratif.

36 of 125

CSS-in-CSS | Les préprocesseurs

CSS n'est pas un langage de programmation, il est déclaratif.
Et si on le transformait en un vrai langage ?

37 of 125

CSS-in-CSS | Les préprocesseurs

CSS n'est pas un langage de programmation, il est déclaratif.
Et si on le transformait en un vrai langage ?
Variables, boucles, conditions, fonctions, listes, etc.

38 of 125

CSS-in-CSS | Les préprocesseurs

CSS n'est pas un langage de programmation, il est déclaratif.
Et si on le transformait en un vrai langage ?
Variables, boucles, conditions, fonctions, listes, etc.

Ça a donné naissance aux préprocesseurs. CSS devient du pseudo-CSS.

39 of 125

CSS-in-CSS | Les préprocesseurs

CSS n'est pas un langage de programmation, il est déclaratif.
Et si on le transformait en un vrai langage ?
Variables, boucles, conditions, fonctions, listes, etc.

Ça a donné naissance aux préprocesseurs. CSS devient du pseudo-CSS.

40 of 125

CSS-in-CSS | Les préprocesseurs

CSS n'est pas un langage de programmation, il est déclaratif.
Et si on le transformait en un vrai langage ?
Variables, boucles, conditions, fonctions, listes, etc.

Ça a donné naissance aux préprocesseurs. CSS devient du pseudo-CSS.

41 of 125

CSS-in-CSS | Méthodologie et nommage

42 of 125

CSS-in-CSS | Méthodologie et nommage

Pas d'encapsulation technique ⇒ Erreurs possibles

43 of 125

CSS-in-CSS | Méthodologie et nommage

Pas d'encapsulation technique ⇒ Erreurs possibles
Compensé par une convention de nommage comme BEM, SUITCSS, SMACSS

SMACSS

SUIT

CSS

BEM

44 of 125

CSS-in-CSS | Méthodologie et nommage

Pas d'encapsulation technique ⇒ Erreurs possibles
Compensé par une convention de nommage comme BEM, SUITCSS, SMACSS

SUITCSS : .MyComponent-Child--modifier

SMACSS

SUIT

CSS

BEM

45 of 125

CSS-in-CSS | Méthodologie et nommage

Pas d'encapsulation technique ⇒ Erreurs possibles
Compensé par une convention de nommage comme BEM, SUITCSS, SMACSS

SUITCSS : .MyComponent-Child--modifier

.PrettyForm-Password--disabled

SMACSS

SUIT

CSS

BEM

46 of 125

CSS-in-CSS | Méthodologie et nommage

Pas d'encapsulation technique ⇒ Erreurs possibles
Compensé par une convention de nommage comme BEM, SUITCSS, SMACSS

SUITCSS : .MyComponent-Child--modifier

.PrettyForm-Password--disabled

Des linters comme les plugin PostCSS Stylelint et Immutable CSS permettent d'aider à être rigoureux, mais ne sont pas infaillibles.

SMACSS

SUIT

CSS

BEM

47 of 125

CSS-in-CSS | Ma stack idéale

48 of 125

CSS-in-CSS | Ma stack idéale

Node-Sass (libsass) : Préprocesseur principal

49 of 125

CSS-in-CSS | Ma stack idéale

Node-Sass (libsass) : Préprocesseur principal
SUITCSS : Convention de nommage

50 of 125

CSS-in-CSS | Ma stack idéale

Node-Sass (libsass) : Préprocesseur principal
SUITCSS : Convention de nommage
SUITCSS : Classes utilitaires

51 of 125

CSS-in-CSS | Ma stack idéale

Node-Sass (libsass) : Préprocesseur principal
SUITCSS : Convention de nommage
SUITCSS : Classes utilitaires
PostCSS - Autoprefixer : Préfixes vendeurs automatiques

52 of 125

CSS-in-CSS | Ma stack idéale

Node-Sass (libsass) : Préprocesseur principal
SUITCSS : Convention de nommage
SUITCSS : Classes utilitaires
PostCSS - Autoprefixer : Préfixes vendeurs automatiques
PostCSS - Stylelint SCSS : Linting
PostCSS - BEM Linter, option SUITCSS : Suivi de la convention SUITCSS
PostCSS - Immutable CSS : Immutabilité

53 of 125

CSS-in-CSS | Ma stack idéale

Node-Sass (libsass) : Préprocesseur principal
SUITCSS : Convention de nommage
SUITCSS : Classes utilitaires
PostCSS - Autoprefixer : Préfixes vendeurs automatiques
PostCSS - Stylelint SCSS : Linting
PostCSS - BEM Linter, option SUITCSS : Suivi de la convention SUITCSS
PostCSS - Immutable CSS : Immutabilité
PurifyCSS : Identification et élimination les règles inutilisées

54 of 125

CSS-in-HTML

La méthodologie moche mais efficace

55 of 125

CSS-in-HTML | 100% classes utilitaires

56 of 125

CSS-in-HTML | 100% classes utilitaires

<button class="fl-r bgc-primary m-b-20">Sign Up</button>

57 of 125

CSS-in-HTML | 100% classes utilitaires

<button class="fl-r bgc-primary m-b-20">Sign Up</button>

Similaire aux styles inline (règle l'encapsulation) en plus concis, avec support possible des variables, media queries et pseudo-classes.

58 of 125

CSS-in-HTML | 100% classes utilitaires

<button class="fl-r bgc-primary m-b-20">Sign Up</button>

Similaire aux styles inline (règle l'encapsulation) en plus concis, avec support possible des variables, media queries et pseudo-classes.
Il ne s'agit pas de librairies de composants comme Bootstrap, il faut connaître CSS pour faire du CSS-in-HTML. En général, 1 classe = 1 règle CSS.

59 of 125

CSS-in-HTML | 100% classes utilitaires

<button class="fl-r bgc-primary m-b-20">Sign Up</button>

Similaire aux styles inline (règle l'encapsulation) en plus concis, avec support possible des variables, media queries et pseudo-classes.
Il ne s'agit pas de librairies de composants comme Bootstrap, il faut connaître CSS pour faire du CSS-in-HTML. En général, 1 classe = 1 règle CSS.
Poids du fichier CSS de production constant, pour 5 ou 5000 pages.

60 of 125

CSS-in-HTML | 100% classes utilitaires

<button class="fl-r bgc-primary m-b-20">Sign Up</button>

Similaire aux styles inline (règle l'encapsulation) en plus concis, avec support possible des variables, media queries et pseudo-classes.
Il ne s'agit pas de librairies de composants comme Bootstrap, il faut connaître CSS pour faire du CSS-in-HTML. En général, 1 classe = 1 règle CSS.
Poids du fichier CSS de production constant, pour 5 ou 5000 pages.

Les fichiers HTML s'alourdissent, mais aucun fichier CSS supplémentaire n'est nécessaire. Le développement de pages en CSS-in-HTML est très rapide.

61 of 125

CSS-in-HTML | Tachyons et Basscss

62 of 125

CSS-in-HTML | Tachyons et Basscss

Tachyons (14KB), modulaire (npm i -S tachyons-spacing)
Exemple : f6 dib ba b--black-20 bg-blue white ph3 ph4-ns

63 of 125

CSS-in-HTML | Tachyons et Basscss

Tachyons (14KB), modulaire (npm i -S tachyons-spacing)
Exemple : f6 dib ba b--black-20 bg-blue white ph3 ph4-ns
Basscss (2KB), minimaliste
Exemple : left border overflow-hidden inline-block mb0 px2

64 of 125

CSS-in-HTML | Atomic CSS

65 of 125

CSS-in-HTML | Atomic CSS

Atomic CSS, par Yahoo. La plus connue et la plus exhaustive.

66 of 125

CSS-in-HTML | Atomic CSS

Atomic CSS, par Yahoo. La plus connue et la plus exhaustive.
Inclut Atomizer, script qui permet de ne générer que les classes utilitaires étant effectivement utilisées dans l'HTML / JS

67 of 125

CSS-in-HTML | Atomic CSS

Atomic CSS, par Yahoo. La plus connue et la plus exhaustive.
Inclut Atomizer, script qui permet de ne générer que les classes utilitaires étant effectivement utilisées dans l'HTML / JS

<div class="Bgc(mycolor) Bgc(#0280ae):h Mend(0) My(0) D(ib)--sm">

68 of 125

CSS-in-HTML | Atomic CSS

Atomic CSS, par Yahoo. La plus connue et la plus exhaustive.
Inclut Atomizer, script qui permet de ne générer que les classes utilitaires étant effectivement utilisées dans l'HTML / JS

<div class="Bgc(mycolor) Bgc(#0280ae):h Mend(0) My(0) D(ib)--sm">

Ces caractères spéciaux dans les sélecteurs sont valides,

mais doivent être échappés par un \ dans le CSS.

69 of 125

CSS-in-HTML | Atomic CSS

Atomic CSS, par Yahoo. La plus connue et la plus exhaustive.
Inclut Atomizer, script qui permet de ne générer que les classes utilitaires étant effectivement utilisées dans l'HTML / JS

<div class="Bgc(mycolor) Bgc(#0280ae):h Mend(0) My(0) D(ib)--sm">

Ces caractères spéciaux dans les sélecteurs sont valides,

mais doivent être échappés par un \ dans le CSS.

Suivez Thierry Koblentz (@thierrykoblentz)

70 of 125

71 of 125

CSS-in-HTML | ZeroCSS

72 of 125

CSS-in-HTML | ZeroCSS

ZeroCSS est mon générateur de classes utilitaires.

73 of 125

CSS-in-HTML | ZeroCSS

ZeroCSS est mon générateur de classes utilitaires.

Syntaxe similaire à Atomic CSS, en plus légère, et personnalisable :

bgc(primary) bgc(primarydark):h p(20) fl(r)[md-up] w(100%)[sm-down]

74 of 125

CSS-in-HTML | ZeroCSS

ZeroCSS est mon générateur de classes utilitaires.

Syntaxe similaire à Atomic CSS, en plus légère, et personnalisable :

bgc(primary) bgc(primarydark):h p(20) fl(r)[md-up] w(100%)[sm-down]

Moins perfectionné qu'Atomic CSS, mais plus intuitif et léger.

75 of 125

CSS-in-HTML | ZeroCSS

ZeroCSS est mon générateur de classes utilitaires.

Syntaxe similaire à Atomic CSS, en plus légère, et personnalisable :

bgc(primary) bgc(primarydark):h p(20) fl(r)[md-up] w(100%)[sm-down]

Moins perfectionné qu'Atomic CSS, mais plus intuitif et léger.

github.com/verekia/zerocss

76 of 125

CSS-in-HTML | Composants réutilisables

77 of 125

CSS-in-HTML | Composants réutilisables

components.yaml – Que votre serveur web va lire et passer aux templates

primaryButton: dis(ib) bgc(primary) bgc(primarydarker):h

78 of 125

CSS-in-HTML | Composants réutilisables

components.yaml – Que votre serveur web va lire et passer aux templates

primaryButton: dis(ib) bgc(primary) bgc(primarydarker):h

button.mustache

<button class="{{ components.primaryButton }} m(b,20)">

79 of 125

CSS-in-HTML | Composants réutilisables

components.yaml – Que votre serveur web va lire et passer aux templates

primaryButton: dis(ib) bgc(primary) bgc(primarydarker):h

button.mustache

<button class="{{ components.primaryButton }} m(b,20)">

Sortie :

<button class="dis(ib) bgc(primary) bgc(primarydarker):h m(b,20)">

80 of 125

CSS-in-JS

La méthodologie la plus prometteuse

81 of 125

CSS-in-JS | Préprocesseurs vs. "vrais" langages

Pourquoi a-t-on inventé un nouveau langage de programmation comme SASS, alors qu'il y a déjà plein de langages qui pourraient générer du CSS?

82 of 125

CSS-in-JS | Préprocesseurs vs. "vrais" langages

Pourquoi a-t-on inventé un nouveau langage de programmation comme SASS, alors qu'il y a déjà plein de langages qui pourraient générer du CSS?

Les préprocesseurs ne font qu'une seule chose c'est générer une string de CSS. Peu importe si la string est générée en SASS, Python, JS ou Ruby, au final, c'est juste une chaîne de caractères pour le navigateur du client.

83 of 125

CSS-in-JS | Préprocesseurs vs. "vrais" langages

Pourquoi a-t-on inventé un nouveau langage de programmation comme SASS, alors qu'il y a déjà plein de langages qui pourraient générer du CSS?

Les préprocesseurs ne font qu'une seule chose c'est générer une string de CSS. Peu importe si la string est générée en SASS, Python, JS ou Ruby, au final, c'est juste une chaîne de caractères pour le navigateur du client.

JavaScript a l'avantage de fonctionner côté client et d'être connu par la plupart des développeurs CSS, c'est donc naturellement le langage de choix.

84 of 125

CSS-in-JS | Préprocesseurs vs. "vrais" langages

Pourquoi a-t-on inventé un nouveau langage de programmation comme SASS, alors qu'il y a déjà plein de langages qui pourraient générer du CSS?

Les préprocesseurs ne font qu'une seule chose c'est générer une string de CSS. Peu importe si la string est générée en SASS, Python, JS ou Ruby, au final, c'est juste une chaîne de caractères pour le navigateur du client.

JavaScript a l'avantage de fonctionner côté client et d'être connu par la plupart des développeurs CSS, c'est donc naturellement le langage de choix.

JavaScript a toutes les fonctionnalités de programmation qu'a SASS, avec les tests unitaires, le linting, et tout l'écosystème Node / NPM (npm -i -S color).

85 of 125

CSS-in-JS | Les styles inline React

86 of 125

CSS-in-JS | Les styles inline React

L'idée initiale pour une encapsulation simple :

87 of 125

CSS-in-JS | Les styles inline React

L'idée initiale pour une encapsulation simple :

const styles = { button: { color: blue } };

<div style={ styles.button }>

88 of 125

CSS-in-JS | Les styles inline React

L'idée initiale pour une encapsulation simple :

const styles = { button: { color: blue } };

<div style={ styles.button }>

Ça marche mais...

89 of 125

CSS-in-JS | Les styles inline React

L'idée initiale pour une encapsulation simple :

const styles = { button: { color: blue } };

<div style={ styles.button }>

Ça marche mais...

Pas de pseudo-classes (:hover)
Pas de media queries
Pas d'animations (keyframes)

90 of 125

CSS-in-JS | Les styles inline React

L'idée initiale pour une encapsulation simple :

const styles = { button: { color: blue } };

<div style={ styles.button }>

Ça marche mais...

Pas de pseudo-classes (:hover)
Pas de media queries
Pas d'animations (keyframes)

speakerdeck.com/vjeux/react-css-in-js

91 of 125

CSS-in-JS | JSS et Aphrodite

92 of 125

CSS-in-JS | JSS et Aphrodite

2 librairies similaires qui me semblent les plus prometteuses.

93 of 125

CSS-in-JS | JSS et Aphrodite

2 librairies similaires qui me semblent les plus prometteuses.

JSS semble avoir la préférence de l'équipe React. Dan Abramov, auteur de Redux, membre de la core team React a travaillé sur react-jss.

94 of 125

CSS-in-JS | JSS et Aphrodite

2 librairies similaires qui me semblent les plus prometteuses.

JSS semble avoir la préférence de l'équipe React. Dan Abramov, auteur de Redux, membre de la core team React a travaillé sur react-jss.

Aphrodite a été créé par Khan Academy.

95 of 125

CSS-in-JS | JSS et Aphrodite

2 librairies similaires qui me semblent les plus prometteuses.

JSS semble avoir la préférence de l'équipe React. Dan Abramov, auteur de Redux, membre de la core team React a travaillé sur react-jss.

Aphrodite a été créé par Khan Academy.

Les 2 supportent les pseudo-classes, media queries, le rendering côté serveur.

96 of 125

CSS-in-JS | JSS et Aphrodite

2 librairies similaires qui me semblent les plus prometteuses.

JSS semble avoir la préférence de l'équipe React. Dan Abramov, auteur de Redux, membre de la core team React a travaillé sur react-jss.

Aphrodite a été créé par Khan Academy.

Les 2 supportent les pseudo-classes, media queries, le rendering côté serveur.

Le binding entre élément HTML et styles CSS ne se fait plus par des classes nommées à la main. Des classes uniques sont générées.

97 of 125

CSS-in-JS | JSS et Aphrodite

const styles = {

prettyLink: {

color: 'blue',

},

};

98 of 125

CSS-in-JS | JSS et Aphrodite

const styles = {

prettyLink: {

color: 'blue',

},

};

const classes = jss.createStyleSheet(styles).classes;

console.log(`<a class="${classes.prettyLink}">Lien</a>`);

console.log(jss.sheets.toString());

99 of 125

CSS-in-JS | JSS et Aphrodite

const styles = {

prettyLink: {

color: 'blue',

},

};

const classes = jss.createStyleSheet(styles).classes;

console.log(`<a class="${classes.prettyLink}">Lien</a>`);

console.log(jss.sheets.toString());

// <a class="prettyLink-1289375814">Lien</a>

// prettyLink-1289375814 { color: blue }

100 of 125

CSS-in-JS (presque) | CSS Modules

101 of 125

CSS-in-JS (presque) | CSS Modules

Même approche de génération de classes uniques, mais les styles se déclarent dans des fichiers CSS. (button.css, qui va avec button.jsx par exemple).

102 of 125

CSS-in-JS (presque) | CSS Modules

Même approche de génération de classes uniques, mais les styles se déclarent dans des fichiers CSS. (button.css, qui va avec button.jsx par exemple).

Possibilité d'intégrer des librairies CSS existantes avec un peu de travail. Impossible avec JSS et Aphrodite.

103 of 125

CSS-in-JS (presque) | CSS Modules

Même approche de génération de classes uniques, mais les styles se déclarent dans des fichiers CSS. (button.css, qui va avec button.jsx par exemple).

Possibilité d'intégrer des librairies CSS existantes avec un peu de travail. Impossible avec JSS et Aphrodite.

Présente les faiblesses de langage du CSS comparé à JavaScript.

104 of 125

CSS-in-JS (presque) | CSS Modules

Même approche de génération de classes uniques, mais les styles se déclarent dans des fichiers CSS. (button.css, qui va avec button.jsx par exemple).

Possibilité d'intégrer des librairies CSS existantes avec un peu de travail. Impossible avec JSS et Aphrodite.

Présente les faiblesses de langage du CSS comparé à JavaScript.

S'intègre facilement avec Webpack pour le côté client.

105 of 125

CSS-in-JS (presque) | CSS Modules

Même approche de génération de classes uniques, mais les styles se déclarent dans des fichiers CSS. (button.css, qui va avec button.jsx par exemple).

Possibilité d'intégrer des librairies CSS existantes avec un peu de travail. Impossible avec JSS et Aphrodite.

Présente les faiblesses de langage du CSS comparé à JavaScript.

S'intègre facilement avec Webpack pour le côté client.

Plugin PostCSS pour le rendering côté serveur qui renvoie un JSON de mapping entre les classes CSS normales et les classes CSS hashées.

106 of 125

CSS-in-JS | Rendering côté serveur

107 of 125

CSS-in-JS | Rendering côté serveur

Vital pour le SEO, et pour un chargement initial rapide.

108 of 125

CSS-in-JS | Rendering côté serveur

Vital pour le SEO, et pour un chargement initial rapide.

Côté client c'est facile, les libraires connectent automatiquement les styles aux éléments HTML.

109 of 125

CSS-in-JS | Rendering côté serveur

Vital pour le SEO, et pour un chargement initial rapide.

Côté client c'est facile, les libraires connectent automatiquement les styles aux éléments HTML.

Côté serveur, si votre backend est en JS, l'intégration est simple. Sinon, vous pouvez générer les classes uniques au build, mais vous devrez faire de la plomberie et connecter ces classes avec vos templates vous-mêmes.

110 of 125

CSS-in-JS | Rendering côté serveur

Vital pour le SEO, et pour un chargement initial rapide.

Côté client c'est facile, les libraires connectent automatiquement les styles aux éléments HTML.

Côté serveur, si votre backend est en JS, l'intégration est simple. Sinon, vous pouvez générer les classes uniques au build, mais vous devrez faire de la plomberie et connecter ces classes avec vos templates vous-mêmes.

header.mustache

<button class="{{ myclasses.primaryButton }}">

111 of 125

CSS-in-JS | Des tonnes de librairies

github.com/MicheleBertoli/css-in-js

CSSX, Radium (React-only), babel-plugin-css-in-js, React Native for Web...

112 of 125

Et les Web Components ?

113 of 125

Et les Web Components ?

Permet entre autres les Custom Elements et l'encapsulation du CSS.

114 of 125

Et les Web Components ?

Permet entre autres les Custom Elements et l'encapsulation du CSS.

Mauvais support navigateur (Polymer répare le support sur IE11+)

115 of 125

Et les Web Components ?

Permet entre autres les Custom Elements et l'encapsulation du CSS.

Mauvais support navigateur (Polymer répare le support sur IE11+)

Pas / peu SEO-friendly

116 of 125

Et les Web Components ?

Permet entre autres les Custom Elements et l'encapsulation du CSS.

Mauvais support navigateur (Polymer répare le support sur IE11+)

Pas / peu SEO-friendly

React résout beaucoup des problématiques soulevées par Web Components avec une implémentation qui fonctionne partout dès aujourd'hui. L'engouement pour Web Components s'essouffle donc un peu.

117 of 125

Et les Web Components ?

Permet entre autres les Custom Elements et l'encapsulation du CSS.

Mauvais support navigateur (Polymer répare le support sur IE11+)

Pas / peu SEO-friendly

React résout beaucoup des problématiques soulevées par Web Components avec une implémentation qui fonctionne partout dès aujourd'hui. L'engouement pour Web Components s'essouffle donc un peu.

A reconsidérer lorsqu'il y aura un meilleur support navigateur.

118 of 125

Et Bootstrap dans tout ça ?

119 of 125

Et Bootstrap dans tout ça ?

Bootstrap et Foundation peuvent s'utiliser avec les 3 méthodologies.

120 of 125

Et Bootstrap dans tout ça ?

Bootstrap et Foundation peuvent s'utiliser avec les 3 méthodologies.

CSS-in-CSS apportera plus de flexibilité pour pouvoir modifier les variables SASS directement. Avec les 2 autres méthodes, vous pouvez toujours utiliser Bootstrap / Foundation compilés en CSS, puis écraser les styles que vous voulez, ou bien ajouter SASS à votre build seulement pour Bootstrap.

121 of 125

Comment choisir votre méthodologie ?

122 of 125

Comment choisir votre méthodologie ?

Le choix le plus raisonnable en équipe avec des développeurs qui ne sont pas particulièrements experts du CSS : CSS-in-CSS (SASS + PostCSS)

123 of 125

Comment choisir votre méthodologie ?

Le choix le plus raisonnable en équipe avec des développeurs qui ne sont pas particulièrements experts du CSS : CSS-in-CSS (SASS + PostCSS)

Pour un petit projet rapide : CSS-in-HTML (Basscss, Tachyons, ZeroCSS)

124 of 125

Comment choisir votre méthodologie ?

Le choix le plus raisonnable en équipe avec des développeurs qui ne sont pas particulièrements experts du CSS : CSS-in-CSS (SASS + PostCSS)

Pour un petit projet rapide : CSS-in-HTML (Basscss, Tachyons, ZeroCSS)

Pour un projet au sein d'une équipe à l'aise en JS, particulièrement avec React : Essayez CSS-in-JS (territoire encore vierge, sans best-practices établies ni librairie dominante).

125 of 125

Merci !

JS-STAR Paris | 28/09/2016 | @verekia