CSS Application Architecture

An introduction to the aims and design of the SUIT framework

Transcript

1. CSS Application Architecture
   @necolas
   

   View Slide

2. What’s the difference between
   “Architecture”, “Framework”,
   and “Toolkit”?
   

   View Slide

3. Architecture…
   a plan about how to structure an
   application.
   

   View Slide

4. View Slide

5. Framework…
   an implementation of an architecture that
   someone can use as the basis for a
   working application.
   

   View Slide

6. View Slide

7. Toolkit / Library…
   a collection of pre-built patterns that can
   be assembled to create an application.
   

   View Slide

8. View Slide

9. Making architectural decisions
   

   View Slide

10. Client / Agency work
    

    View Slide

11. View Slide

12. I don’t need an architecture!
    

    View Slide

13. View Slide

14. View Slide

15. Long-lived product work
    

    View Slide

16. No clients to blame :(
    

    View Slide

17. Find the right problems
    

    View Slide

18. Clean code! …no
    

    View Slide

19. “Does he ever think of anything
    rbut himself?”
    

    View Slide

20. Dealing with change
    

    View Slide

21. Reducing helplessness
    

    View Slide

22. Communicate ways of thinking
    

    View Slide

23. The freest human is the one
    who never has to choose
    

    View Slide

24. 1. Single responsibility
    2. Extension over modification
    3. Composition over inheritance
    4. Low coupling
    5. Encapsulation
    6. Documentation
    

    View Slide

25. Home Sidebar Tweetbox
    .home .sidebar .tweetbox { ... }
    .home .footer .listbox { ... }
    Footer Listbox
    

    View Slide

26. Home Sidebar Tweetbox
    .tweetbox { ... }
    .listbox { ... }
    Footer Listbox
    

    View Slide

27. SUIT framework
    github.com/suitcss/suit
    

    View Slide

28. Web Component-y
    .tweet { /* make it look good */ }
    .avatar { ... }
    .text { ... }
    
    ...
    
    ...
    ...
    
    

    View Slide

29. # utilities
    u-utilityName
    # components
    ComponentName
    ComponentName--modifierName
    ComponentName-descendantName
    # js utilities
    js-hookName
    

    View Slide

30. View Slide

31. HTML example
    
    ...
    
    ...
    ...
    
    

    View Slide

32. .Tweet { ... } /* Component */
    .Tweet.is-favorited { ... } /* State */
    
    ...
    
    ...
    ...
    
    

    View Slide

33. .Tweet { ... } /* Component */
    .Tweet-text { ... } /* Descendant */
    
    ...
    
    ...
    ...
    
    

    View Slide

34. .Avatar { ... } /* Component */
    .Avatar--large { ... } /* Modifier */
    
    ...
    
    ...
    ...
    
    

    View Slide

35. 
    
    ...
    
    {user.name}
    
    
    {user.screenname}
    
    
    ...
    ...
    
    

    View Slide

36. 
    
    ...
    
    {user.name}
    
    
    {user.screenname}
    
    
    ...
    ...
    
    

    View Slide

37. 
    {{>partials/tweet_useridentity}}
    
    {{>partials/tweet_text}}
    {{>partials/tweet_media}}
    {{>partials/tweet_actions}}
    
    
    

    View Slide

38. user-fullname="{{user.fullname}}"
    user-screenname="{{user.screenname}}"
    user-avatar="{{user.avatar}}"
    show-actions
    show-media>
    {{text}}
    
    

    View Slide

39. What about RWD?
    

    View Slide

40. bostonglobe.com
    

    View Slide

41. 92 separate @media directives
    27 different width values
    380
    480
    481
    600
    620
    639
    640
    700
    750
    768
    788
    799
    800
    809
    810
    900
    930
    931
    960
    980
    1024
    1050
    1100
    1200
    1210
    1220
    1400
    

    View Slide

42. Restraint required
    

    View Slide

43. @import
    “component/grid-v1.css”;
    @import
    “component/grid-v2.css”
    (min-width: 20em);
    @import
    “component/grid-v3.css”
    (min-width: 50em);
    

    View Slide

44. .v1-u-size1of2 { ... }
    .v2-u-size1of4 { ... }
    .v3-u-size1of6 { ... }
    

    View Slide

45. Tooling
    

    View Slide

46. bower.io
    

    View Slide

47. # bower.json
    {
    "name": "my-app",
    "dependencies": {
    "normalize-css": "~2.1.0",
    "suit-utils": "~0.6.0",
    "suit-button": "~2.0.0”,
    "suit-grid": "~0.2.0",
    ...
    }
    }
    

    View Slide

48. View Slide

49. CSS preprocessing
    

    View Slide

50. Automatic vendor prefixes
    

    View Slide

51. .Button {
    background: linear-gradient(…);
    }
    

    View Slide

52. .Button {
    background: -webkit-linear-gradient(…);
    background: linear-gradient(…);
    }
    

    View Slide

53. CSS variables
    

    View Slide

54. :root {
    var-button-bg: linear-gradient(…);
    }
    .Button {
    background: var(button-bg);
    }
    

    View Slide

55. .Button {
    background: linear-gradient(…);
    }
    

    View Slide

56. Conformance checking
    

    View Slide

57. Nothing is perfect
    Nothing lasts
    Nothing is finished
    

    View Slide

58. Accept transience and
    imperfection
    

    View Slide

59. End
    

    View Slide