[FR] Post CSS era: Des feuilles de styles préprocessés aux CSS Modules

Alors que la communauté JavaScript prône les styles inlines, les pré-processeurs CSS monolithiques prennent un sacré coup de vieux. Heureusement pour les aficionados des CSS, il existe aujourd’hui des outils extensibles et modulaires pour faciliter notre quotidien de développeur. PostCSS, le futur Babel des CSS nous permet d’étendre la syntaxe CSS à de nouveaux usages, que ce soit pour s’éviter du code legacy, propriétaire et pour jouer dès aujourd’hui avec la syntaxe de demain.

---

http://moox.io/
https://github.com/MoOx
http://putaindecode.io/fr/articles/css/preprocesseurs/
http://pressupinc.com/blog/2014/11/dont-overextend-yourself-in-sass/
http://putaindecode.io/fr/articles/css/bem/
http://philipwalton.com/articles/extending-styles/
https://github.com/postcss/postcss
http://cssnext.io/
http://putaindecode.io/fr/articles/js/grunt/
http://putaindecode.io/fr/articles/js/gulp/
http://putaindecode.io/fr/articles/js/webpack/
http://babeljs.io/
http://mdast.js.org/
http://putaindecode.io/fr/articles/js/webpack/premier-exemple/
http://putaindecode.io/fr/articles/wordpress/webpack/
https://github.com/css-modules/css-modules
http://glenmaddern.com/slides/modular-style#44
https://github.com/necolas/react-native-web
https://github.com/facebook/css-layout

Transcript

1. @MoOx
   Post CSS era
   1
   Des feuilles de styles préprocessés
   aux CSS Modules
   @MoOx
   

   View Slide

2. @MoOx
   @MoOx
   Développeur Front-end
   Freelance
   http://moox.io/
   2
   

   View Slide

3. @MoOx
   3
   

   View Slide

4. @MoOx
   4
   {
   Putain de code !
   … github.com/MoOx
   }
   @MoOx
   

   View Slide

5. @MoOx
   5
   

   View Slide

6. View Slide

7. @MoOx
   Écrire du CSS
   en 2010 ?
   7
   

   View Slide

8. @MoOx
   8
   

   View Slide

9. @MoOx
   Pourquoi le CSS c’était
   pas marrant ?
   9
   

   View Slide

10. @MoOx
    Pas de variables / constantes
    10
    

    View Slide

11. @MoOx
    Pas (vraiment) de fonctions
    11
    

    View Slide

12. @MoOx
    Ré-utilisabilité difficile ?
    12
    

    View Slide

13. @MoOx
    @import
    13
    

    View Slide

14. @MoOx
    HTTP 1
    14
    

    View Slide

15. @MoOx
    HTTP 1
    15
    … NOPE
    

    View Slide

16. @MoOx
    héritage, composition
    16
    

    View Slide

17. @MoOx
    héritage, composition
    17
    … NOPE
    

    View Slide

18. @MoOx
    PRÉ-PROCESSEURS CSS
    18
    

    View Slide

19. @MoOx
    19
    

    View Slide

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

    View Slide

21. @MoOx
    21
    http://putaindecode.io/fr/articles/css/preprocesseurs/
    

    View Slide

22. @MoOx
    22
    

    View Slide

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

    View Slide

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

    View Slide

25. @MoOx
    @extends
    25
    

    View Slide

26. @MoOx
    26
    

    View Slide

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

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

29. @MoOx
    & nesting ?
    29
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. @MoOx
    33
    Problem Exists Between Keyboard And Chair
    

    View Slide

34. @MoOx
    Frameworks ?
    34
    

    View Slide

35. @MoOx
    selector
    = global (class) name
    35
    

    View Slide

36. @MoOx
    selector
    = global (class) name
    36
    

    View Slide

37. @MoOx
    scoping
    37
    

    View Slide

38. @MoOx
    scoping
    38
    … NOPE
    

    View Slide

39. @MoOx
    dependency management
    39
    

    View Slide

40. @MoOx
    dependency management
    40
    … NOPE
    

    View Slide

41. @MoOx
    Entre le langage CSS et
    les préprocesseurs CSS…
    41
    

    View Slide

42. View Slide

43. @MoOx
    43
    

    View Slide

