CSS Application Architecture

Transcript

1. CSS Application Architecture @necolas

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

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

4. None

5. Framework… an implementation of an architecture that someone can use

   as the basis for a working application.
6. None

7. Toolkit / Library… a collection of pre-built patterns that can

   be assembled to create an application.
8. None

9. Making architectural decisions

10. Client / Agency work

11. None

12. I don’t need an architecture!

13. None
14. None

15. Long-lived product work

16. No clients to blame :(

17. Find the right problems

18. Clean code! …no

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

20. Dealing with change

21. Reducing helplessness

22. Communicate ways of thinking

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

    choose

24. 1. Single responsibility 2. Extension over modification 3. Composition over

    inheritance 4. Low coupling 5. Encapsulation 6. Documentation

25. Home Sidebar Tweetbox .home .sidebar .tweetbox { ... } .home

    .footer .listbox { ... } Footer Listbox

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

    } Footer Listbox

27. SUIT framework github.com/suitcss/suit

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

    } .avatar { ... } .text { ... } <article class="tweet"> ... <img class="avatar" ...> ... <p class="text">...</p> </article>

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

    utilities js-hookName
30. None

31. HTML example <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...>

    ... <p class="Tweet-text">...</p> </article>

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

    } /* State */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>

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

    } /* Descendant */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>

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

    } /* Modifier */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>

35. <article class="Tweet"> <a class="u-linkComplex" ...> ... <b class="u-linkComplex-target"> {user.name} </b>

    <span class="u-textMute"> {user.screenname} </span> </a> <p class="Tweet-text u-textBreak">...</p> ... </article>

36. <article class="Tweet"> <a class="u-linkComplex" ...> ... <b class="u-linkComplex-target"> {user.name} </b>

    <span class="u-textMute"> {user.screenname} </span> </a> <p class="Tweet-text u-textBreak">...</p> ... </article>

37. <article class="Tweet"> {{>partials/tweet_useridentity}} <div class="u-sizeFit"> {{>partials/tweet_text}} {{>partials/tweet_media}} {{>partials/tweet_actions}} </div> </article>

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

39. What about RWD?

40. bostonglobe.com

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

42. Restraint required

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

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

    ... }

45. Tooling

46. bower.io

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", ... } }
48. None

49. CSS preprocessing

50. Automatic vendor prefixes

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

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

53. CSS variables

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

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

56. Conformance checking

57. Nothing is perfect Nothing lasts Nothing is finished

58. Accept transience and imperfection

59. End