Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@MoOx 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@MoOx 5

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

@MoOx Écrire du CSS en 2010 ? 7

Slide 8

Slide 8 text

@MoOx 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@MoOx Pas de variables / constantes 10

Slide 11

Slide 11 text

@MoOx Pas (vraiment) de fonctions 11

Slide 12

Slide 12 text

@MoOx Ré-utilisabilité difficile ? 12

Slide 13

Slide 13 text

@MoOx @import 13

Slide 14

Slide 14 text

@MoOx HTTP 1 14

Slide 15

Slide 15 text

@MoOx HTTP 1 15 … NOPE

Slide 16

Slide 16 text

@MoOx héritage, composition 16

Slide 17

Slide 17 text

@MoOx héritage, composition 17 … NOPE

Slide 18

Slide 18 text

@MoOx PRÉ-PROCESSEURS CSS 18

Slide 19

Slide 19 text

@MoOx 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@MoOx 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@MoOx @extends 25

Slide 26

Slide 26 text

@MoOx 26

Slide 27

Slide 27 text

@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/

Slide 28

Slide 28 text

@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; }

Slide 29

Slide 29 text

@MoOx & nesting ? 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

@MoOx 33 Problem Exists Between Keyboard And Chair

Slide 34

Slide 34 text

@MoOx Frameworks ? 34

Slide 35

Slide 35 text

@MoOx selector = global (class) name 35

Slide 36

Slide 36 text

@MoOx selector = global (class) name 36

Slide 37

Slide 37 text

@MoOx scoping 37

Slide 38

Slide 38 text

@MoOx scoping 38 … NOPE

Slide 39

Slide 39 text

@MoOx dependency management 39

Slide 40

Slide 40 text

@MoOx dependency management 40 … NOPE

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

@MoOx 43

Slide 44

Slide 44 text

@MoOx 44 STYLING

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

@MoOx Pourquoi de pas coder ainsi ? 51

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

@MoOx Block = Composant 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

@MoOx … Cliquez-ici !

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

@MoOx YAY ! 61

Slide 62

Slide 62 text

@MoOx 62

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

@MoOx Avec BEM il nous manque quoi ? 64

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

@MoOx 66 dev.w3.org/csswg

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

@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()

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

@MoOx Sucre syntaxique 71

Slide 72

Slide 72 text

@MoOx Myth Polyfill CSS 72

Slide 73

Slide 73 text

@MoOx Myth basé sur Rework 73

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

@MoOx 76

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

@MoOx CSS > AST 80

Slide 81

Slide 81 text

@MoOx AST = Objet manipulable 81 Abstract Syntax Tree

Slide 82

Slide 82 text

@MoOx CSS > AST > CSS 82

Slide 83

Slide 83 text

@MoOx Autoprefixer 83

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

@MoOx 85

Slide 86

Slide 86 text

@MoOx Autoprefixer pas content 86

Slide 87

Slide 87 text

@MoOx 87 Autoprefixer fork Rework

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

@MoOx ✅ CSS > AST > CSS 89

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

@MoOx Un écosystème digne de Grunt 92

Slide 93

Slide 93 text

@MoOx Un écosystème digne de Grunt 93

Slide 94

Slide 94 text

@MoOx 94

Slide 95

Slide 95 text

@MoOx 95

Slide 96

Slide 96 text

@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; } }

Slide 97

Slide 97 text

@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; } }

Slide 98

Slide 98 text

@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; } }

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

@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

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

@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

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

@MoOx Gestions des assets 104

Slide 105

Slide 105 text

@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/

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

@MoOx grunt-mysql-dump 112

Slide 113

Slide 113 text

@MoOx grunt-mysql-dump 113

Slide 114

Slide 114 text

@MoOx Gulp 114 plus dans l’esprit Unix

Slide 115

Slide 115 text

@MoOx 115 | |

Slide 116

Slide 116 text

@MoOx ES6 116 JavaScript évolue

Slide 117

Slide 117 text

@MoOx ES6 117 ES2015

Slide 118

Slide 118 text

@MoOx 6to5 > babel 118

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

@MoOx 6to5 > babel > babel-* 121

Slide 122

Slide 122 text

@MoOx 122

Slide 123

Slide 123 text

@MoOx 123 ▶︎

Slide 124

Slide 124 text

@MoOx Transpileurs entrée > tambouille > sortie 124

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

@MoOx Grunt ? Gulp ? 127

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

@MoOx

Slide 131

Slide 131 text

@MoOx Grunt ? Gulp ? 131 … NOPE

Slide 132

Slide 132 text

@MoOx 132

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

@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

Slide 135

Slide 135 text

@MoOx 135

Slide 136

Slide 136 text

@MoOx Bundle via des “loaders” 136

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

@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

Slide 141

Slide 141 text

@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) }

Slide 142

Slide 142 text

@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) }

Slide 143

Slide 143 text

@MoOx var myStyles ? WTF ? 143

Slide 144

Slide 144 text

@MoOx 144

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

@MoOx .org-Block-element { } 146

Slide 147

Slide 147 text

@MoOx .org-Block-element { } 147

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

@MoOx Pourquoi pas des STYLES INLINE ?! 150

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

@MoOx import React, { Image, StyleSheet, Text, View } from 'react-native-web' const Title = ({ children }) => {children} const Summary = ({ children }) => ( {children} ) class App extends React.Component { render() { return ( React Native Web Build high quality web apps using React ) }, }) 153

Slide 154

Slide 154 text

@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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

@MoOx Faites votre choix selon vos besoins ! 156

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

No content