Save 37% off PRO during our Black Friday Sale! »

CSS Application Architecture

CSS Application Architecture

An introduction to the aims and design of the SUIT framework

992c9c162c4c62ec0e2621b4f2206533?s=128

Nicolas Gallagher

September 10, 2013
Tweet

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