Post CSS era: From preprocessed stylesheets to CSS Modules and inline styles

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

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

@MoOx 3

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

@MoOx 5

@MoOx Writing CSS in 2005~2010 7

@MoOx ? 8

@MoOx 9

@MoOx Why CSS wasn’t fun? 10

@MoOx No var/const 11

@MoOx No (real) functions 12

@MoOx Reusability? 13

@MoOx @import 14

@MoOx HTTP 1 15

@MoOx HTTP 1 16 … NOPE

@MoOx inheritance, composition 17

@MoOx 18 … NOPE inheritance, composition

@MoOx CSS PREPROCESSORS 19

@MoOx 20

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

@MoOx 22

@MoOx CSS PREPROCESSORS 23 Is there any issues ?

@MoOx 24

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

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

@MoOx @extends 27

@MoOx 28

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

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

@MoOx & nesting ? 31

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

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

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

@MoOx 35 Problem Exists Between Keyboard And Chair

@MoOx Frameworks ? 36

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

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

@MoOx Scoping ? 39

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

@MoOx Scoping ? 41 … Not yet…

@MoOx Dependency management 42

@MoOx Dependency management 43 … NOPE

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

@MoOx 46

@MoOx 47 STYLING

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

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

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

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

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

@MoOx A user interface is just a bunch of components
53

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

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

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

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

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

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

@MoOx Block = Component 60

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

@MoOx <button class="Button Button--large"> <svg class="Button-icon">…</svg> Click here! </button 62
BEM / HTML

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

@MoOx YAY ! 64 … sort of…

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

MEANWHILE…

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

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

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

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

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

@MoOx Syntax sugar 72

@MoOx Myth “CSS Polyﬁll” (sort of) 73

@MoOx Myth use Rework 74

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

@MoOx CSS > AST 76

@MoOx AST = Object 77 Abstract Syntax Tree

@MoOx CSS > AST > CSS 78

@MoOx Autopreﬁxer 79 Bye bye -webkit, -moz, -ms…

@MoOx But… 80

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

@MoOx 82

@MoOx Autopreﬁxer is not happy 83

@MoOx 84 Autopreﬁxer forked Rework

@MoOx 85 http://postcss.org/

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

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

@MoOx But 88 PostCSS + plugins = ALL THOSE THINGS

@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

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

@MoOx An ecosystem like Grunt 91

@MoOx An ecosystem like Grunt 92

@MoOx 93

@MoOx 94

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

MEANWHILE…

@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

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

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

@MoOx 100

@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

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

MEANWHILE…

@MoOx Assets managements 104

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

@MoOx 106

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

@MoOx grunt-mysql-dump 108

@MoOx Gulp 109 Unix spirit

MEANWHILE… IN JAVASCRIPT

@MoOx ES6 111 JavaScript is evolving too

@MoOx ES6 112 ES2015

@MoOx 6to5 > babel > babel-* 115

@MoOx 116

@MoOx Compilers input > your thing > output 117

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

@MoOx How should I use this? 119

@MoOx Grunt ? Gulp ? 120

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

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

@MoOx Grunt ? Gulp ? 124 … NOPE

@MoOx 125

@MoOx 126 $ npm i -D 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) } 127 Webpack

@MoOx Errors? 128

@MoOx 129

@MoOx Create Bundle using “loaders” 130

@MoOx Compilers input > your thing > output 131

@MoOx Webpack JS > your thing > BUNDLE 132

@MoOx Apps and website, same battle… 133

MEANWHILE…

@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

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

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

@MoOx var myStyles ? WTF ? 138

@MoOx 139

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

@MoOx .org-Block-element { } 141

@MoOx .org-Block-element { } 142

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

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

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

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

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

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

@MoOx Example react-native-web 149 https://github.com/necolas/react-native-web By @necolas creator of 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> ) }, }) 150

@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

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

@MoOx Let’s recap 153

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

@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… ;)

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

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

@MoOx Questions ? 158 I don’t bite.

Post CSS era: From preprocessed stylesheets to ...

Post CSS era: From preprocessed stylesheets to CSS Modules and inline styles

More Decks by Maxime Thirouin

Other Decks in Technology

Featured

Transcript