We’ve moved away from building a site page by page. Now, teams are moving to component-based designs. In this talk, we’ll take a look at the evolution of front-end processes from design through to implementation. We’ll see how CSS concepts like BEM and SMACSS apply in a world of React, CSS Modules, and Web Components. Lastly, we’ll take a gander at what possibilities still lie ahead.

1. Falling to Pieces
The Componentization
of the Web

2. Style is important.

3. Thinking in Pages

4. Wired Redesign

5. Blog Design

9. #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 .article.inside h1 { text-transform:uppercase;…}
#comments .comment .meta .authorname { text-transfo… }
#comments .comment .meta .commentnumber a { float: … }
#main .article.inside h1 { text-transform:uppercase;…}
#sidebar h2 { text-transfo… }
#comments .comment .meta .commentnumber a { float: … }

12. OOCSS,
SMACSS, BEM

13. What does it mean
to be modular?

14. A module is “each of a set of
standardized parts or independent
units that can be used to construct
a more complex structure.”
–Dictionary

19. What hurdles are
there to being truly
independent?

20. • Inheritance
• Cascade
• Browser Default Styling
• Putting modules/components together

21. Inheritance

22. • Typography
e.g. color, font-size, font-family
• List Styles
e.g. list-style
• Table Styles
e.g. border-collapse

23. • A Good Thing ™

24. Cascade

25. The cascade is how the
browser decides what
properties to apply when you
have multiple rules declared
on the same element.

26. • Don’t write multiple rules for the same element
• Inline styles
• Create a structured layering system to prevent
conflicts

27. Browser Defaults

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

29. Putting Modules
Together

30. Send

31. Cancel Send

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

33. Cancel Send

34. SendEmail

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

36. Send SubscribeEmail

37. http://snk.ms/26

38. • Separate layout from module
• Micro layout classes

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

40. <input><button>Send</button>
<button class=“u-margin-left-
small”>Subscribe</button>

41. Oh, right.
SMACSS.

49. Visualizing related
things makes it easier
to see disparities

50. Design has a cost.

51. Every piece of
design ends up in
code.

52. • Reduce the intersections
• Simplify selectors
• Need to be able to understand cascade
Pros

53. • Requires diligence
• No tooling
Cons

54. Atomic CSS/
Functional CSS

55. “Atomic CSS, like inline
styles, offers single-
purpose units of style,
but applied via classes.”

56. <div class="Bgc(#0280ae.5) C(#fff) P(20px)">
Lorem ipsum
</div>

57. Human-powered
CSS optimization

58. Optimizing CSS is
hard

59. • Need to know rendered HTML to know what CSS
will be applied
• Need to be able to know how HTML will change via
JavaScript
• Need to be able to understand cascade

60. JavaScript Eats
the World

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

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

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

64. • Styled Components
http://snk.ms/28
• CSS Modules
http://snk.ms/29

65. • Tooling avoids namespacing and cascade issues
• CSS embedded with JS allows easier visualization/
understanding of how the component and the styles for
the component are linked
• Bundling CSS and HTML with JS has potential for
cohesive understanding and enable optimization
• Automate what SMACSS/BEM does through convention
Pros

66. • Handling CSS’s state management at the JS level
can cause performance issues or require
workarounds
• Like everything else, the solutions don’t understand
the HTML and have no way to optimize
• Side effects when working outside of tooling
ecosystem
Cons

67. Web Components

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

69. • Web Components can be used across JavaScript
frameworks
GE did this: http://snk.ms/2a
• Shadow DOM avoids cascade and namespacing
issues
Pros

70. • No performance tooling (yet)
• For now, cross-browser support is spotty and
requires polyfills that don’t behave the same
Cons

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

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