44. @MoOx
    44
    STYLING
    

    View Slide

45. @MoOx
    Les problèmes de CSS
    45
    - Tous est global
    - Scope des styles / Isolation
    - Conflits de spécificité
    - Trop de choses imprévisibles
    - Pas de gestion des dépendances
    - Supprimer du code inutile
    

    View Slide

46. @MoOx
    Les préprocesseurs CSS
    ne résolvent pas
    ces problèmes
    46
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. @MoOx
    Une interface utilisateur
    se découpe en composants
    50
    

    View Slide

51. @MoOx
    Pourquoi de pas coder ainsi ?
    51
    

    View Slide

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

    View Slide

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

    View Slide

54. @MoOx
    BEM
    54
    http://putaindecode.io/fr/articles/css/bem/
    

    View Slide

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

    View Slide

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

    View Slide

57. @MoOx
    Block = Composant
    57
    

    View Slide

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

    View Slide

59. @MoOx
    
    …
    Cliquez-ici !
    59
    BEM / HTML
    

    View Slide

60. @MoOx
    Les problèmes de CSS
    60
    - Tous est global
    - Scope des styles / Isolation
    - Conflits de spécificité
    - Trop de choses imprévisibles
    - Pas de gestion des dépendances
    - Supprimer du code inutile
    

    View Slide

61. @MoOx
    YAY !
    61
    

    View Slide

62. @MoOx
    62
    

    View Slide

63. @MoOx
    My 2 cents
    un élément HTML = un Block
    63 http://philipwalton.com/articles/extending-styles/
    

    View Slide

64. @MoOx
    Avec BEM il nous
    manque quoi ?
    64
    

    View Slide

65. View Slide

66. @MoOx
    66
    dev.w3.org/csswg
    

    View Slide

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

    View Slide

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

    View Slide

69. @MoOx
    69
    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%))
    )
    }
    color()
    

    View Slide

70. @MoOx
    70
    Et plein d’autres trucs
    • Nouveaux sélecteurs
    • Nouvelles fonctions
    • Même le nesting
    • …
    

    View Slide

71. @MoOx
    Sucre syntaxique
    71
    

    View Slide

72. @MoOx
    Myth
    Polyfill CSS
    72
    

    View Slide

73. @MoOx
    Myth
    basé sur Rework
    73
    

    View Slide

74. View Slide

75. @MoOx
    Evolution des pré-processeurs CSS
    75
    0
    17,5
    35
    52,5
    70
    2010 2011 2012 2013 2014 2015 2016
    

    View Slide

76. @MoOx
    76
    

    View Slide

77. @MoOx
    Evolution des pré-processeurs CSS
    77
    0
    17,5
    35
    52,5
    70
    2010 2011 2012 2013 2014 2015 2016
    

    View Slide

78. View Slide

79. @MoOx
    @tj (Stylus) créé
    Rework
    79
    

    View Slide

80. @MoOx
    CSS > AST
    80
    

    View Slide

81. @MoOx
    AST = Objet manipulable
    81
    Abstract Syntax Tree
    

    View Slide

82. @MoOx
    CSS > AST > CSS
    
    82
    

    View Slide

83. @MoOx
    Autoprefixer
    83
    

    View Slide

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

    View Slide

85. @MoOx
    85
    

    View Slide

86. @MoOx
    Autoprefixer pas content
    86
    

    View Slide

87. @MoOx
    87
    Autoprefixer fork Rework
    

    View Slide

88. @MoOx
    PostCSS
    88 https://ai.github.io/about-postcss/en/
    

    View Slide

89. @MoOx
    ✅ CSS > AST > CSS
    89
    

    View Slide

90. @MoOx
    @import postcss from "postcss"
    postcss([ plugin1, plugin2 ])
    .process(css)
    .then((result) => console.log(result.css))
    Utilisation de PostCSS
    90
    

    View Slide

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

    View Slide

92. @MoOx
    Un écosystème digne
    de Grunt
    92
    

    View Slide

93. @MoOx
    Un écosystème digne
    de Grunt
    93
    

    View Slide

94. @MoOx
    94
    

    View Slide

95. @MoOx
    95
    

    View Slide

96. @MoOx
    96
    :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) {
    .post-article :--heading {
    margin-top: 0;
    }
    }
    

    View Slide

