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

[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

2f6c2dcd4ba8fc44f1e7f0b2ed3d587d?s=128

Maxime Thirouin

November 26, 2015
Tweet

Transcript

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

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

  3. @MoOx 3

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

    @MoOx
  5. @MoOx 5

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

  8. @MoOx 8

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

  10. @MoOx Pas de variables / constantes 10

  11. @MoOx Pas (vraiment) de fonctions 11

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

  13. @MoOx @import 13

  14. @MoOx HTTP 1 14

  15. @MoOx HTTP 1 15 … NOPE

  16. @MoOx héritage, composition 16

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

  18. @MoOx PRÉ-PROCESSEURS CSS 18

  19. @MoOx 19

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

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

  22. @MoOx 22

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

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

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

  26. @MoOx 26

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

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

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

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

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

  34. @MoOx Frameworks ? 34

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

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

  37. @MoOx scoping 37

  38. @MoOx scoping 38 … NOPE

  39. @MoOx dependency management 39

  40. @MoOx dependency management 40 … NOPE

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

  42. None
  43. @MoOx 43

  44. @MoOx 44 STYLING

  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
  46. @MoOx Les préprocesseurs CSS ne résolvent pas ces problèmes 46

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

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

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

    color: blue; display: block; padding: 1em; }
  50. @MoOx Une interface utilisateur se découpe en composants 50

  51. @MoOx Pourquoi de pas coder ainsi ? 51

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

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

    block; padding: 1em; }
  54. @MoOx BEM 54 http://putaindecode.io/fr/articles/css/bem/

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

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

    } .Block-element--modifier { }
  57. @MoOx Block = Composant 57

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

    .Button-icon--small { } BEM / CSS 58
  59. @MoOx <button class="Button Button--large"> <svg class="Button-icon">…</svg> Cliquez-ici ! </button 59

    BEM / HTML
  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
  61. @MoOx YAY ! 61

  62. @MoOx 62

  63. @MoOx My 2 cents un élément HTML = un Block

    63 http://philipwalton.com/articles/extending-styles/
  64. @MoOx Avec BEM il nous manque quoi ? 64

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

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

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

    (--large-viewport) { /* styles for large viewport */ }
  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()
  70. @MoOx 70 Et plein d’autres trucs • Nouveaux sélecteurs •

    Nouvelles fonctions • Même le nesting • …
  71. @MoOx Sucre syntaxique 71

  72. @MoOx Myth Polyfill CSS 72

  73. @MoOx Myth basé sur Rework 73

  74. None
  75. @MoOx Evolution des pré-processeurs CSS 75 0 17,5 35 52,5

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

  77. @MoOx Evolution des pré-processeurs CSS 77 0 17,5 35 52,5

    70 2010 2011 2012 2013 2014 2015 2016
  78. None
  79. @MoOx @tj (Stylus) créé Rework 79

  80. @MoOx CSS > AST 80

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

  82. @MoOx CSS > AST > CSS 82

  83. @MoOx Autoprefixer 83

  84. @MoOx Evolution de Rework 84 0 15 30 45 60

    2010 2011 2012 2013 2014 2015 2016
  85. @MoOx 85

  86. @MoOx Autoprefixer pas content 86

  87. @MoOx 87 Autoprefixer fork Rework

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

  89. @MoOx ✅ CSS > AST > CSS 89

  90. @MoOx @import postcss from "postcss" postcss([ plugin1, plugin2 ]) .process(css)

    .then((result) => console.log(result.css)) Utilisation de PostCSS 90
  91. @MoOx Plugin PostCSS 91 function (css) { css.walkDecls((decl) => {

    decl.value = decl.value .replace( /\d+rem/, (rem) => 16 * parseFloat(rem) + ‘px' ) }) }) }
  92. @MoOx Un écosystème digne de Grunt 92

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

  94. @MoOx 94

  95. @MoOx 95

  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; } }
  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; } }
  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; } }
  99. None
  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
  101. None
  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
  103. None
  104. @MoOx Gestions des assets 104

  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/

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

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

    make another task for that”
  108. None
  109. None
  110. None
  111. None
  112. @MoOx grunt-mysql-dump 112

  113. @MoOx grunt-mysql-dump 113

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

  115. @MoOx 115 | |

  116. @MoOx ES6 116 JavaScript évolue

  117. @MoOx ES6 117 ES2015

  118. @MoOx 6to5 > babel 118

  119. None
  120. None
  121. @MoOx 6to5 > babel > babel-* 121

  122. @MoOx 122

  123. @MoOx 123 ▶︎

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

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

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

  127. @MoOx Grunt ? Gulp ? 127

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

  129. @MoOx 129 ../.. ? ../ ? ./ ? .Component {

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

  131. @MoOx Grunt ? Gulp ? 131 … NOPE

  132. @MoOx 132

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

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

  136. @MoOx Bundle via des “loaders” 136

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

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

  139. None
  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
  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) }
  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) }
  143. @MoOx var myStyles ? WTF ? 143

  144. @MoOx 144

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

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

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

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

    // … <div className={ styles.element }> // <div class="element_f34f7fa0"> 148 http://glenmaddern.com/slides/modular-style#44
  149. @MoOx Finalement on fait de simple objet de styles ?

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

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

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

  153. @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> ) }, }) 153
  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
  155. @MoOx CSS Modules 155 Inline styles autoprefixer media queries (server-side

    rendering) utilisation (react-)native extensibilité ultra-facile
  156. @MoOx Faites votre choix selon vos besoins ! 156

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

    pour ça
  158. None