[FR] Post CSS era: Des feuilles de styles préprocessés aux CSS Modules

@MoOx Post CSS era 1 Des feuilles de styles préprocessés
aux CSS Modules @MoOx

@MoOx @MoOx Développeur Front-end Freelance http://moox.io/ 2

@MoOx 3

@MoOx 4 { Putain de code ! … github.com/MoOx }
@MoOx

@MoOx 5

@MoOx Écrire du CSS en 2010 ? 7

@MoOx 8

@MoOx Pourquoi le CSS c’était pas marrant ? 9

@MoOx Pas de variables / constantes 10

@MoOx Pas (vraiment) de fonctions 11

@MoOx Ré-utilisabilité difﬁcile ? 12

@MoOx @import 13

@MoOx HTTP 1 14

@MoOx HTTP 1 15 … NOPE

@MoOx héritage, composition 16

@MoOx héritage, composition 17 … NOPE

@MoOx PRÉ-PROCESSEURS CSS 18

@MoOx 19

@MoOx @import $var + / * - color 20

@MoOx 21 http://putaindecode.io/fr/articles/css/preprocesseurs/

@MoOx 22

@MoOx @mixins ? 23 @mixin block() { border: 1px solid
#000; background: url(whatever.jpg) } .class { @include block(); background: red; }

@MoOx @mixins ? 24 @mixin block() { border: 1px solid
#000; background: url(whatever.jpg) } .class { @include block(); background: red; } /* BAM */

@MoOx @extends 25

@MoOx 26

@MoOx 27 .product .single_add_to_cart_button, .cart .button, input.checkout-button.alt.button, .shipping- calculator-form .button,
.multistep_step .button, #place_order.button, .single- product .single_add_to_cart_button.button.alt, .woocom merce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button { background-color: #605f5e; } http://pressupinc.com/blog/2014/11/dont-overextend-yourself-in-sass/

@MoOx 28 http://pressupinc.com/blog/2014/11/dont-overextend-yourself-in-sass/ Cascading shit .product .single_add_to_cart_button, .cart .button, input.checkout-button.alt.button,
.shipping- calculator-form .button, .multistep_step .button, #place_order.button, .single- product .single_add_to_cart_button.button.alt, .woocom merce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button { background-color: #605f5e; }

@MoOx & nesting ? 29

@MoOx #sidebar ul ul li a { } .sidebar-link {
} 30

@MoOx 31 #sidebar ul ul li a { } .sidebar-link
{ try: again; }

@MoOx Speciﬁcity shit 32 #sidebar ul ul li a {
} .sidebar-link { try: again; }

@MoOx 33 Problem Exists Between Keyboard And Chair

@MoOx Frameworks ? 34

@MoOx selector = global (class) name 35

@MoOx selector = global (class) name 36

@MoOx scoping 37

@MoOx scoping 38 … NOPE

@MoOx dependency management 39

@MoOx dependency management 40 … NOPE

@MoOx Entre le langage CSS et les préprocesseurs CSS… 41

@MoOx 43

@MoOx 44 STYLING

@MoOx Les problèmes de CSS 45 - Tous est global
- Scope des styles / Isolation - Conﬂits de spéciﬁcité - Trop de choses imprévisibles - Pas de gestion des dépendances - Supprimer du code inutile

@MoOx Les préprocesseurs CSS ne résolvent pas ces problèmes 46

@MoOx 47 #sidebar ul li a { color: blue; display:
block; padding: 1em; }

@MoOx #sidebar ul li a { color: blue; display: block;
padding: 1em; } 48

@MoOx 49 /* BAM */ #sidebar ul li a {
color: blue; display: block; padding: 1em; }

@MoOx Une interface utilisateur se découpe en composants 50

@MoOx Pourquoi de pas coder ainsi ? 51

@MoOx 52 /* BAM */ #sidebar ul li a {
color: blue; display: block; padding: 1em; }

@MoOx 53 /* BEM */ .Component-link { color: blue; display:
block; padding: 1em; }

@MoOx BEM 54 http://putaindecode.io/fr/articles/css/bem/

@MoOx 55 .Block [-element [--modifier]]

@MoOx 56 .Block { } .Block--modifier { } .Block-element {
} .Block-element--modifier { }

@MoOx Block = Composant 57

@MoOx .Button { } .Button--large { } .Button-icon { }
.Button-icon--small { } BEM / CSS 58

@MoOx <button class="Button Button--large"> <svg class="Button-icon">…</svg> Cliquez-ici ! </button 59
BEM / HTML

