Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/ In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.

1. The Future is
Modular

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. • Don’t write multiple rules for the same element
• Inline styles
• Create a structured layering system to prevent
conflicts

36. Browser Defaults

37. <button class="button">
.button {
border:1px solid purple;
padding: 5px 10px;
color: pink;
}
<a href="/" class="button">
text-decoration: none;

38. • all: initial
• Predictable HTML
i.e. templates

39. Putting Modules
Together

40. Send

41. Cancel Send

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

43. Cancel Send

44. SendEmail

45. .button + .button,
.input + .button {
margin-left: 10px;
}
* + * {
margin-left: 10px;
}

46. Send SubscribeEmail

47. http://snk.ms/26

48. • Separate layout from module
• Micro layout classes

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

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

51. BONUS PROBLEM!
Media Queries

54. If Module A
in Module B
in Layout C
Then I’m screwed.

55. If Module A has room
do this.

56. Element Queries

57. Element Queries

58. Oh, right.
SMACSS.

66. Design has a cost.

67. Every piece of
design ends up in
code.

70. • Categorize
• Naming Convention

71. Base
Layout
Module
State
Theme

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

73. HTML
CSS
JavaScript
HTML
CSS
JavaScript
HTML
CSS
JavaScript

74. React and
Inline Styles

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

76. var XUIButton = React.createClass({
render: function() {
return (
<button className="{this.props.type}">
{this.props.children}
</button>
);
}
});

77. var myStyle = {
color: '#FFF',
backgroundColor: '#330000'
}
var XUIButton = React.createClass({
render: function() {
return (
<button style="{myStyle}">
{this.props.children}
</button>
);
}

78. HTML
CSS
JavaScript
HTML
CSS
JavaScript
HTML
CSS
JavaScript

79. The Future:
Web Components

80. • Templates
• Shadow DOM
• Custom Elements
• HTML Imports

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

82. • The Cascade no longer applies
• Inheritance still applies
(unless you use all:initial)

84. HTML
CSS
JavaScript

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

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

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

88. // 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);

89. • Likely a year before all browsers support
everything.
• JavaScript Dependent
• Phillip Walton’s Talk on Modular CSS with Web
Components
http://snk.ms/27

90. • Think about standardized and modular design.
• Frameworks like React can help.
• Web Components are coming. (So is winter.)

91. Thank you.
http://snook.ca/
@snookca