CSS is Dead; Long Live CSS

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?

9760421d07f955b71282ff1394761b86?s=128

Alan Mooiman

July 08, 2015
Tweet

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!”
  3. None
  4. None
  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