@MoOx Les problèmes de CSS 60 - Tous est global
- Scope des styles / Isolation - Conﬂits de spéciﬁcité - Trop de choses imprévisibles - Pas de gestion des dépendances - Supprimer du code inutile

@MoOx YAY ! 61

@MoOx 62

@MoOx My 2 cents un élément HTML = un Block
63 http://philipwalton.com/articles/extending-styles/

@MoOx Avec BEM il nous manque quoi ? 64

@MoOx 66 dev.w3.org/csswg

@MoOx @custom-property (>vars) 67 :root { --lineHeight: 3rem } p
{ margin-bottom: calc(var(--lineHeight) * 2); }

@MoOx @custom-media queries 68 @custom-media --large-viewport (width >= 60rem); @media
(--large-viewport) { /* styles for large viewport */ }

@MoOx 69 body { background: gray(255, .4) linear-gradient( color(rebeccapurple alpha(50%)),
hwb(0, 20%, 40%), color(hwb(0, 20%, 40%, .5) lightness(+10%)), color(#9d9c tint(40%)) ) } color()

@MoOx 70 Et plein d’autres trucs • Nouveaux sélecteurs •
Nouvelles fonctions • Même le nesting • …

@MoOx Sucre syntaxique 71

@MoOx Myth Polyﬁll CSS 72

@MoOx Myth basé sur Rework 73

@MoOx Evolution des pré-processeurs CSS 75 0 17,5 35 52,5
70 2010 2011 2012 2013 2014 2015 2016

@MoOx 76

@MoOx Evolution des pré-processeurs CSS 77 0 17,5 35 52,5
70 2010 2011 2012 2013 2014 2015 2016

@MoOx @tj (Stylus) créé Rework 79

@MoOx CSS > AST 80

@MoOx AST = Objet manipulable 81 Abstract Syntax Tree

@MoOx CSS > AST > CSS 82

@MoOx Autopreﬁxer 83

@MoOx Evolution de Rework 84 0 15 30 45 60
2010 2011 2012 2013 2014 2015 2016

@MoOx 85

@MoOx Autopreﬁxer pas content 86

@MoOx 87 Autopreﬁxer fork Rework

@MoOx PostCSS 88 https://ai.github.io/about-postcss/en/

@MoOx ✅ CSS > AST > CSS 89

@MoOx @import postcss from "postcss" postcss([ plugin1, plugin2 ]) .process(css)
.then((result) => console.log(result.css)) Utilisation de PostCSS 90

@MoOx Plugin PostCSS 91 function (css) { css.walkDecls((decl) => {
decl.value = decl.value .replace( /\d+rem/, (rem) => 16 * parseFloat(rem) + ‘px' ) }) }) }

@MoOx Un écosystème digne de Grunt 92

@MoOx Un écosystème digne de Grunt 93

@MoOx 94

@MoOx 95

@MoOx 96 :root { --mainColor: #ffbbaaff; } @custom-media --small (width
<= 30rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; .post-article :--heading { color: color( var(--mainColor) blackness(+20%) ); } @media (--small) { .post-article :--heading { margin-top: 0; } }

@MoOx 97 postcss- :root { --mainColor: #ffbbaaff; } @custom-media --small
(width <= 30rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; .post-article :--heading { color: color( var(--mainColor) blackness(+20%) ); } @media (--small) { .post-article :--heading { margin-top: 0; } }

@MoOx 98 postcss- :root { --mainColor: #ffbbaaff; } @custom-media --small
(width <= 30rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; .post-article :--heading { color: color( var(--mainColor) blackness(+20%) ); } @media (--small) { .post-article :--heading { margin-top: 0; } }

@MoOx 100 @define-mixin social-icon $network $color { &.is-$network { background:
$color; } } .social-icon { @mixin social-icon twitter #55acee; @mixin social-icon facebook #3b5998; padding: 10px 5px; @media (max-width: 640px) { padding: 0; } } Sass like with PostCSS

@MoOx 102 @define-mixin social-icon $network $color { &.is-$network { background:
$color; } } .social-icon { @mixin social-icon twitter #55acee; @mixin social-icon facebook #3b5998; padding: 10px 5px; @media (max-width: 640px) { padding: 0; } } PreCSS

@MoOx Gestions des assets 104

@MoOx http://putaindecode.io/fr/articles/js/grunt/ http://putaindecode.io/fr/articles/js/gulp/ Grunt, Gulp… 105 http://putaindecode.io/fr/articles/js/webpack/

@MoOx C’est la fête aux “task runners” 106

@MoOx 107 – Every body using a task runner “Let’s
make another task for that”

@MoOx grunt-mysql-dump 112

@MoOx grunt-mysql-dump 113

@MoOx Gulp 114 plus dans l’esprit Unix

@MoOx 115 | |

@MoOx ES6 116 JavaScript évolue

@MoOx ES6 117 ES2015

@MoOx 6to5 > babel 118

@MoOx 6to5 > babel > babel-* 121

@MoOx 122

@MoOx 123 ▶︎

@MoOx Transpileurs entrée > tambouille > sortie 124

@MoOx Transpileurs entrée > tambouille > sortie 125 CSS CSS
JS JS MD HTML

@MoOx Comment utilise-t-on ça au quotidien ? 126

@MoOx Grunt ? Gulp ? 127

@MoOx .Component { background: url(../../…) } 128

@MoOx 129 ../.. ? ../ ? ./ ? .Component {
background: url(../../…) }

@MoOx Grunt ? Gulp ? 131 … NOPE

@MoOx 132

@MoOx 133 $ npm i -D webpack http://putaindecode.io/fr/articles/js/webpack/

@MoOx var myModule = require("./my-module.js") var myStyles = require("./my-module.css") var
mySVG = require(“./my-module.svg") @import “./normalize.css”; body { background: url(landscape.jpg) } 134 @MoOx Webpack

@MoOx 135

@MoOx Bundle via des “loaders” 136

@MoOx http://putaindecode.io/fr/articles/ js/webpack/premier-exemple/ 137 https://duckduckgo.com/? q=webpack+boilerplate

@MoOx Apps, site web… Même combat… 138 http://putaindecode.io/fr/articles/wordpress/webpack/

@MoOx var myModule = require("./my-module.js") var myStyles = require("./my-module.css") var
mySVG = require(“./my-module.svg") @import “./normalize.css”; body { background: url(landscape.jpg) } 140

@MoOx 141 var myModule = require("./my-module.js") var myStyles = require("./my-module.css")
var mySVG = require(“./my-module.svg") @import “./normalize.css”; body { background: url(landscape.jpg) }

@MoOx 142 var myModule = require("./my-module.js") var myStyles = require("./my-module.css")
var mySVG = require(“./my-module.svg") @import “./normalize.css”; body { background: url(landscape.jpg) }

@MoOx var myStyles ? WTF ? 143

@MoOx 144

@MoOx 145 https://github.com/css-modules/css-modules

@MoOx .org-Block-element { } 146

@MoOx .org-Block-element { } 147

@MoOx var styles = require(“./styles.css”) // { element: "element_f34f7fa0" }
// … <div className={ styles.element }> // <div class="element_f34f7fa0"> 148 http://glenmaddern.com/slides/modular-style#44

@MoOx Finalement on fait de simple objet de styles ?
149

@MoOx Pourquoi pas des STYLES INLINE ?! 150

@MoOx Exemple react-native-web 151 https://github.com/necolas/react-native-web

@MoOx Exemple react-native-web 152 https://github.com/necolas/react-native-web By @necolas auteur de Normalize.css

@MoOx import React, { Image, StyleSheet, Text, View } from
'react-native-web' const Title = ({ children }) => <Text style={styles.title}>{children}</Text> const Summary = ({ children }) => ( <View style={styles.text}> <Text style={styles.subtitle}>{children}</Text> </View> ) class App extends React.Component { render() { return ( <View style={styles.row}> <Image source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }} style={styles.image} /> <Title>React Native Web</Title> <Summary>Build high quality web apps using React</Summary> </View> ) }, }) 153

@MoOx const styles = StyleSheet.create({ row: { flexDirection: 'row', margin:
40 }, image: { height: 40, marginRight: 10, width: 40, }, text: { flex: 1, justifyContent: 'center' }, title: { fontSize: '1.25rem', fontWeight: 'bold' }, subtitle: { 154

@MoOx CSS Modules 155 Inline styles autopreﬁxer media queries (server-side
rendering) utilisation (react-)native extensibilité ultra-facile

@MoOx Faites votre choix selon vos besoins ! 156

@MoOx Des questions ? 157 N’hésitez pas, je suis là
pour ça

[FR] Post CSS era: Des feuilles de styles prépr...

[FR] Post CSS era: Des feuilles de styles préprocessés aux CSS Modules

More Decks by Maxime Thirouin

Other Decks in Technology

Featured

Transcript