O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

The Future is Modular, Jonathan Snook

773 visualizações

Publicada em

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.

Publicada em: Design
  • Seja o primeiro a comentar

The Future is Modular, Jonathan Snook

  1. 1. The Future is Modular
  2. 2. 2003 CSS Takes Off
  3. 3. Wired Redesign
  4. 4. Blog Design
  5. 5. 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: … }
  6. 6. 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: … }
  7. 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. 8. SMACSS
  9. 9. Scalable and Modular Architecture for CSS
  10. 10. • 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.
  11. 11. What does it mean to be modular?
  12. 12. A module is “each of a set of standardized parts or independent units that can be used to construct a more complex structure.” –Dictionary
  13. 13. What hurdles are there to being truly independent?
  14. 14. • Inheritance
 • Cascade
 • Browser Default Styling
 • Putting modules/components together
  15. 15. Inheritance
  16. 16. • Typography
 e.g. color, font-size, font-family
 • List Styles
 e.g. list-style
 • Table Styles 
 e.g. border-collapse
  17. 17. Sorry, React. Inline styles won’t save you from inheritance.
  18. 18. • all: initial
  19. 19. Cascade
  20. 20. The cascade is how the browser decides what properties to apply when you have multiple rules declared on the same element.
  21. 21. • Don’t write multiple rules for the same element
 • Inline styles
 • Create a structured layering system to prevent conflicts
  22. 22. Browser Defaults
  23. 23. <button class="button"> .button {
 border:1px solid purple;
 padding: 5px 10px;
 color: pink;
 } <a href="/" class="button"> text-decoration: none;
  24. 24. • all: initial
 • Predictable HTML
 i.e. templates
  25. 25. Putting Modules Together
  26. 26. Send
  27. 27. Cancel Send
  28. 28. .button + .button { 
 margin-left: 10px; 
 }
  29. 29. Cancel Send
  30. 30. SendEmail
  31. 31. .button + .button,
 .input + .button { 
 margin-left: 10px; 
 } * + * { 
 margin-left: 10px; 
 }
  32. 32. Send SubscribeEmail
  33. 33. http://snk.ms/26
  34. 34. • Separate layout from module
 • Micro layout classes
  35. 35. <span class=“layout-inline”> <input><button>Send</button> </span> <span class=“layout-inline”> <button>Subscribe</button> </span>
  36. 36. <input><button>Send</button> <button class=“ML-S”>Subscribe</ button>
  37. 37. BONUS PROBLEM! Media Queries
  38. 38. If Module A 
 in Module B 
 in Layout C 
 Then I’m screwed.
  39. 39. If Module A has room
 do this.
  40. 40. Element Queries
  41. 41. Element Queries
  42. 42. Oh, right. SMACSS.
  43. 43. Design has a cost.
  44. 44. Every piece of design ends up in code.
  45. 45. • Categorize
 • Naming Convention
  46. 46. Base Layout Module State Theme
  47. 47. • .btn • .btn--variation • .btn__component • .btn • &--variation • &__component • button.css • .variation • .component SMACSS-y BEM Sass CSS Modules/React • .btn • .btn-variation • .btn--component
  48. 48. HTML CSS JavaScript HTML CSS JavaScript HTML CSS JavaScript
  49. 49. React and Inline Styles
  50. 50. React.render( <XUIButton type={type}> My Button! </XUIButton> );
  51. 51. var XUIButton = React.createClass({ render: function() { return ( <button className="{this.props.type}"> {this.props.children} </button> ); } });
  52. 52. var myStyle = { color: '#FFF', backgroundColor: '#330000' } var XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }
  53. 53. HTML CSS JavaScript HTML CSS JavaScript HTML CSS JavaScript
  54. 54. The Future: Web Components
  55. 55. • Templates
 • Shadow DOM
 • Custom Elements
 • HTML Imports
  56. 56. var p = document.createElement(‘p'); p.createShadowRoot(); p.shadowRoot.innerHTML = 'HTML Contents'; document.body.appendChild(p);
  57. 57. • The Cascade no longer applies
 • Inheritance still applies 
 (unless you use all:initial)
  58. 58. HTML CSS JavaScript
  59. 59. HTML CSS JavaScript component.html <link rel="import" 
 href="component.html">
  60. 60. <template> <figure> <content select="img"></content> </figure> <div> <content></content> </div> </template>
  61. 61. <custom-element> <img src="…"> </custom-element>
  62. 62. // 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);
  63. 63. • Likely a year before all browsers support everything.
 • JavaScript Dependent
 • Phillip Walton’s Talk on Modular CSS with Web Components 
 http://snk.ms/27
  64. 64. • Think about standardized and modular design.
 • Frameworks like React can help.
 • Web Components are coming. (So is winter.)
  65. 65. Thank you.
 http://snook.ca/
 @snookca

×