Using Tomorrow's CSS Today

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!