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

The Future is In Pieces

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
December 05, 2015

The Future is In Pieces

My talk from CSSDay.io

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

December 05, 2015
Tweet

Transcript

  1. The Future is in Pieces

  2. 2003 CSS Takes Off

  3. Wired Redesign

  4. Blog Design

  5. None
  6. None
  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: … }
  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: … }
  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: … }
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. SMACSS

  17. Scalable and Modular Architecture for CSS

  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.
  19. What does it mean to be modular?

  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
  21. None
  22. None
  23. None
  24. None
  25. What hurdles are there to being truly independent?

  26. • Inheritance
 • Cascade
 • Browser Default Styling
 • Putting

    modules/components together
  27. Inheritance

  28. • Typography
 e.g. color, font-size, font-family
 • List Styles
 e.g.

    list-style
 • Table Styles 
 e.g. border-collapse
  29. Sorry, React. Inline styles won’t save you from inheritance.

  30. • all: initial

  31. None
  32. None
  33. Cascade

  34. The cascade is how the browser decides what properties to

    apply when you have multiple rules declared on the same element.
  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; }
  36. • Don’t write multiple rules for the same element
 •

    Inline styles
 • Create a structured layering system to prevent conflicts
  37. Browser Defaults

  38. <button class="button"> .button {
 border:1px solid purple;
 padding: 5px 10px;


    color: pink;
 } <a href="/" class="button"> text-decoration: none;
  39. • all: initial
 • Predictable HTML
 i.e. templates

  40. Putting Modules Together

  41. Send

  42. Cancel Send

  43. .button + .button { 
 margin-left: 10px; 
 }

  44. Cancel Send

  45. Send Email

  46. .button + .button,
 .input + .button { 
 margin-left: 10px;

    
 } * + * { 
 margin-left: 10px; 
 }
  47. Send Subscribe Email

  48. http://snk.ms/26

  49. • Separate layout from module
 • Micro layout classes

  50. <span class=“layout-inline”> <input><button>Send</button> </span> <span class=“layout-inline”> <button>Subscribe</button> </span>

  51. <input><button>Send</button> <button class=“ML-S”>Subscribe</ button>

  52. BONUS PROBLEM! Media Queries

  53. None
  54. None
  55. If Module A 
 in Module B 
 in Layout

    C 
 Then I’m screwed.
  56. If Module A has room
 do this.

  57. Element Queries

  58. Element Queries

  59. Oh, right. SMACSS.

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. Design has a cost.

  68. Every piece of design ends up in code.

  69. None
  70. None
  71. • Categorize
 • Naming Convention

  72. Base Layout Module State Theme

  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
  74. HTML CSS JavaScript HTML CSS JavaScript HTML CSS JavaScript

  75. The Future is React?

  76. React.render( <XUIButton type={type}> My Button! </XUIButton> );

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

    className="{this.props.type}"> {this.props.children} </button> ); } });
  78. var myStyle = { color: '#FFF', backgroundColor: '#330000' } var

    XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }
  79. HTML CSS JavaScript HTML CSS JavaScript HTML CSS JavaScript

  80. The Future is Web Components?

  81. • Templates
 • Shadow DOM
 • Custom Elements
 • HTML

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

  83. • The Cascade no longer applies
 • Inheritance still applies

    
 (unless you use all:initial)
  84. None
  85. HTML CSS JavaScript

  86. HTML CSS JavaScript component.html <link rel="import" 
 href="component.html">

  87. <template> <figure> <content select="img"></content> </figure> <div> <content></content> </div> </template>

  88. <custom-element> <img src="…"> </custom-element>

  89. // Creates a MediaObjectElement class // that extends HTMLElement. class

    MediaObjectElement extends HTMLElement { createdCallback() { var shadowRoot = this.createShadowRoot(); shadowRoot.innerHTML = 'Shadow DOM contents...'; } } // Registers the `<custom-element>` element for use. document.registerElement('custom-element', MediaObjectElement);
  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
  91. • Think about standardized and modular design.
 • Frameworks like

    React can help.
 • Web Components are coming. (So is winter.)
  92. Thank you.
 http://snook.ca/
 @snookca