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

    View Slide

  2. Nicolas Gallagher
    @necolas

    View Slide

  3. Before code…

    View Slide

  4. Assumptions and the history of ideas

    View Slide

  5. Heraclitus (535 BC – 475 BC)

    View Slide

  6. View Slide

  7. Democritus (460 BC – 370 BC)

    View Slide

  8. View Slide

  9. View Slide

  10. “You cannot step twice into the same
    river; for fresh waters are flowing in
    upon you.”
    – Heraclitus

    View Slide

  11. CSS and the purification of HTML

    View Slide










  12. View Slide

  13. “To increase the granularity of control
    over elements, a new attribute has been
    added to HTML: 'CLASS'.”
    - CSS1 spec

    View Slide

  14. View Slide

  15. Don’t use “unsemantic” class names?

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  19. Class names are for us, not machines

    View Slide

  20. We can pick our own meaning

    View Slide

  21. Don't write ugly class names?

    View Slide




  22. View Slide

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

    View Slide

  24. /* Component */
    .Button {…}
    /* Component modifier */
    .Button--primary {…}
    /* Component */
    .ButtonGroup {…}
    /* Component descendant */
    .ButtonGroup-item {…}

    View Slide





  25. Save




    Cancel



    View Slide

  26. View Slide

  27. github.com/necolas/suit-button-group

    View Slide

  28. github.com/necolas/suit

    View Slide

  29. Structured class names are useful

    View Slide

  30. Don’t use extra elements?

    View Slide






  31. Close



    ...

    View Slide



  32. {{> partials/close-button }}

    {{$content}}{{/content}}

    View Slide

  33. {{{{$content}}
    Title
    Some words
    {{/content}}
    {{/box_with_close}}

    View Slide

  34. Look at what they make you give

    View Slide

  35. Web Components

    View Slide

  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

    View Slide

  37. “…specify the extra presentation using
    markup…”
    - W3C Introduction to Web Components

    View Slide

  38. View Slide

  39. Encapsulation, interoperability, reuse

    View Slide

  40. Shadow DOM
    Encapsulation and DOM boundaries

    Custom elements; extend native elements

    Clonable, inert DOM fragments

    View Slide



  41. <br/>@host { /* css to unstyle button */ }<br/>.visHidden { /* css to hide text */ }<br/>





    // javascript

    View Slide

  42. Close

    View Slide

  43. View Slide

  44. It’s ok to rely on extra elements

    View Slide

  45. Step back into the river

    View Slide

  46. The end

    View Slide