CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019

Naomi Hauret
Front-end ~ 3 ans
@naomiHauret

CSS 2019 :
23 ans plus tard,
la guerre continue...
@naomiHauret

Petit retour en
arrière…
@naomiHauret
#throwbackthursday

Il y a 23 ans
@naomiHauret
17 décembre 1996
Alors que la guerre des navigateurs fait rage,
une naissance a lieu au milieu du champ de bataille...

L’espoir
@naomiHauret
… qui au ﬁl des ans…

L’espoir
@naomiHauret
… mute en déception …

L’espoir
@naomiHauret
… mute en déception …
… puis en une nouvelle guerre.

@naomiHauret
“ Mais… CSS ça manque quand même de
fonctionnalités ...“

@naomiHauret
“ Mais… CSS ça manque quand même de
fonctionnalités ... “
Les préprocesseurs
Sass: 2006
LESS: 2009
...

@naomiHauret
“ Mais… créer tous les éléments d’UI,
c’est répétitif, long
et compliqué...“

@naomiHauret
“ Mais… créer tous les éléments d’UI,
c’est répétitif, long
et compliqué...“
Les UI Kits
Bootstrap: 2011
Foundation: 2011
Semantic UI: 2013
Materialize: 2014
Bulma: 2016
...

@naomiHauret
“ Mais… les UI Kits c’est lourd,
et j’utilise même pas
de carousels ni
de modales sur mon site... “

@naomiHauret
“ Mais… les UI Kits c’est lourd,
j’utilise même pas
de carousels ni
de modales sur mon site... “
Les micro-frameworks
Skeleton: 2011
PureCSS: 2014
Milligram: 2015
...

@naomiHauret
“ Mais… le theming c’est long et hyper
répétitif... “

@naomiHauret
“ Mais… le theming c’est long et hyper
répétitif... “
Les générateurs
Iota: 2017
...

@naomiHauret
“ Mais… j’ai envie d’utiliser les futures
fonctionnalités de CSS... “

@naomiHauret
“ Mais… j’ai envie d’utiliser les futures
fonctionnalités de CSS... “
Les post-processeurs
Rework: 2012
PostCSS: 2013
...

@naomiHauret
“ Mais… on s’y retrouve pas
dans ce projet... “

@naomiHauret
“ Mais… on s’y retrouve pas
dans ce projet... “
Les conventions d’
écriture et
d’architecture
BEM, SUITCSS,
ITCSS, OOCSS
...

@naomiHauret
“ Mais… écrire du style c’est long, et trouver
des noms de classes aussi... “

@naomiHauret
“ Mais… écrire du style c’est long, et trouver
des noms de classes aussi... “
L’approche
atomique
Atomic CSS: 2015
Tachyons: 2015
TailwindCSS: 2017

@naomiHauret
“ Mais… j’en ai marre, je veux juste changer
cet élément sur cette page,
pas sur toutes les pages... “

@naomiHauret
“ Mais… j’en ai marre, je veux juste changer
cet élément sur cette page,
pas sur toutes les pages... “
Les CSS Modules

@naomiHauret
“ Mais… bah, tout ce qu’on a dit juste avant
en fait.“

@naomiHauret
“ Mais… bah, tout ce qu’on a dit juste avant
en fait.“
Les librairies de
CSS-in-JS
JSS, FelaJS, Emotion,
Styled-Components, cxs, pico,
styletron, radium, freestyler,
styled-jsx
...

Mais
@naomiHauret
avec tous ces outils...

La guerre
avait changé...
@naomiHauret

La guerre avait pris un tournant
idéologique. On ne se battait plus
contre la feuille de style, mais
contre les outils des autres.
Et puis...
@naomiHauret

C’était comme une demande
d’armistice...
@naomiHauret

@naomiHauret
Commencez par vous poser
des questions.

@naomiHauret
Les BONNES
questions.

Type de projet ?
Taille du projet ?
Équipe (combien de personnes, quel niveau de
maîtrise du style?)
@naomiHauret

Le style est-il important ?
Va t-il être partagé entre plusieurs projets di érents ?
(éléments et/ou charte graphique communes entre
di érents sites, app mobiles, app desktop , slides…)
Y-a t-il des thèmes, des variations visuelles des
éléments graphiques ?
La roadmap prévoit-elle des évolutions graphiques
ou de nouveaux éléments ?
@naomiHauret

