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. 1. Single responsibility 2. Extension over modification 3. Composition over

    inheritance 4. Low coupling 5. Encapsulation 6. Documentation
  2. Home Sidebar Tweetbox .home .sidebar .tweetbox { ... } .home

    .footer .listbox { ... } Footer Listbox
  3. Web Component-y .tweet { /* make it look good */

    } .avatar { ... } .text { ... } <article class="tweet"> ... <img class="avatar" ...> ... <p class="text">...</p> </article>
  4. .Tweet { ... } /* Component */ .Tweet.is-favorited { ...

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

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

    } /* Modifier */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>
  7. <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>
  8. <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>
  9. 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
  10. # 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", ... } }
  11. End