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

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

While the JavaScript community advocates inlines styles, monolithic CSS pre-processors become old fashioned.
Today we have multiples modern way to style your websites and web apps.
PostCSS, a scalable and modular tool, can help us to facilitate our daily CSS developments.
This tool allows your to easily parse and transform CSS base on JavaScript plugins.
Its ecosystem can help you to lint your code and to write future proof CSS (using cssnext).
But what about inline styles? Are they a good idea? What's the downside of this method?
Can we mix both methods? Should we use this today?

VIDEO AVAILABLE HERE https://vimeo.com/168522852

2f6c2dcd4ba8fc44f1e7f0b2ed3d587d?s=128

Maxime Thirouin

May 25, 2016
Tweet

Transcript

  1. @MoOx Post CSS era 1 From preprocessed stylesheets to CSS

    Modules and inline styles @MoOx
  2. @MoOx @MoOx Front-End/UI Developer Freelance https://moox.io/ 2

  3. @MoOx 3

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

  5. @MoOx 5

  6. None
  7. @MoOx Writing CSS in 2005~2010 7

  8. @MoOx ? 8

  9. @MoOx 9

  10. @MoOx Why CSS wasn’t fun? 10

  11. @MoOx No var/const 11

  12. @MoOx No (real) functions 12

  13. @MoOx Reusability? 13

  14. @MoOx @import 14

  15. @MoOx HTTP 1 15

  16. @MoOx HTTP 1 16 … NOPE

  17. @MoOx inheritance, composition 17

  18. @MoOx 18 … NOPE inheritance, composition

  19. @MoOx CSS PREPROCESSORS 19

  20. @MoOx 20

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

  22. @MoOx 22

  23. @MoOx CSS PREPROCESSORS 23 Is there any issues ?

  24. @MoOx 24

  25. @MoOx @mixins ? 25 @mixin block() { border: 1px solid

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

    #000; background: url(whatever.jpg) } .class { @include block(); background: red; } /* BAM */
  27. @MoOx @extends 27

  28. @MoOx 28

  29. @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/
  30. @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; }
  31. @MoOx & nesting ? 31

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

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

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

    } .sidebar-link { try: again; }
  35. @MoOx 35 Problem Exists Between Keyboard And Chair

  36. @MoOx Frameworks ? 36

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

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

  39. @MoOx Scoping ? 39

  40. @MoOx Scoping ? 40 Web Component / Shadow DOM? CSS

    scope? http://caniuse.com/#feat=shadowdom http://caniuse.com/#feat=style-scoped
  41. @MoOx Scoping ? 41 … Not yet…

  42. @MoOx Dependency management 42

  43. @MoOx Dependency management 43 … NOPE

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

    problems 44
  45. None
  46. @MoOx 46

  47. @MoOx 47 STYLING

  48. @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
  49. @MoOx What is the origin of most CSS issues ?

    49
  50. @MoOx 50 #sidebar ul li a { color: blue; display:

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

    padding: 1em; } 51
  52. @MoOx 52 /* BAM */ #sidebar ul li a {

    color: blue; display: block; padding: 1em; }
  53. @MoOx A user interface is just a bunch of components

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

  55. @MoOx 55 /* BAM */ #sidebar ul li a {

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

    block; padding: 1em; }
  57. @MoOx BEM 57 http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem

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

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

    } .Block-element--modifier { }
  60. @MoOx Block = Component 60

  61. @MoOx .Button { } .Button--large { } .Button-icon { }

    .Button-icon--small { } BEM / CSS 61
  62. @MoOx <button class="Button Button--large"> <svg class="Button-icon">…</svg> Click here! </button 62

    BEM / HTML
  63. @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
  64. @MoOx YAY ! 64 … sort of…

  65. @MoOx My 2 cents one DOM element = one Block

    65 http://philipwalton.com/articles/extending-styles/
  66. MEANWHILE…

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

  68. @MoOx @custom-properties (>vars) 68 :root { --lineHeight: 3rem } p

    { margin-bottom: calc(var(--lineHeight) * 2); }
  69. @MoOx @custom-media queries 69 @custom-media --large-viewport (width >= 60rem); @media

    (--large-viewport) { /* styles for large viewport */ }
  70. @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()
  71. @MoOx 71 There is a lot of new stuff •

    New selectors • New (color) functions • Nesting and extends are coming • … http://cssnext.io/features/
  72. @MoOx Syntax sugar 72

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

  74. @MoOx Myth use Rework 74

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

  76. @MoOx CSS > AST 76

  77. @MoOx AST = Object 77 Abstract Syntax Tree

  78. @MoOx CSS > AST > CSS 78

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

  80. @MoOx But… 80

  81. @MoOx Rework Evolution 81 0 15 30 45 60 2010

    2011 2012 2013 2014 2015 2016
  82. @MoOx 82

  83. @MoOx Autoprefixer is not happy 83

  84. @MoOx 84 Autoprefixer forked Rework

  85. @MoOx 85 http://postcss.org/

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

    API
  87. @MoOx PostCSS is NOT 87 - a Preprocessor - “Future

    Syntax” - an optimizer - a linter
  88. @MoOx But 88 PostCSS + plugins = ALL THOSE THINGS

  89. @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
  90. @MoOx PostCSS Plugin 90 function (css) { css.walkDecls((decl) => {

    decl.value = decl.value .replace( /\d+rem/, (rem) => 16 * parseFloat(rem) + ‘px' ) }) }) }
  91. @MoOx An ecosystem like Grunt 91

  92. @MoOx An ecosystem like Grunt 92

  93. @MoOx 93

  94. @MoOx 94

  95. @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/
  96. MEANWHILE…

  97. @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
  98. @MoOx 98 stylelint Modern CSS linter based on PostCSS Already

    100 rules + extensible http://stylelint.io/
  99. @MoOx Evolution of CSS preprocessors 99 0 17,5 35 52,5

    70 2010 2011 2012 2013 2014 2015 2016
  100. @MoOx 100

  101. @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
  102. @MoOx Evolution of CSS preprocessors 102 0 17,5 35 52,5

    70 2010 2011 2012 2013 2014 2015 2016
  103. MEANWHILE…

  104. @MoOx Assets managements 104

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

    Jul 2013
  106. @MoOx 106

  107. @MoOx 107 – Every body using a task runner “Let’s

    make another task for that”
  108. @MoOx grunt-mysql-dump 108

  109. @MoOx Gulp 109 Unix spirit

  110. MEANWHILE… IN JAVASCRIPT

  111. @MoOx ES6 111 JavaScript is evolving too

  112. @MoOx ES6 112 ES2015

  113. None
  114. None
  115. @MoOx 6to5 > babel > babel-* 115

  116. @MoOx 116

  117. @MoOx Compilers input > your thing > output 117

  118. @MoOx Compilers input > your thing > output 118 CSS

    CSS JS JS MD HTML
  119. @MoOx How should I use this? 119

  120. @MoOx Grunt ? Gulp ? 120

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

  122. @MoOx 122 ../.. ? ../ ? ./ ? .Component {

    background: url(../../…) }
  123. @MoOx

  124. @MoOx Grunt ? Gulp ? 124 … NOPE

  125. @MoOx 125

  126. @MoOx 126 $ npm i -D webpack

  127. @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
  128. @MoOx Errors? 128

  129. @MoOx 129

  130. @MoOx Create Bundle using “loaders” 130

  131. @MoOx Compilers input > your thing > output 131

  132. @MoOx Webpack JS > your thing > BUNDLE 132

  133. @MoOx Apps and website, same battle… 133

  134. MEANWHILE…

  135. @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
  136. @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) }
  137. @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) }
  138. @MoOx var myStyles ? WTF ? 138

  139. @MoOx 139

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

  141. @MoOx .org-Block-element { } 141

  142. @MoOx .org-Block-element { } 142

  143. @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
  144. @MoOx So now we just code simple objects with styles

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

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

  147. @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
  148. @MoOx Example react-native-web 148 https://github.com/necolas/react-native-web

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

  150. @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
  151. @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
  152. @MoOx Inlines styles can be use to write react-native apps

    152 https://github.com/facebook/css-layout
  153. @MoOx Let’s recap 153

  154. @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
  155. @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… ;)
  156. @MoOx You can even switch or mix 156 react-native-css CSS

    ➡ JS jss JS ➡ CSS and many more on github / npm
  157. @MoOx Adjust your choices depending on your needs and your

    current stack 157
  158. @MoOx Questions ? 158 I don’t bite.