Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Maxime Thirouin

May 25, 2016
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. @MoOx
    3

    View Slide

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

    View Slide

  5. @MoOx
    5

    View Slide

  6. View Slide

  7. @MoOx
    Writing CSS
    in 2005~2010
    7

    View Slide

  8. @MoOx
    ?
    8

    View Slide

  9. @MoOx
    9

    View Slide

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

    View Slide

  11. @MoOx
    No var/const
    11

    View Slide

  12. @MoOx
    No (real) functions
    12

    View Slide

  13. @MoOx
    Reusability?
    13

    View Slide

  14. @MoOx
    @import
    14

    View Slide

  15. @MoOx
    HTTP 1
    15

    View Slide

  16. @MoOx
    HTTP 1
    16
    … NOPE

    View Slide

  17. @MoOx
    inheritance, composition
    17

    View Slide

  18. @MoOx
    18
    … NOPE
    inheritance, composition

    View Slide

  19. @MoOx
    CSS PREPROCESSORS
    19

    View Slide

  20. @MoOx
    20

    View Slide

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




    View Slide

  22. @MoOx
    22

    View Slide

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

    View Slide

  24. @MoOx
    24

    View Slide

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

    View Slide

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

    View Slide

  27. @MoOx
    @extends
    27

    View Slide

  28. @MoOx
    28

    View Slide

  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/

    View Slide

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

    View Slide

  31. @MoOx
    & nesting ?
    31

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. @MoOx
    35
    Problem Exists Between Keyboard And Chair

    View Slide

  36. @MoOx
    Frameworks ?
    36

    View Slide

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

    View Slide

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

    View Slide

  39. @MoOx
    Scoping ?
    39

    View Slide

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

    View Slide

  41. @MoOx
    Scoping ?
    41
    … Not yet…

    View Slide

  42. @MoOx
    Dependency management
    42

    View Slide

  43. @MoOx
    Dependency management
    43
    … NOPE

    View Slide

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

    View Slide

  45. View Slide

  46. @MoOx
    46

    View Slide

  47. @MoOx
    47
    STYLING

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. @MoOx
    Block = Component
    60

    View Slide

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

    View Slide

  62. @MoOx


    Click here!
    62
    BEM / HTML

    View Slide

  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

    View Slide

  64. @MoOx
    YAY !
    64
    … sort of…

    View Slide

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

    View Slide

  66. MEANWHILE…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. @MoOx
    Syntax sugar
    72

    View Slide

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

    View Slide

  74. @MoOx
    Myth
    use Rework
    74

    View Slide

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

    View Slide

  76. @MoOx
    CSS > AST
    76

    View Slide

  77. @MoOx
    AST = Object
    77
    Abstract Syntax Tree

    View Slide

  78. @MoOx
    CSS > AST > CSS

    78

    View Slide

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

    View Slide

  80. @MoOx
    But…
    80

    View Slide

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

    View Slide

  82. @MoOx
    82

    View Slide

  83. @MoOx
    Autoprefixer is not happy
    83

    View Slide

  84. @MoOx
    84
    Autoprefixer forked Rework

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. @MoOx
    But
    88
    PostCSS + plugins = ALL THOSE THINGS

    View Slide

  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

    View Slide

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

    View Slide

  91. @MoOx
    An ecosystem
    like Grunt
    91

    View Slide

  92. @MoOx
    An ecosystem
    like Grunt
    92

    View Slide

  93. @MoOx
    93

    View Slide

  94. @MoOx
    94

    View Slide

  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/

    View Slide

  96. MEANWHILE…

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  100. @MoOx
    100

    View Slide

  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

    View Slide

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

    View Slide

  103. MEANWHILE…

    View Slide

  104. @MoOx
    Assets managements
    104

    View Slide

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

    View Slide

  106. @MoOx
    106

    View Slide

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

    View Slide

  108. @MoOx
    grunt-mysql-dump
    108

    View Slide

  109. @MoOx
    Gulp
    109
    Unix spirit

    View Slide

  110. MEANWHILE… IN JAVASCRIPT

    View Slide

  111. @MoOx
    ES6
    111
    JavaScript is evolving too

    View Slide

  112. @MoOx
    ES6
    112
    ES2015

    View Slide

  113. View Slide

  114. View Slide

  115. @MoOx
    6to5 > babel > babel-*
    115

    View Slide

  116. @MoOx
    116

    View Slide

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

    View Slide

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

    View Slide

  119. @MoOx
    How should I use this?
    119

    View Slide

  120. @MoOx
    Grunt ? Gulp ?
    120

    View Slide

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

    View Slide

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

    View Slide

  123. @MoOx

    View Slide

  124. @MoOx
    Grunt ? Gulp ?
    124
    … NOPE

    View Slide

  125. @MoOx
    125

    View Slide

  126. @MoOx
    126
    $ npm i -D webpack

    View Slide

  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

    View Slide

  128. @MoOx
    Errors?
    128

    View Slide

  129. @MoOx
    129

    View Slide

  130. @MoOx
    Create Bundle using “loaders”
    130

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  134. MEANWHILE…

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  138. @MoOx
    var myStyles ?
    WTF ?
    138

    View Slide

  139. @MoOx
    139

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  143. @MoOx
    var styles = require(“./styles.css”)
    // { element: "element_f34f7fa0" }
    // …

    //
    143 http://glenmaddern.com/slides/modular-style#44

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  150. @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 (

    source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
    style={styles.image}
    />
    React Native Web
    Build high quality web apps using React

    )
    },
    })
    150

    View Slide

  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

    View Slide

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

    View Slide

  153. @MoOx
    Let’s recap
    153

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  158. @MoOx
    Questions ?
    158
    I don’t bite.

    View Slide