Tweet
Tweet

Slide 1

Slide 1 text

@MoOx Post CSS era 1 From preprocessed stylesheets to CSS Modules and inline styles @MoOx

Slide 2

Slide 2 text

@MoOx @MoOx Front-End/UI Developer Freelance https://moox.io/ 2

Slide 3

Slide 3 text

@MoOx 3

Slide 4

Slide 4 text

@MoOx 4 Putain de code ! github.com/MoOx

Slide 5

Slide 5 text

@MoOx 5

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

@MoOx Writing CSS in 2005~2010 7

Slide 8

Slide 8 text

@MoOx ? 8

Slide 9

Slide 9 text

@MoOx 9

Slide 10

Slide 10 text

@MoOx Why CSS wasn’t fun? 10

Slide 11

Slide 11 text

@MoOx No var/const 11

Slide 12

Slide 12 text

@MoOx No (real) functions 12

Slide 13

Slide 13 text

@MoOx Reusability? 13

Slide 14

Slide 14 text

@MoOx @import 14

Slide 15

Slide 15 text

@MoOx HTTP 1 15

Slide 16

Slide 16 text

@MoOx HTTP 1 16 … NOPE

Slide 17

Slide 17 text

@MoOx inheritance, composition 17

Slide 18

Slide 18 text

@MoOx 18 … NOPE inheritance, composition

Slide 19

Slide 19 text

@MoOx CSS PREPROCESSORS 19

Slide 20

Slide 20 text

@MoOx 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@MoOx 22

Slide 23

Slide 23 text

@MoOx CSS PREPROCESSORS 23 Is there any issues ?

Slide 24

Slide 24 text

@MoOx 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

@MoOx @extends 27

Slide 28

Slide 28 text

@MoOx 28

Slide 29

Slide 29 text

@MoOx 29 .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 30

Slide 30 text

@MoOx 30 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 31

Slide 31 text

@MoOx & nesting ? 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@MoOx 35 Problem Exists Between Keyboard And Chair

Slide 36

Slide 36 text

@MoOx Frameworks ? 36

Slide 37

Slide 37 text

@MoOx selector = global (class || *) name 37

Slide 38

Slide 38 text

@MoOx selector = global (class || *) name 38

Slide 39

Slide 39 text

@MoOx Scoping ? 39

Slide 40

Slide 40 text

@MoOx Scoping ? 40 Web Component / Shadow DOM? CSS scope? http://caniuse.com/#feat=shadowdom http://caniuse.com/#feat=style-scoped

Slide 41

Slide 41 text

@MoOx Scoping ? 41 … Not yet…

Slide 42

Slide 42 text

@MoOx Dependency management 42

Slide 43

Slide 43 text

@MoOx Dependency management 43 … NOPE

Slide 44

Slide 44 text

@MoOx CSS itself or preprocessors do not solve our daily problems 44

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

@MoOx 46

Slide 47

Slide 47 text

@MoOx 47 STYLING

Slide 48

Slide 48 text

@MoOx Why CSS sucks? 48 https://speakerdeck.com/vjeux/react-css-in-js?slide=2 - Everything is global - Order / Specificity conflicts - Too many unpredictable things - Deleting some code is touchy - Scope / Isolation - No dependency management

Slide 49

Slide 49 text

@MoOx What is the origin of most CSS issues ? 49

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

@MoOx #sidebar ul li a { color: blue; display: block; padding: 1em; } 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 A user interface is just a bunch of components 53

Slide 54

Slide 54 text

@MoOx What don’t we code our UI this way? 54

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

@MoOx BEM 57 http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

@MoOx Block = Component 60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

@MoOx … Click here!

Slide 63

Slide 63 text

@MoOx Why CSS sucks? 63 - Everything is global - Order / Specificity conflicts - Too many unpredictable things - Deleting some code is touchy - Scope / Isolation - No dependency management https://speakerdeck.com/vjeux/react-css-in-js?slide=2

Slide 64

Slide 64 text

@MoOx YAY ! 64 … sort of…

Slide 65

Slide 65 text