Certains éléments ont-il un style di érent selon leur état? (ex:
panier vide vs panier 5 articles)
Dans quel langage sont les vues ?
Comment sont rendues les pages ? Côté serveur ? Côté client ? en
pre-rendering ?
Quels navigateurs et quelles plateformes dois-je supporter ?
@naomiHauret

Suis-je à l’aise avec l’outil/la
méthodologie ?
@naomiHauret

@naomiHauret
Comment être sûr de son
choix ou évaluer son
expérience avec tel ou tel
outil ?

@naomiHauret
Le test de
la triforce du respect ™

Respecte moi
Le test de
@naomiHauret

Respecte moi
Respecte mon équipe
Le test de
@naomiHauret

Respecte moi
Respecte mon équipe
Respecte le client
Le test de
@naomiHauret

@naomiHauret
La paix se prépare en
amont.

@naomiHauret
Renseignez vos design tokens (.yml, .js, .json, dans des variables CSS...) et
servez-vous en comme source unique de vérité pour votre style
Maintenez un styleguide et mettez-le en ligne (Storybook, Docz, Fractal,
Styleguidist...)
Adoptez des outils qui vont améliorer la qualité de votre CSS en production:
PurgeCSS, Browserslist, CSSNano, brotli...

@naomiHauret
Mais aussi: ne vous limitez
pas à une seule techno !

Retour
d’expérience
@naomiHauret

CSS
+ PostCSS
+ micro architecture
+ TailwindCSS (atomic css)
+ CSS Modules
+ Emotion (css-in-js)
@naomiHauret

@naomiHauret
TW: La stack suivante n’est pas
parole d’évangile, simplement ce
qui fonctionne le mieux pour mon
cas, selon ma propre expérience
développeur.)

// architecture
.
├── components
│ └── Button
│ ├── index.js
│ ├── index.mdx
│ └── styles.local.css # style scopé au bouton
├── pages
│ ├── medium
│ │ ├──index.js
│ │ └── index.local.css # style scopé à la page
│ │
│ └── styleguide
│
├── styles
│ ├── base
│ │ └── _reboot.css
│ │
│ ├── index.css
│ │
│ ├── tokens
│ │ ├── helper.js
│ │ └── index.js
│ │
│ ├── typo
│ │ └── _index.css
│ └── vendors
│
├── postcss.config.js
│
├── tailwind.js # config de tailwind
│
├── webpack.config.js # Workflow
│
└── .browserslistrc # liste des navigateurs à supporter

