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

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=47 Brian Graves
October 17, 2016

Using Tomorrow's CSS Today

8b8063eb1fecbaf7db2f045a89e73349?s=128

Brian Graves

October 17, 2016
Tweet

Transcript

  1. None
  2. Brian Graves @briangraves

  3. None
  4. None
  5. None
  6. None
  7. None
  8. http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2015/11/3054003-poster-p-1-dont-give-a-hoverboard-this-christmas.jpg

  9. None
  10. None
  11. None
  12. None
  13. https://lh3.googleusercontent.com/-jijITfbqlCk/UUeCfITz0wI/AAAAAAAAQuc/1PjBKq-6KzM/s630-fcrop64=1%2C000033fafffff833/135486852774.jpg

  14. The Web

  15. None
  16. Text Documents credit

  17. Text Documents credit

  18. Tables

  19. Absolute Positioning / Floats / Inline-Block

  20. Flexbox / Grids

  21. CSS in 2016 is Amazing.

  22. WHERE HAVE WE BEEN?

  23. There is No CSS3! And other facts about how standards

    are made.
  24. There is No CSS3! And other facts about how standards

    are made.
  25. Despite the popularity of the “CSS3” buzzword, there is actually

    no spec defining such a thing. – Lea Verou
  26. None
  27. None
  28. None
  29. None
  30. Animation

  31. Typography

  32. Shapes

  33. Grids

  34. “CSS is not a real language”

  35. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes

    • No variables • No nested selectors • No scoping • No functions • No color manipulation • No basic arithmetic
  36. Things That Make Our Lives Easier

  37. Rise of the Preprocessors. How we filled in the gaps.

  38. None
  39. None
  40. None
  41. .row { @include display-flex; background-color: $color-blue; } .row { display:

    -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
  42. Do Preprocessors Solve The Problem?

  43. Preprocessors Perpetuate A Problem. – Aaron Ladage

  44. More & More Layers of Abstraction

  45. 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 • The CSS Spec & Browsers are catching up!
  46. Preprocessors? Where we’re going, we don’t need preprocessors.

  47. THE FUTURE OF CSS IS NOW

  48. Variables

  49. Mixins/Extends

  50. Color Functions

  51. Nesting

  52. Custom Media Queries

  53. None
  54. Custom Properties (Variables)

  55. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:

    var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
  56. 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
  57. http://caniuse.com/#feat=css-variables Browser Support: Custom Properties

  58. Variables lose their value if you have to constantly track

    down what they represent. – Ryan Heap
  59. Bad --blue: #0A81C4; --blue2: #005581; --blue3: #acd5f8; --timing: .25s; --othertiming:

    1s; Good: Logical Modifiers --color-blue: #0A81C4; --color-blue-light: #005581; --color-blue-dark: #acd5f8; --timing-fast: .25s; --timing-slow: 1s; Good: Point Scale --color-blue-10: #0A81C4; --color-blue-20: #005581; --color-blue-30: #acd5f8;
  60. None
  61. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:

    var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
  62. @Apply (Mixins/Extends)

  63. :root { --clearfix: { display: table; clear: both; content: ‘’;

    }; } .element:after { @apply --clearfix; }
  64. https://www.chromestatus.com/feature/5753701012602880 Browser Support: @apply

  65. Color Module Level 4 (Color Functions)

  66. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 tint(40%));

    }
  67. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 shade(40%));

    }
  68. CSS Color Functions • Tints & Shades • RGBA Adjustment

    • HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
  69. /* 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%) ); }
  70. /* 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%) ); }
  71. /* 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%) ); }
  72. Nesting

  73. .element { color: blue; {&.modifier { color: red; }} }

  74. .element { color: blue; {&.modifier { color: red; }} }

  75. .element { color: blue; &.modifier { color: red; } }

  76. .im { .a { .way { .over { .nested {

    .selector { color: red; } } } } } }
  77. .im { .a { .way { .over { .nested {

    .selector { color: red; } } } } } }
  78. Bad Nesting Order .selector { element {//…} property: value; .selector

    {//…} &:before {//…} } Good Nesting Order .selector { property: value; &:before {//…} element {//…} .selector {//…} }
  79. Custom Selectors

  80. @custom-selector --small (min-width: 30em); @media (--small) { .element { font-size:

    1.5rem; } }
  81. @media only screen and (min-width: 30em) { .element { font-size:

    1.5rem; } }
  82. @custom-selector --small (min-width: 30em); @media (--small) { .element { font-size:

    1.5rem; } }
  83. @custom-selector --heading h1,h2,h3,h4,h5,h6; --heading { /* styles for all headings

    */ } --heading + p { /* more styles */ }
  84. Media Query Range Context

  85. @media (30em <= width <= 60em) { .element { font-size:

    1.5rem; } }
  86. @media (min-width: 30em) and (max-width: 60em) { .element { font-size:

    1.5rem; } }
  87. @media (width <= 30em) { …small… } @media (30em <

    width < 60em) { …medium… } @media (width >= 60em) { …large… }
  88. Problems with CSS • Cross-browser compatibility issues • Vendor prefixes

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

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

    • No variables • No nested selectors • No scoping • No functions/mixins • No color manipulation • No basic arithmetic
  91. Autoprefixer

  92. Autoprefixer

  93. PostCSS

  94. .row { @include display-flex; background: $color-blue; } .row { display:

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

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

    without worry • Even Use CSS4 • Modular (Use only what you need) • Tons of existing plugins • Can’t find a plugin? Write one in javascript.
  97. 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.
  98. One Day…

  99. Let’s Get As Close As We Can To The Real

    Thing
  100. @briangraves Slides: bit.ly/2dn48Fb Thank You!