CSS is Dead; Long Live CSS

Preprocessors are everywhere, but CSS is evolving to meet our needs. Will preprocessors continue to be necessary as CSS adds more features?

Transcript

1. CSS is Dead; Long Live CSS Alan Mooiman @alanmoo
2. –people ruled by a king “The King is dead! Long live The King!”
5. CSS Preprocessors
6. Why they’re useful • Code organization • Customizable • DRY-ness
7. Enough rope…
8. Put down your pitchforks
9. Nesting .alert{ background: #f00; h1{ font-size: 3rem; } h2{ font-size: 2rem; } } .alert{ background: #f00; } .alert h1{ font-size: 3rem; } .alert h2{ font-size: 2rem; }
10. Nesting body { div.container { div.content { div.articles { & > div.post { div.title { h1 { a { color: green;
11. Deprecation DEPRECATION WARNING on line 25 of src/css/scss/bourbon/addons/_html5-input-types.scss:
 Assigning to global variable "$unquoted-inputs-list" by default is deprecated.
 In future versions of Sass, this will create a new local variable.
 If you want to assign to the global variable, use "$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global" instead. DEPRECATION WARNING on line 25 of src/css/scss/bourbon/addons/_html5-input-types.scss:
 Assigning to global variable "$unquoted-inputs-list" by default is deprecated.
 In future versions of Sass, this will create a new local variable.
 If you want to assign to the global variable, use "$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global" instead. DEPRECATION WARNING on line 25 of src/css/scss/bourbon/addons/_html5-input-types.scss:
 Assigning to global variable "$unquoted-inputs-list" by default is deprecated.
 In future versions of Sass, this will create a new local variable.
 If you want to assign to the global variable, use "$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global" instead. DEPRECATION WARNING on line 25 of src/css/scss/bourbon/addons/_html5-input-types.scss:
 Assigning to global variable "$unquoted-inputs-list" by default is deprecated.
 In future versions of Sass, this will create a new local variable.
 If you want to assign to the global variable, use "$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global" instead.
12. Configuration (Malcolm in the Middle, not Breaking Bad)
13. Abstraction Remember: it compiles down to CSS
14. –Lyza Danger Gardner http://alistapart.com/column/what-will-save-us-from- the-dark-side-of-pre-processors “Pre-processors… to the rescue?”
15. Preprocessors saved us from CSS CSS will save us from preprocessors
16. Flexbox • Dynamic layouts
17. Flexbox $item-count: 5; .item{ width: 100%/$item-count; }
18. Flexbox .item-container{display: flex;} .item{flex: 1}
19. CSS Grid Layout Module • More layout options http://www.w3.org/TR/css3-grid-layout/
20. Variables $primary-color: #ccff00; body{ color: $primary-color; } body{ color: #ccff00; }
21. CSS Variables :root{ --primary: #f00; } body{ color: var(--primary); }
22. –You, probably “But they’re soooo ugly” CSS Variables
23. It doesn’t matter <blink> </blink>
24. CSS Variables :root{ --red: 255; --green: 0; --blue: 255; } div{ color: rgb( var(--red), var(--green), var(--blue) ); } Some div Another div .magic{ --green: 255;} <div>Some div</div> <div class=“magic”>Another div</div>
25. Extends .alert{ color: black; border: 1px solid red; } .alert-danger{ @extend .alert; background: yellow; } .alert-catastrophic{ @extend .alert; background: red; } .alert, .alert-danger, .alert-catastrophic { color: black; border: 1px solid red; } .alert-danger { background: yellow; } .alert-catastrophic{ background: red; }
26. Mixins @mixin flexbox{ display:-webkit-flex; display:-moz-flex; display:-ms-flex; display: flex; } .item-container{ @include flexbox; } .item-container{ display:-webkit-flex; display:-moz-flex; display:-ms-flex; display: flex; }
27. CSS Extends • Easier to implement natively? • http://tabatkins.github.io/specs/css-extend-rule/ Status: Super theoretical at the moment
28. Nesting section, article, aside{ h1, h2{ color: red; } } section h1, article h1, aside h1, section h2, article h2, aside h2 { color: red; }
29. :matches() :matches(section, article, aside) :matches(h1, h2) { color: red; }
30. CSS Extensions • Super early, theoretical discussion • http://dev.w3.org/csswg/css-extensions/
31. CSS Extensions @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { /* styles for all headings */ } :--heading + p { /* more styles */ } Status: Super theoretical at the moment
32. Web Components • Might solve the global scope problem • …eventually https://hacks.mozilla.org/2014/12/mozilla-and-web-components/
33. @import @import "component"; @import "component.css"; Concatenates files Makes another HTTP request
34. HTTP/2 @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url("chrome://communicator/skin/"); @import "common.css" screen, projection; @import url('landscape.css') screen and (orientation:landscape); @import url("component-small.css") (max-width: 40em);
35. Container queries • The holy grail of RWD • http://alistapart.com/article/container-queries- once-more-unto-the-breach • http://dev.w3.org/csswg/css-containment/ #contain-property
36. Preprocessors are a great testing ground
37. So what do we do?
38. Long live CSS
39. @alanmoo Moving soon to a Portland near you