Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The purification of web development

The purification of web development

Nicolas Gallagher

May 30, 2013
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

Transcript

  1. The purification of web development

  2. Nicolas Gallagher @necolas

  3. Before code…

  4. Assumptions and the history of ideas

  5. Heraclitus (535 BC – 475 BC)

  6. None
  7. Democritus (460 BC – 370 BC)

  8. None
  9. None
  10. “You cannot step twice into the same river; for fresh

    waters are flowing in upon you.” – Heraclitus
  11. CSS and the purification of HTML

  12. <table> <tr> <td align="left" onClick="dothing()"> <center> <font face="verdana">…</font> </center> </td>

    </tr> </table>
  13. “To increase the granularity of control over elements, a new

    attribute has been added to HTML: 'CLASS'.” - CSS1 spec
  14. None
  15. Don’t use “unsemantic” class names?

  16. “Your HTML, like diamonds, should be forever.” - camendesign.com

  17. “…authors are encouraged to use [class attribute] values that describe

    the nature of the content, rather than values that describe the desired presentation of the content.” - HTML5 spec
  18. “A structure based on CLASS is only useful within a

    restricted domain, where the meaning of a class has been mutually agreed upon.” - CSS1 spec
  19. Class names are for us, not machines

  20. We can pick our own meaning

  21. Don't write ugly class names?

  22. <p class="hyphens-as-word-separators"> … </p>

  23. /* Component */ .button {…} /* Component */ .button-group {…}

    /* Component modifier */ .button.primary {…} /* Component child */ .button-group .item {…}
  24. /* Component */ .Button {…} /* Component modifier */ .Button--primary

    {…} /* Component */ .ButtonGroup {…} /* Component descendant */ .ButtonGroup-item {…}
  25. <!-- HTML --> <ul class="ButtonGroup"> <li class="ButtonGroup-item"> <button class="Button"> Save

    </button> </li> <li class="ButtonGroup-item"> <button class="Button Button--cancel"> Cancel </button> </li> </ul>
  26. None
  27. github.com/necolas/suit-button-group

  28. github.com/necolas/suit

  29. Structured class names are useful

  30. Don’t use extra elements?

  31. <article class="Box"> <div class="Box-close"> <button class="u-textLike js-close"> <span class="Icon Icon--close"></span>

    <span class="u-isHiddenVisually"> Close </span> </button> </div> ... </article>
  32. <article class="Box"> <div class="Box-close"> {{> partials/close-button }} </div> {{$content}}{{/content}} </article>

  33. {{<box_with_close}} {{$content}} <h1>Title</h1> <p>Some words</p> {{/content}} {{/box_with_close}}

  34. Look at what they make you give

  35. Web Components

  36. “Web Components…let web application authors define widgets with a level

    of visual richness not possible with CSS alone” - W3C Introduction to Web Components
  37. “…specify the extra presentation using markup…” - W3C Introduction to

    Web Components
  38. None
  39. Encapsulation, interoperability, reuse

  40. Shadow DOM Encapsulation and DOM boundaries <element> Custom elements; extend

    native elements <template> Clonable, inert DOM fragments
  41. <element extends="button" name="x-btnClose"> <template> <style> @host { /* css to

    unstyle button */ } .visHidden { /* css to hide text */ } </style> <x-icon type="close" size="24"></x-icon> <div class="visHidden"> <content></content> </div> </template> <script>// javascript</script> </element>
  42. <button is="x-btnClose">Close</button>

  43. None
  44. It’s ok to rely on extra elements

  45. Step back into the river

  46. The end