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

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