Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Application Architecture

CSS Application Architecture

An introduction to the aims and design of the SUIT framework

Nicolas Gallagher

September 10, 2013
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

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