// architecture
.
│ └── styles.local.css
├── pages
│ │ └── index.local.css
│ │
│ └── tokens
│ └── Palette.js
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
└── tailwind.js
module.exports = {
plugins: [
require('postcss-easy-import')({}), // importer un fichier CSS dans un autre
require('postcss-normalize')({}), // Normalize
require('postcss-preset-env')({ // CSS4
stage: 0,
}),
require('postcss-custom-media')({ // Media query custom
importFrom: [
'./tailwind.js',
]
}),
require('tailwindcss')('./tailwind.js'), // Tailwind
require('cssnano')({ // CSS Nano (minification en prod)
preset: [
'default',
{ "discardComments": { "removeAll": false } } // conserve certains commentaires
pour PurgeCSS
],
}),
],
}
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
/*
Normalize
*/
@import-normalize;
/*
Custom selectors
*/
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
@custom-selector :--inputs input, select, textarea;
/*
Base styles
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ... */
/* Reset */
html,
body {
@apply .overflow-x-hidden;
@apply .font-base;
}
:--inputs,
button {
@apply .font-family-inherit;
@apply .text-inherit;
@apply .bg-transparent;
}
/* ... */
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
/*
font-face rules
*/
@import "./typo/**/*.css";
/*
Bases
*/
@import "./base/**/*.css";
/* Vendors */
@import "./vendors/**/*.css";
/*
Atomic classes
*/
@tailwind utilities;
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
const myDesignSystem = {
breakpoints: {
xs: 480,
sm: 720,
md: 991,
lg: 1024,
xl: 1260,
},
type: {
sizes: {
base: 16,
20: 20,
},
fontFamily: {
base: '"Objectivity", "system"',
},
fontWeight: {
200: 200,
500: 500
},
},
colors: {
'gray-100': "#A7A7A7",
'gray-200': "#747474",
'gray-300': "#979797",
'violet-100': "#5D32DD",
'black-100': "#090B1F",
},
borderWidths: {
1: '1px',
2: '2px',
},
shadows: {
default: '0 2px 4px 0 rgba(0,0,0,0.2)',
},
// ...
}
Je remplis ce fichier à
partir des maquettes.
J’y renseigne:
- couleurs
- typo (family,
weight, size…)
- border radius
- border-size
- box shadow
- breakpoints
- grille (nombre
et largeur des
colonnes,
gouttières,
largeur des
conteneurs…)
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
const tokens = require('./src/styles/tokens.js').default
module.exports = {
// ...
// Media queries custom
customMedia: {
"--screen-sm": tokens.breakpoints.sm ,
"--screen-md": tokens.breakpoints.md,
"--screen-lg": tokens.breakpoints.lg,
"--screen-xl": tokens.breakpoints.xl ,
},
screens: { // variantes responsives à générer
...tokens.breakpoints,
},
// ... déclaration des classes à générer depuis nos tokens ...
fontWeights: {
inherit: "inherit",
...tokens.type.fontWeight,
},
}
}
Je remplis ce fichier en
utilisant un spread
operator sur les design
tokens.
Tailwind va générer pour
nous toutes nos classes,
avec les préfixes
responsives et certaines
variantes de pseudo
éléments (:focus,
:hover)
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
Dans les composants,
j’utilise les classes
atomiques de Tailwind le
plus souvent possible.
const Button = props => (
<button className=”px-10 py-5 bg-blue-100 radius-full”>
{props.children}
</button>
)
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
atomiques le plus
souvent possible.
Si j’ai besoin de créer
des thèmes/variantes, je
crée une paire
clé-valeur dans un objet
const theme = {
bg: {
light: ‘bg-white-100’,
dark: ‘bg-black-100’,
colorful: ‘bg-blue-100’,
},
text: {
light: ‘text-black-100’,
dark: ‘text-white-100’,
colorful: ‘text-white-100’,
}
}
<button className={`
px-10 py-5 radius-full
${theme.bg[props.variant]}
${theme.text[props.variant]}
`}>
{props.children}
</button>
)
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
atomiques le plus
souvent possible.
crée une paire
Si je ne peux utiliser
de classes Tailwind, je
passe par crée un
fichier.local.css qui va
scoper le style à l’
élément
// styles.local.css
.button::after {
--size: 10px;
@apply .block;
@apply .bg-blue-100;
content: ‘ ‘;
width: var(--size);
height: var(--size);
@media (--screen-md) {
--size: 5px;
}
}
// index.jx
import styles from ‘./styles.local.css’
${styles.button}
`}>
{props.children}
</button>
)
...

// architecture
.
├── pages
│ │
│
├── styles
│ ├── base
│ │
│ │
│ │
│ ├── typo
│
│
atomiques le plus
souvent possible.
crée une paire
Si je ne peux utiliser
de classes Tailwind, je
passe par crée un
fichier.local.css qui va
scoper le style à l’
élément
Et enfin si le style du
composant dépend de son
état, j’utilise du
CSS-in-JS
import styles from ‘./styles.local.css’
import { css } from ‘@emotion/core’
${styles.button}
`.concat(“ “, css({
‘&::before’: {
display: ‘flex’,
backgroundImage: props.hasImage,
},
}))}>
{props.children}
</button>
)
...

.
├── pages
│
├── styles
│ ├── base
│ │
│ ├── components
│ │ └── button
│ │
│ │
│ ├── typo
│
│
Dans les composants, j’utilise les classes atomiques le plus
souvent possible.
Si j’ai besoin de créer des thèmes/variantes, je crée une paire
Si je ne peux utiliser de classes Tailwind, je passe par crée un
fichier.local.css qui va scoper le style à l’élément
Et enfin si le style du composant dépend de son état, j’utilise
du CSS-in-JS.
Si je suis dans un projet où je ne peux pas utiliser
du CSS in JS ou des CSS Modules, l’architecture change
un peu : les .local.css vont dans
src/styles/components.
J’utilise alors une syntaxe similaire à BEM.
...

Faites la paix.
@naomiHauret
Soyez pragmatique. Testez.
Discutez avec votre équipe.
Partagez vos découvertes.

Peace y’all.
CSS 2019: 23 plus tard, la guerre continue...
@naomiHauret

CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019

Recommandé

Recommandé

Contenu connexe

Similaire à CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019

Similaire à CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019 (20)

Dernier

Dernier (9)

CSS 2019: 23 plus tard, la guerre continue... @WEB2DAY 2019