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

Thinking beyond "Scalable CSS"

Thinking beyond "Scalable CSS"

Good components empower designers and engineers by letting us think only about their inputs and outputs, not their internal complexity. This is how we are working to scale our web UI work at Twitter, and to think about CSS within this model of design and development.

Nicolas Gallagher

November 17, 2014
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

Transcript

  1. Nicolas Gallagher
    @necolas
    Thinking beyond
    “Scalable CSS”

    View Slide

  2. View Slide

  3. Artwork by Adele Palmquist

    View Slide

  4. Artwork by Rachel Schragis

    View Slide

  5. CSS junkies

    View Slide

  6. View Slide

  7. “We cannot solve our
    problems with the same
    thinking we used when we
    created them.
    Albert Einstein

    View Slide

  8. Scalable UI design

    View Slide

  9. View Slide

  10. View Slide

  11. UI components

    View Slide

  12. View Slide

  13. Tweet
    (fragment tree)
    Photo
    (fragment tree)

    View Slide

  14. Tweet
    (rendered composite tree)

    View Slide

  15. var $size = this.props.size;
    var $src = this.props.src
    var $content = this.props.content;
    !





    {$content}


    View Slide

  16. // ui-Homepage/index.js
    !
    var Attribution = require('ui-Attribution');
    var Photo = require('ui-Photo');
    !

    Half-Dome in Yosemite National Park


    View Slide

  17. View Slide

  18. View Slide

  19. /** @define Photo */
    !
    /* root */
    .Photo {}
    !
    /* modifier */
    .Photo--large {}
    !
    /* private tree */
    .Photo-crop {}
    .Photo-caption {}

    View Slide

  20. /** @define Photo; use strict */
    !
    /* root */
    .Photo {}
    !
    /* modifier */
    .Photo—-large .Attribution {}
    !
    /* private tree */
    .Photo-crop {}
    .Photo-caption {}
    BUILD ERROR
    postcss-bem-linter

    View Slide

  21. // ui-Photo/index.js
    !
    // css-only dependencies
    // (extracted by webpack)
    require('suitcss-utils-display');
    require('./index.css');
    !
    var Photo = function () {};
    !
    module.exports = Photo;

    View Slide

  22. Architecture &
    the file system

    View Slide

  23. View Slide

  24. web_modules
    ├── character-counter
    ├── store-product
    ├── ui-Attribution
    ├── ui-Button
    ├── ui-HomePage
    ├── ui-Photo
    ├── ui-ProgressBar
    └── ui-ReplyBox

    View Slide

  25. web_modules
    ├── character-counter
    ├── store-product
    ├── ui-Attribution
    ├── ui-Button
    ├── ui-HomePage
    ├── ui-Photo
    ├── ui-ProgressBar
    └── ui-ReplyBox

    View Slide

  26. web_modules/ui-Photo
    ├── lib
    ├── test
    ├── index.css
    ├── index.js
    ├── OWNERS
    └── README

    View Slide

  27. web_modules/ui-Photo
    ├── lib
    ├── test
    ├── index.css
    ├── index.js
    ├── OWNERS
    └── README

    View Slide

  28. Empathy &
    automation

    View Slide

  29. View Slide

  30. Artwork by npr

    View Slide

  31. “…scientific and technical
    work is made invisible by its
    own success.
    Bruno Latour (Sociologist of science)

    View Slide

  32. Nicolas Gallagher
    @necolas
    Merci!

    View Slide