The purification of web development

The purification of web development

992c9c162c4c62ec0e2621b4f2206533?s=128

Nicolas Gallagher

May 30, 2013
Tweet

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