Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jonathan Snook - Falling to pieces: the componentization of the web

245 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Jonathan Snook - Falling to pieces: the componentization of the web

  1. 1. Falling to Pieces The Componentization
 of the Web
  2. 2. Style is important.
  3. 3. Thinking in Pages
  4. 4. Wired Redesign
  5. 5. Blog Design
  6. 6. #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: … }
  7. 7. OOCSS, SMACSS, BEM
  8. 8. What does it mean to be modular?
  9. 9. A module is “each of a set of standardized parts or independent units that can be used to construct a more complex structure.” –Dictionary
  10. 10. What hurdles are there to being truly independent?
  11. 11. • Inheritance
 • Cascade
 • Browser Default Styling
 • Putting modules/components together
  12. 12. Inheritance
  13. 13. • Typography
 e.g. color, font-size, font-family
 • List Styles
 e.g. list-style
 • Table Styles 
 e.g. border-collapse
  14. 14. • A Good Thing ™
  15. 15. Cascade
  16. 16. The cascade is how the browser decides what properties to apply when you have multiple rules declared on the same element.
  17. 17. • Don’t write multiple rules for the same element
 • Inline styles
 • Create a structured layering system to prevent conflicts
  18. 18. Browser Defaults
  19. 19. <button class="button"> .button {
 border:1px solid purple;
 padding: 5px 10px;
 color: pink;
 } <a href="/" class="button"> text-decoration: none;
  20. 20. Putting Modules Together
  21. 21. Send
  22. 22. Cancel Send
  23. 23. .button + .button { 
 margin-left: 10px; 
 }
  24. 24. Cancel Send
  25. 25. SendEmail
  26. 26. .button + .button,
 .input + .button { 
 margin-left: 10px; 
 } * + * { 
 margin-left: 10px; 
 }
  27. 27. Send SubscribeEmail
  28. 28. http://snk.ms/26
  29. 29. • Separate layout from module
 • Micro layout classes
  30. 30. <span class=“layout-inline”> <input><button>Send</button> </span> <span class=“layout-inline”> <button>Subscribe</button> </span>
  31. 31. <input><button>Send</button> <button class=“u-margin-left- small”>Subscribe</button>
  32. 32. Oh, right. SMACSS.
  33. 33. Visualizing related things makes it easier to see disparities
  34. 34. Design has a cost.
  35. 35. Every piece of design ends up in code.
  36. 36. • Reduce the intersections
 • Simplify selectors
 • Need to be able to understand cascade Pros
  37. 37. • Requires diligence
 • No tooling
 Cons
  38. 38. Atomic CSS/ Functional CSS
  39. 39. “Atomic CSS, like inline styles, offers single- purpose units of style, but applied via classes.”
  40. 40. <div class="Bgc(#0280ae.5) C(#fff) P(20px)"> Lorem ipsum </div>
  41. 41. Human-powered CSS optimization
  42. 42. Optimizing CSS is hard
  43. 43. • 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
  44. 44. JavaScript Eats the World
  45. 45. React.render( <XUIButton type={type}> My Button! </XUIButton> );
  46. 46. var XUIButton = React.createClass({ render: function() { return ( <button className="{this.props.type}"> {this.props.children} </button> ); } });
  47. 47. var myStyle = { color: '#FFF', backgroundColor: '#330000' } var XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }
  48. 48. • Styled Components 
 http://snk.ms/28
 • CSS Modules
 http://snk.ms/29
  49. 49. • 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
  50. 50. • 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
  51. 51. Web Components
  52. 52. • Templates
 • Shadow DOM
 • Custom Elements
 • HTML Imports
  53. 53. • Web Components can be used across JavaScript frameworks
 GE did this: http://snk.ms/2a
 • Shadow DOM avoids cascade and namespacing issues Pros
  54. 54. • No performance tooling (yet)
 • For now, cross-browser support is spotty and requires polyfills that don’t behave the same Cons
  55. 55. • Think about standardized and modular design.
 • Frameworks like React can help.
 • Web Components are coming. (So is winter.)
  56. 56. Thank you.
 http://snook.ca/
 @snookca

×