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

Using Tomorrow's CSS Today

Brian Graves
April 28, 2016

Using Tomorrow's CSS Today

Brian Graves

April 28, 2016
Tweet

More Decks by Brian Graves

Other Decks in Design

Transcript

  1. Despite the popularity of the “CSS3” buzzword, there is actually

    no spec defining such a thing. – Lea Verou
  2. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes

    • No variables • No inline importing • No nested selectors • No functions • No color manipulation • No basic arithmetic
  3. .row { @include display-flex; background-color: $color-blue; } .row { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
  4. Problems with Preprocessors • Not real front-end code • Proprietary

    syntax • Often written in non front-end languages • Not as easily extensible • Must be compiled • Compile times can be slow • Browsers are catching up
  5. .row { @include display-flex; background: $color-blue; } .row { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
  6. .row { display: flex; background: var(--color-blue); } .row { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
  7. PostCSS Advantages • Write CSS using CSS • Use CSS3

    without worry • Even Use CSS4 • Modular (Use only what you need) • Faster compile times • Built on Node • No Ruby dependencies • Easier to debug • Tons of existing plugins • Can’t find a plugin? Write one in javascript.
  8. PostCSS Ecosystem • Autoprefixer • PostCSS-nested • PostCSS-color-function • PostCSS-calc

    • PostCSS-custom-properties • PostCSS-apply • PostCSS-custom-media • CSSNext • PostCSS-import • Can’t find a plugin? Write one in javascript.
  9. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:

    var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
  10. Just because you may like Sass variable syntax more does

    not mean that you should just forsake the new spec. – Jake Albaugh http://codepen.io/jakealbaugh/post/css4-variables-and-sass
  11. Variables lose their value if you have to constantly track

    down what they represent. – Ryan Heap
  12. :root { --clearfix: { display: table; clear: both; content: ‘’;

    }; } .element:after { @apply --clearfix; }
  13. CSS Color Functions • Tints & Shades • RGBA Adjustment

    • HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
  14. /* combine with variables to create palettes */ :root {

    --color-blue: #1982C5; --color-blue-light: color( var(--color-blue) tint(40%) ); --color-blue-dark: color( var(--color-blue) shade(40%) ); }
  15. /* map variables to variables */ :root { --color-text: var(--color-blue);

    --color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
  16. /* map variables to variables */ :root { --color-text: var(--color-orange);

    --color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
  17. .im { .a { .way { .over { .nested {

    .selector { color: red; } } } } } }
  18. /* generated with grunt-sass-globbing */ @import "utilities/variables"; @import "utilities/mixins"; @import

    "utilities/reset"; @import “utilities/breakpoints"; @import “atoms/buttons"; @import “atoms/headings"; @import “atoms/icons"; @import “atoms/text"; @import “molecules/components/disclaimer“; …
  19. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes

    • No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
  20. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes

    • No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
  21. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes

    • No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic