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
13. https://lh3.googleusercontent.com/-jijITfbqlCk/UUeCfITz0wI/AAAAAAAAQuc/1PjBKq-6KzM/s630-fcrop64=1%2C000033fafffff833/135486852774.jpg
14. The Web
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
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.
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
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;
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!