The Future is In Pieces

My talk from CSSDay.io

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