$30 off During Our Annual Pro Sale. View Details »

[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

Maxime Thirouin

November 26, 2015
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

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