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.

992c9c162c4c62ec0e2621b4f2206533?s=128

Nicolas Gallagher

November 17, 2014
Tweet

Transcript

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

  2. None
  3. Artwork by Adele Palmquist

  4. Artwork by Rachel Schragis

  5. CSS junkies

  6. None
  7. “We cannot solve our problems with the same thinking we

    used when we created them. Albert Einstein
  8. Scalable UI design

  9. None
  10. None
  11. UI components

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

  14. Tweet (rendered composite tree)

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

    = this.props.content; ! <figure class="Photo {'Photo--' + $size}"> <span class="Photo-crop u-block"> <img src="{$src}" alt="" /> </span> <figcaption class="Photo-caption"> {$content} </figcaption> </figure>
  16. // ui-Homepage/index.js ! var Attribution = require('ui-Attribution'); var Photo =

    require('ui-Photo'); ! <Photo src="photo.jpg" size="large"> Half-Dome in Yosemite National Park <Attribution owner="necolas" /> </Photo>
  17. None
  18. None
  19. /** @define Photo */ ! /* root */ .Photo {}

    ! /* modifier */ .Photo--large {} ! /* private tree */ .Photo-crop {} .Photo-caption {}
  20. /** @define Photo; use strict */ ! /* root */

    .Photo {} ! /* modifier */ .Photo—-large .Attribution {} ! /* private tree */ .Photo-crop {} .Photo-caption {} BUILD ERROR postcss-bem-linter
  21. // ui-Photo/index.js ! // css-only dependencies // (extracted by webpack)

    require('suitcss-utils-display'); require('./index.css'); ! var Photo = function () {}; ! module.exports = Photo;
  22. Architecture & the file system

  23. None
  24. web_modules ├── character-counter ├── store-product ├── ui-Attribution ├── ui-Button ├──

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

    ui-HomePage ├── ui-Photo ├── ui-ProgressBar └── ui-ReplyBox
  26. web_modules/ui-Photo ├── lib ├── test ├── index.css ├── index.js ├──

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

    OWNERS └── README
  28. Empathy & automation

  29. None
  30. Artwork by npr

  31. “…scientific and technical work is made invisible by its own

    success. Bruno Latour (Sociologist of science)
  32. Nicolas Gallagher @necolas Merci!