@MoOx My 2 cents one DOM element = one Block 65 http://philipwalton.com/articles/extending-styles/

Slide 66

Slide 66 text

MEANWHILE…

Slide 67

Slide 67 text

@MoOx 67 dev.w3.org/csswg http://dev.w3.org/csswg

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

@MoOx 70 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%) saturation(- 5%)) ) ; } color()

Slide 71

Slide 71 text

@MoOx 71 There is a lot of new stuff • New selectors • New (color) functions • Nesting and extends are coming • … http://cssnext.io/features/

Slide 72

Slide 72 text

@MoOx Syntax sugar 72

Slide 73

Slide 73 text

@MoOx Myth “CSS Polyfill” (sort of) 73

Slide 74

Slide 74 text

@MoOx Myth use Rework 74

Slide 75

Slide 75 text

@MoOx @tj (Stylus) create Rework 75 http://first-commit.com/reworkcss/rework > Sep 2012

Slide 76

Slide 76 text

@MoOx CSS > AST 76

Slide 77

Slide 77 text

@MoOx AST = Object 77 Abstract Syntax Tree

Slide 78

Slide 78 text

@MoOx CSS > AST > CSS 78

Slide 79

Slide 79 text

@MoOx Autoprefixer 79 Bye bye -webkit, -moz, -ms…

Slide 80

Slide 80 text

@MoOx But… 80

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

@MoOx 82

Slide 83

Slide 83 text

@MoOx Autoprefixer is not happy 83

Slide 84

Slide 84 text

@MoOx 84 Autoprefixer forked Rework

Slide 85

Slide 85 text

@MoOx 85 http://postcss.org/

Slide 86

Slide 86 text

@MoOx ✅ CSS > AST > CSS 86 + nice API

Slide 87

Slide 87 text

@MoOx PostCSS is NOT 87 - a Preprocessor - “Future Syntax” - an optimizer - a linter

Slide 88

Slide 88 text

@MoOx But 88 PostCSS + plugins = ALL THOSE THINGS

Slide 89

Slide 89 text

@MoOx @import postcss from “postcss" @import plugin1 from “postcss-plugin1" @import plugin2 from “postcss-plugin2" postcss([ plugin1, plugin2 ]) .process(css) .then((result) => console.log(result.css)) PostCSS usage 89

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

@MoOx An ecosystem like Grunt 91

Slide 92

Slide 92 text

@MoOx An ecosystem like Grunt 92

Slide 93

Slide 93 text

@MoOx 93

Slide 94

Slide 94 text

@MoOx 94

Slide 95

Slide 95 text

@MoOx 95 :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) { margin-top: 0; } } http://cssnext.io/

Slide 96

Slide 96 text

MEANWHILE…

Slide 97

Slide 97 text

@MoOx 97 @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 98

Slide 98 text

@MoOx 98 stylelint Modern CSS linter based on PostCSS Already 100 rules + extensible http://stylelint.io/

Slide 99

Slide 99 text

@MoOx Evolution of CSS preprocessors 99 0 17,5 35 52,5 70 2010 2011 2012 2013 2014 2015 2016

Slide 100

Slide 100 text

@MoOx 100

Slide 101

Slide 101 text

@MoOx “Finished writing my first @PostCSS plugin today. It extracts language specific selectors so you can split them into multiple files.” 101 https://twitter.com/chriseppstein/status/684178711298457601 @chriseppstein, Sass maintainer

Slide 102

Slide 102 text

@MoOx Evolution of CSS preprocessors 102 0 17,5 35 52,5 70 2010 2011 2012 2013 2014 2015 2016

Slide 103

Slide 103 text

MEANWHILE…

Slide 104

Slide 104 text

@MoOx Assets managements 104

Slide 105

Slide 105 text

@MoOx Grunt, Gulp… 105 http://first-commit.com/gruntjs/grunt > Sep 2011 http://first-commit.com/gulpjs/gulp > Jul 2013

Slide 106

Slide 106 text

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

@MoOx grunt-mysql-dump 108

Slide 109

Slide 109 text

@MoOx Gulp 109 Unix spirit

