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

[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 @mixins ? 23 @mixin block() { border: 1px solid

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

    #000; background: url(whatever.jpg) } .class { @include block(); background: red; } /* BAM */
  3. @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/
  4. @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; }
  5. @MoOx Specificity shit 32 #sidebar ul ul li a {

    } .sidebar-link { try: again; }
  6. @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
  7. @MoOx 49 /* BAM */ #sidebar ul li a {

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

    color: blue; display: block; padding: 1em; }
  9. @MoOx .Button { } .Button--large { } .Button-icon { }

    .Button-icon--small { } BEM / CSS 58
  10. @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
  11. @MoOx My 2 cents un élément HTML = un Block

    63 http://philipwalton.com/articles/extending-styles/
  12. @MoOx @custom-property (>vars) 67 :root { --lineHeight: 3rem } p

    { margin-bottom: calc(var(--lineHeight) * 2); }
  13. @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()
  14. @MoOx 70 Et plein d’autres trucs • Nouveaux sélecteurs •

    Nouvelles fonctions • Même le nesting • …
  15. @MoOx Evolution des pré-processeurs CSS 75 0 17,5 35 52,5

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

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

    2010 2011 2012 2013 2014 2015 2016
  18. @MoOx @import postcss from "postcss" postcss([ plugin1, plugin2 ]) .process(css)

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

    decl.value = decl.value .replace( /\d+rem/, (rem) => 16 * parseFloat(rem) + ‘px' ) }) }) }
  20. @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; } }
  21. @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; } }
  22. @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; } }
  23. @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
  24. @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
  25. @MoOx 129 ../.. ? ../ ? ./ ? .Component {

    background: url(../../…) }
  26. @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
  27. @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
  28. @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) }
  29. @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) }
  30. @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
  31. @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
  32. @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
  33. @MoOx CSS Modules 155 Inline styles autoprefixer media queries (server-side

    rendering) utilisation (react-)native extensibilité ultra-facile