Using Tomorrow's CSS Today

Transcript

2. Brian Graves @briangraves
8. http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2015/11/3054003-poster-p-1-dont-give-a-hoverboard-this-christmas.jpg
12. https://lh3.googleusercontent.com/-jijITfbqlCk/UUeCfITz0wI/AAAAAAAAQuc/1PjBKq-6KzM/s630-fcrop64=1%2C000033fafffff833/135486852774.jpg
13. The Web
15. Tables
16. Absolute Positioning / Floats / Inline-Block
17. Flexbox / Grids
18. CSS in 2016 is Amazing.
19. WHERE HAVE WE BEEN?
20. There is No CSS3! And other facts about how standards are made.
21. Despite the popularity of the “CSS3” buzzword, there is actually no spec defining such a thing. – Lea Verou
24. Animation
25. Typography
26. Layout
27. “CSS is not a real language”
28. 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
29. Things That Make Our Lives Easier
30. Rise of the Preprocessors. How we filled in the gaps.
34. .row { @include display-flex; background-color: $color-blue; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
35. Do Preprocessors Solve The Problem?
36. Preprocessors Perpetuate A Problem. – Aaron Ladage
37. More & More Layers of Abstraction
38. 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
39. Preprocessors? Where we’re going, we don’t need preprocessors.
40. THE FUTURE OF CSS IS NOW
41. Variables
42. Mixins/Extends
43. Color Functions
44. Nesting
45. Custom Media Queries
46. PostCSS
47. .row { @include display-flex; background: $color-blue; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
48. .row { display: flex; background: var(--color-blue); } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
49. 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.
50. Autoprefixer
51. 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.
52. CSS Custom Properties (variables)
53. :root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color: var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
54. 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
55. http://caniuse.com/#feat=css-variables
56. Variables lose their value if you have to constantly track down what they represent. – Ryan Heap
58. @Apply (mixins/extends)
59. :root { --clearfix: { display: table; clear: both; content: ‘’; }; } .element:after { @apply --clearfix; }
60. https://www.chromestatus.com/feature/5753701012602880
61. Color Functions
62. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 tint(40%)); }
63. .element { color: #1982C5; } .element--modifier { color: color(#1982C5 shade(40%)); }
64. CSS Color Functions • Tints & Shades • RGBA Adjustment • HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
65. /* 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%) ); }
66. /* 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%) ); }
67. /* 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%) ); }
68. Nesting
69. .element { color: blue; {&.modifier { color: red; }} }
70. .element { color: blue; {&.modifier { color: red; }} }
71. .element { color: blue; &.modifier { color: red; } }
72. .im { .a { .way { .over { .nested { .selector { color: red; } } } } } }
73. Custom Media Queries
74. @custom-media --small (min-width: 30em); @media (--small) { .element { font-size: 1.5rem; } }
75. @media only screen and (min-width: 30em) { .element { font-size: 1.5rem; } }
76. @custom-media --small (min-width: 30em); @media (--small) { .element { font-size: 1.5rem; } }
77. New Media Query Syntax
78. @media (width >= 30em) and (width <= 60em) { .element { font-size: 1.5rem; } }
79. @media (min-width: 30em) and (max-width: 60em) { .element { font-size: 1.5rem; } }
80. Partials & Globbing
81. /* 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“; …
82. 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
83. 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
84. 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
85. One Day…
86. Let’s Get As Close As We Can To The Real Thing
87. @briangraves Thank You!