97. @MoOx
    97
    postcss-
    :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) {
    .post-article :--heading {
    margin-top: 0;
    }
    }
    

    View Slide

98. @MoOx
    98
    postcss-
    :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) {
    .post-article :--heading {
    margin-top: 0;
    }
    }
    

    View Slide

99. View Slide

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

101. View Slide

102. @MoOx
     102
     @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;
     }
     }
     PreCSS
     

     View Slide

103. View Slide

104. @MoOx
     Gestions des assets
     104
     

     View Slide

105. @MoOx
     http://putaindecode.io/fr/articles/js/grunt/
     http://putaindecode.io/fr/articles/js/gulp/
     Grunt, Gulp…
     105
     http://putaindecode.io/fr/articles/js/webpack/
     

     View Slide

106. @MoOx
     C’est la fête aux
     “task runners”
     106
     

     View Slide

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

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. @MoOx
     grunt-mysql-dump
     112
     

     View Slide

113. @MoOx
     grunt-mysql-dump
     113
     

     View Slide

114. @MoOx
     Gulp
     114
     plus dans l’esprit Unix
     

     View Slide

115. @MoOx
     115
     | |
     

     View Slide

116. @MoOx
     ES6
     116
     JavaScript évolue
     

     View Slide

117. @MoOx
     ES6
     117
     ES2015
     

     View Slide

118. @MoOx
     6to5 > babel
     118
     

     View Slide

119. View Slide

120. View Slide

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

     View Slide

122. @MoOx
     122
     

     View Slide

123. @MoOx
     123
     ▶︎
     

     View Slide

124. @MoOx
     Transpileurs
     entrée > tambouille > sortie
     124
     

     View Slide

125. @MoOx
     Transpileurs
     entrée > tambouille > sortie
     125
     CSS CSS
     JS JS
     MD HTML
     

     View Slide

126. @MoOx
     Comment utilise-t-on ça
     au quotidien ?
     126
     

     View Slide

127. @MoOx
     Grunt ? Gulp ?
     127
     

     View Slide

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

     View Slide

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

     View Slide

130. @MoOx
     

     View Slide

131. @MoOx
     Grunt ? Gulp ?
     131
     … NOPE
     

     View Slide

132. @MoOx
     132
     

     View Slide

133. @MoOx
     133
     $ npm i -D webpack
     http://putaindecode.io/fr/articles/js/webpack/
     

     View Slide

134. @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) }
     134
     @MoOx
     Webpack
     

     View Slide

135. @MoOx
     135
     

     View Slide

136. @MoOx
     Bundle via des “loaders”
     136
     

     View Slide

137. @MoOx
     http://putaindecode.io/fr/articles/
     js/webpack/premier-exemple/
     137
     https://duckduckgo.com/?
     q=webpack+boilerplate
     

     View Slide

138. @MoOx
     Apps, site web…
     Même combat…
     138 http://putaindecode.io/fr/articles/wordpress/webpack/
     

     View Slide

139. View Slide

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

     View Slide

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

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

143. @MoOx
     var myStyles ?
     WTF ?
     143
     

     View Slide

144. @MoOx
     144
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

149. @MoOx
     Finalement on fait de
     simple objet de styles ?
     149
     

     View Slide

150. @MoOx
     Pourquoi pas des
     STYLES INLINE ?!
     150
     

     View Slide

151. @MoOx
     Exemple
     react-native-web
     151 https://github.com/necolas/react-native-web
     

     View Slide

152. @MoOx
     Exemple
     react-native-web
     152 https://github.com/necolas/react-native-web
     By @necolas
     auteur de Normalize.css
     

     View Slide

153. @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
     
     )
     },
     })
     153
     

     View Slide

154. @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: {
     154
     

     View Slide

155. @MoOx
     CSS Modules
     155
     Inline styles
     autoprefixer
     media queries
     (server-side rendering)
     utilisation (react-)native
     extensibilité ultra-facile
     

     View Slide

156. @MoOx
     Faites votre choix
     selon vos besoins !
     156
     

     View Slide

157. @MoOx
     Des questions ?
     157
     N’hésitez pas,
     je suis là pour ça
     

     View Slide

158. View Slide