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

Post CSS era: From preprocessed stylesheets to CSS Modules and inline styles

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

Maxime Thirouin

May 25, 2016
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

Transcript

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

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

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

    } .sidebar-link { try: again; }
  6. @MoOx Scoping ? 40 Web Component / Shadow DOM? CSS

    scope? http://caniuse.com/#feat=shadowdom http://caniuse.com/#feat=style-scoped
  7. @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
  8. @MoOx 52 /* BAM */ #sidebar ul li a {

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

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

    .Button-icon--small { } BEM / CSS 61
  11. @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
  12. @MoOx My 2 cents one DOM element = one Block

    65 http://philipwalton.com/articles/extending-styles/
  13. @MoOx @custom-properties (>vars) 68 :root { --lineHeight: 3rem } p

    { margin-bottom: calc(var(--lineHeight) * 2); }
  14. @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()
  15. @MoOx 71 There is a lot of new stuff •

    New selectors • New (color) functions • Nesting and extends are coming • … http://cssnext.io/features/
  16. @MoOx Rework Evolution 81 0 15 30 45 60 2010

    2011 2012 2013 2014 2015 2016
  17. @MoOx PostCSS is NOT 87 - a Preprocessor - “Future

    Syntax” - an optimizer - a linter
  18. @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
  19. @MoOx PostCSS Plugin 90 function (css) { css.walkDecls((decl) => {

    decl.value = decl.value .replace( /\d+rem/, (rem) => 16 * parseFloat(rem) + ‘px' ) }) }) }
  20. @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/
  21. @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
  22. @MoOx 98 stylelint Modern CSS linter based on PostCSS Already

    100 rules + extensible http://stylelint.io/
  23. @MoOx Evolution of CSS preprocessors 99 0 17,5 35 52,5

    70 2010 2011 2012 2013 2014 2015 2016
  24. @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
  25. @MoOx Evolution of CSS preprocessors 102 0 17,5 35 52,5

    70 2010 2011 2012 2013 2014 2015 2016
  26. @MoOx 122 ../.. ? ../ ? ./ ? .Component {

    background: url(../../…) }
  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) } 127 Webpack
  28. @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
  29. @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) }
  30. @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) }
  31. @MoOx var styles = require(“./styles.css”) // { element: "element_f34f7fa0" }

    // … <div className={ styles.element }> // <div class="element_f34f7fa0"> 143 http://glenmaddern.com/slides/modular-style#44
  32. @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
  33. @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> ) }, }) 150
  34. @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
  35. @MoOx Inlines styles can be use to write react-native apps

    152 https://github.com/facebook/css-layout
  36. @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
  37. @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… ;)
  38. @MoOx You can even switch or mix 156 react-native-css CSS

    ➡ JS jss JS ➡ CSS and many more on github / npm