The Future is In Pieces

My talk from CSSDay.io

Transcript

1. The Future is in Pieces
2. 2003 CSS Takes Off
3. Wired Redesign
4. Blog Design
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: … }
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
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
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
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.
67. Design has a cost.
68. Every piece of design ends up in code.
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)
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