CSS is Dead; Long Live CSS

Slide 1

Slide 1 text

CSS is Dead; Long Live CSS Alan Mooiman @alanmoo

Slide 2

Slide 2 text

–people ruled by a king “The King is dead! Long live The King!”

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

CSS Preprocessors

Slide 6

Slide 6 text

Why they’re useful • Code organization • Customizable • DRY-ness

Slide 7

Slide 7 text

Enough rope…

Slide 8

Slide 8 text

Put down your pitchforks

Slide 9

Slide 9 text

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; }

Slide 10

Slide 10 text

Nesting body { div.container { div.content { div.articles { & > div.post { div.title { h1 { a { color: green;

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

Conﬁguration (Malcolm in the Middle, not Breaking Bad)

Slide 13

Slide 13 text

Abstraction Remember: it compiles down to CSS

Slide 14

Slide 14 text

–Lyza Danger Gardner http://alistapart.com/column/what-will-save-us-from- the-dark-side-of-pre-processors “Pre-processors… to the rescue?”

Slide 15

Slide 15 text

Preprocessors saved us from CSS CSS will save us from preprocessors

Slide 16

Slide 16 text

Flexbox • Dynamic layouts

Slide 17

Slide 17 text

Flexbox $item-count: 5; .item{ width: 100%/$item-count; }

Slide 18

Slide 18 text

Flexbox .item-container{display: flex;} .item{flex: 1}

Slide 19

Slide 19 text

CSS Grid Layout Module • More layout options http://www.w3.org/TR/css3-grid-layout/

Slide 20

Slide 20 text

Variables $primary-color: #ccff00; body{ color: $primary-color; } body{ color: #ccff00; }

Slide 21

Slide 21 text

CSS Variables :root{ --primary: #f00; } body{ color: var(--primary); }

Slide 22

Slide 22 text

–You, probably “But they’re soooo ugly” CSS Variables

Slide 23

Slide 23 text

It doesn’t matter

Slide 24

Slide 24 text

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;}

Some div

Another div

Slide 25

Slide 25 text

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; }

Slide 26

Slide 26 text

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; }

Slide 27

Slide 27 text

CSS Extends • Easier to implement natively? • http://tabatkins.github.io/specs/css-extend-rule/ Status: Super theoretical at the moment

Slide 28

Slide 28 text

Nesting section, article, aside{ h1, h2{ color: red; } } section h1, article h1, aside h1, section h2, article h2, aside h2 { color: red; }

Slide 29

Slide 29 text

:matches() :matches(section, article, aside) :matches(h1, h2) { color: red; }

Slide 30

Slide 30 text

CSS Extensions • Super early, theoretical discussion • http://dev.w3.org/csswg/css-extensions/

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Web Components • Might solve the global scope problem • …eventually https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

Slide 33

Slide 33 text

@import @import "component"; @import "component.css"; Concatenates ﬁles Makes another HTTP request

Slide 34

Slide 34 text

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);

Slide 35

Slide 35 text

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