Slide 110

Slide 110 text

MEANWHILE… IN JAVASCRIPT

Slide 111

Slide 111 text

@MoOx ES6 111 JavaScript is evolving too

Slide 112

Slide 112 text

@MoOx ES6 112 ES2015

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

@MoOx 6to5 > babel > babel-* 115

Slide 116

Slide 116 text

@MoOx 116

Slide 117

Slide 117 text

@MoOx Compilers input > your thing > output 117

Slide 118

Slide 118 text

@MoOx Compilers input > your thing > output 118 CSS CSS JS JS MD HTML

Slide 119

Slide 119 text

@MoOx How should I use this? 119

Slide 120

Slide 120 text

@MoOx Grunt ? Gulp ? 120

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

@MoOx

Slide 124

Slide 124 text

@MoOx Grunt ? Gulp ? 124 … NOPE

Slide 125

Slide 125 text

@MoOx 125

Slide 126

Slide 126 text

@MoOx 126 $ npm i -D webpack

Slide 127

Slide 127 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) } 127 Webpack

Slide 128

Slide 128 text

@MoOx Errors? 128

Slide 129

Slide 129 text

@MoOx 129

Slide 130

Slide 130 text

@MoOx Create Bundle using “loaders” 130

Slide 131

Slide 131 text

@MoOx Compilers input > your thing > output 131

Slide 132

Slide 132 text

@MoOx Webpack JS > your thing > BUNDLE 132

Slide 133

Slide 133 text

@MoOx Apps and website, same battle… 133

Slide 134

Slide 134 text

MEANWHILE…

Slide 135

Slide 135 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) } 135

Slide 136

Slide 136 text

@MoOx 136 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 137

Slide 137 text

@MoOx 137 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 138

Slide 138 text

@MoOx var myStyles ? WTF ? 138

Slide 139

Slide 139 text

@MoOx 139

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

@MoOx .org-Block-element { } 141

Slide 142

Slide 142 text

@MoOx .org-Block-element { } 142

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

@MoOx So now we just code simple objects with styles properties? 144

Slide 145

Slide 145 text

@MoOx Yeah, that’s called styling Just what we want. 145

Slide 146

Slide 146 text

@MoOx So why not INLINE STYLES?! 146 https://speakerdeck.com/vjeux/react-css-in-js?slide=25

Slide 147

Slide 147 text

@MoOx Why CSS sucks? 147 - Everything is global - No dependency management - Deleting some code is touchy - Too many unpredictable things - Order / Specificity conflicts - Scope / Isolation https://speakerdeck.com/vjeux/react-css-in-js?slide=37

Slide 148

Slide 148 text

@MoOx Example react-native-web 148 https://github.com/necolas/react-native-web

Slide 149

Slide 149 text

@MoOx Example react-native-web 149 https://github.com/necolas/react-native-web By @necolas creator of Normalize.css

Slide 150

Slide 150 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 ) }, }) 150

Slide 151

Slide 151 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: { 151

Slide 152

Slide 152 text

@MoOx Inlines styles can be use to write react-native apps 152 https://github.com/facebook/css-layout

Slide 153

Slide 153 text

@MoOx Let’s recap 153

Slide 154

Slide 154 text

@MoOx (Post)CSS + plugins + BEM / CSS Modules 154 Inline styles - custom / extensible syntax - autoprefixer / cssnext - media queries + server-side rendering! JS context - ☑ (react-)native - ☑ flexibility

Slide 155

Slide 155 text

@MoOx (Post)CSS + plugins + BEM / CSS Modules 155 Inline styles - Can “solve” most CSS issues. - Can be used today on all projects, gradually. - Can solve all CSS issues. - Pre-rendering (MQs…) : / - Can also be used today… ;)

Slide 156

Slide 156 text

@MoOx You can even switch or mix 156 react-native-css CSS ➡ JS jss JS ➡ CSS and many more on github / npm

Slide 157

Slide 157 text

@MoOx Adjust your choices depending on your needs and your current stack 157

Slide 158

Slide 158 text

@MoOx Questions ? 158 I don’t bite.