The Future is In Pieces

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