CSS Application Architecture

An introduction to the aims and design of the SUIT framework

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.
5. Framework… an implementation of an architecture that someone can use as the basis for a working application.
7. Toolkit / Library… a collection of pre-built patterns that can be assembled to create an application.
9. Making architectural decisions
10. Client / Agency work
12. I don’t need an architecture!
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
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", ... } }
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