Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Future is In Pieces

snookca
December 05, 2015

The Future is In Pieces

My talk from CSSDay.io

snookca

December 05, 2015
Tweet

More Decks by snookca

Other Decks in Programming

Transcript

  1. The Future is
    in Pieces

    View Slide

  2. 2003
    CSS Takes Off

    View Slide

  3. Wired Redesign

    View Slide

  4. Blog Design

    View Slide

  5. View Slide

  6. View Slide

  7. Blog Designs
    #header h1, #header h2 { font-size:13px; font-weigh… }
    #header h1 { color: #680; float:right; padding-b…}
    #header h2 { float:left; padding:18px 20px; posi…}
    #header h2 img { position:absolute; left:0; top:0; }
    #header h2 a { text-decoration:none; color:#333; }
    #main h2 {text-transform:uppercase; font-weight:…}
    #main h2 a {text-decoration:none; color:#444;}
    #main h2 a:hover {color:#680;}
    #main .article.inside h1 { text-transform:uppercase;…}
    #comments .comment .meta .authorname { text-transfo… }
    #comments .comment .meta .commentnumber a { float: … }

    View Slide

  8. Blog Designs
    #header h1, #header h2 { font-size:13px; font-weigh… }
    #header h1 { color: #680; float:right; padding-b…}
    #header h2 { float:left; padding:18px 20px; posi…}
    #header h2 img { position:absolute; left:0; top:0; }
    #header h2 a { text-decoration:none; color:#333; }
    #main h2 {text-transform:uppercase; font-weight:…}
    #main h2 a {text-decoration:none; color:#444;}
    #main h2 a:hover {color:#680;}
    #main .article.inside h1 { text-transform:uppercase;…}
    #comments .comment .meta .authorname { text-transfo… }
    #comments .comment .meta .commentnumber a { float: … }

    View Slide

  9. Blog Designs
    #header h1, #header h2 { font-size:13px; font-weigh… }
    #header h1 { color: #680; float:right; padding-b…}
    #header h2 { float:left; padding:18px 20px; posi…}
    #header h2 img { position:absolute; left:0; top:0; }
    #header h2 a { text-decoration:none; color:#333; }
    #main h2 {text-transform:uppercase; font-weight:…}
    #main h2 a {text-decoration:none; color:#444;}
    #main h2 a:hover {color:#680;}
    #main .article.inside h1 { text-transform:uppercase;…}
    #comments .comment .meta .authorname { text-transfo… }
    #comments .comment .meta .commentnumber a { float: … }

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. SMACSS

    View Slide

  17. Scalable and
    Modular Architecture
    for CSS

    View Slide

  18. • Describes how to approach site design and
    development

    • No GitHub repo, not a library, not a framework, no
    tools

    • Techniques can be applied to static CSS, Sass,
    React, Web Components, etc.

    View Slide

  19. What does it mean
    to be modular?

    View Slide

  20. A module is “each of a set of
    standardized parts or independent
    units that can be used to construct
    a more complex structure.”
    –Dictionary

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. What hurdles are
    there to being truly
    independent?

    View Slide

  26. • Inheritance

    • Cascade

    • Browser Default Styling

    • Putting modules/components together

    View Slide

  27. Inheritance

    View Slide

  28. • Typography

    e.g. color, font-size, font-family

    • List Styles

    e.g. list-style

    • Table Styles 

    e.g. border-collapse

    View Slide

  29. Sorry, React. Inline
    styles won’t save
    you from inheritance.

    View Slide

  30. • all: initial

    View Slide

  31. View Slide

  32. View Slide

  33. Cascade

    View Slide

  34. The cascade is how the
    browser decides what
    properties to apply when you
    have multiple rules declared
    on the same element.

    View Slide

  35. a:link { color: blue; }
    a:hover { color: cornflowerblue; }
    .sidebar a:link { color: grey; }
    .sidebar a:hover { color: crimson; }
    .nav a:link { color: cadetblue; }
    .nav a:hover { color: darkblue; }

    View Slide

  36. • Don’t write multiple rules for the same element

    • Inline styles

    • Create a structured layering system to prevent
    conflicts

    View Slide

  37. Browser Defaults

    View Slide


  38. .button {

    border:1px solid purple;

    padding: 5px 10px;

    color: pink;

    }

    text-decoration: none;

    View Slide

  39. • all: initial

    • Predictable HTML

    i.e. templates

    View Slide

  40. Putting Modules
    Together

    View Slide

  41. Send

    View Slide

  42. Cancel Send

    View Slide

  43. .button + .button { 

    margin-left: 10px; 

    }

    View Slide

  44. Cancel Send

    View Slide

  45. Send
    Email

    View Slide

  46. .button + .button,

    .input + .button { 

    margin-left: 10px; 

    }
    * + * { 

    margin-left: 10px; 

    }

    View Slide

  47. Send Subscribe
    Email

    View Slide

  48. http://snk.ms/26

    View Slide

  49. • Separate layout from module

    • Micro layout classes

    View Slide


  50. Send


    Subscribe

    View Slide

  51. Send
    Subscribe
    button>

    View Slide

  52. BONUS PROBLEM!
    Media Queries

    View Slide

  53. View Slide

  54. View Slide

  55. If Module A 

    in Module B 

    in Layout C 

    Then I’m screwed.

    View Slide

  56. If Module A has room

    do this.

    View Slide

  57. Element Queries

    View Slide

  58. Element Queries

    View Slide

  59. Oh, right.
    SMACSS.

    View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. Design has a cost.

    View Slide

  68. Every piece of
    design ends up in
    code.

    View Slide

  69. View Slide

  70. View Slide

  71. • Categorize

    • Naming Convention

    View Slide

  72. Base
    Layout
    Module
    State
    Theme

    View Slide

  73. • .btn
    • .btn--variation
    • .btn__component
    • .btn
    • &--variation
    • &__component
    • button.css
    • .variation
    • .component
    SMACSS-y
    BEM
    Sass
    CSS
    Modules/React
    • .btn
    • .btn-variation
    • .btn--component

    View Slide

  74. HTML
    CSS
    JavaScript
    HTML
    CSS
    JavaScript
    HTML
    CSS
    JavaScript

    View Slide

  75. The Future is
    React?

    View Slide

  76. React.render(

    My Button!

    );

    View Slide

  77. var XUIButton = React.createClass({
    render: function() {
    return (

    {this.props.children}

    );
    }
    });

    View Slide

  78. var myStyle = {
    color: '#FFF',
    backgroundColor: '#330000'
    }
    var XUIButton = React.createClass({
    render: function() {
    return (

    {this.props.children}

    );
    }

    View Slide

  79. HTML
    CSS
    JavaScript
    HTML
    CSS
    JavaScript
    HTML
    CSS
    JavaScript

    View Slide

  80. The Future is
    Web Components?

    View Slide

  81. • Templates

    • Shadow DOM

    • Custom Elements

    • HTML Imports

    View Slide

  82. var p = document.createElement(‘p');
    p.createShadowRoot();
    p.shadowRoot.innerHTML = 'HTML Contents';
    document.body.appendChild(p);

    View Slide

  83. • The Cascade no longer applies

    • Inheritance still applies 

    (unless you use all:initial)

    View Slide

  84. View Slide

  85. HTML
    CSS
    JavaScript

    View Slide

  86. HTML
    CSS
    JavaScript
    component.html
    href="component.html">

    View Slide









  87. View Slide




  88. View Slide

  89. // Creates a MediaObjectElement class
    // that extends HTMLElement.
    class MediaObjectElement extends HTMLElement {
    createdCallback() {
    var shadowRoot = this.createShadowRoot();
    shadowRoot.innerHTML = 'Shadow DOM contents...';
    }
    }
    // Registers the `` element for use.
    document.registerElement('custom-element',
    MediaObjectElement);

    View Slide

  90. • Likely a year before all browsers support
    everything.

    • JavaScript Dependent

    • Phillip Walton’s Talk on Modular CSS with Web
    Components 

    http://snk.ms/27

    View Slide

  91. • Think about standardized and modular design.

    • Frameworks like React can help.

    • Web Components are coming. (So is winter.)

    View Slide

  92. Thank you.

    http://snook.ca/

    @snookca

    View Slide