The purification of web development

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