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. 2.
  2. 6.
  3. 7.

    “We cannot solve our problems with the same thinking we

    used when we created them. Albert Einstein
  4. 9.
  5. 10.
  6. 12.
  7. 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>
  8. 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>
  9. 17.
  10. 18.
  11. 19.

    /** @define Photo */ ! /* root */ .Photo {}

    ! /* modifier */ .Photo--large {} ! /* private tree */ .Photo-crop {} .Photo-caption {}
  12. 20.

    /** @define Photo; use strict */ ! /* root */

    .Photo {} ! /* modifier */ .Photo—-large .Attribution {} ! /* private tree */ .Photo-crop {} .Photo-caption {} BUILD ERROR postcss-bem-linter
  13. 21.

    // ui-Photo/index.js ! // css-only dependencies // (extracted by webpack)

    require('suitcss-utils-display'); require('./index.css'); ! var Photo = function () {}; ! module.exports = Photo;
  14. 23.
  15. 24.

    web_modules ├── character-counter ├── store-product ├── ui-Attribution ├── ui-Button ├──

    ui-HomePage ├── ui-Photo ├── ui-ProgressBar └── ui-ReplyBox
  16. 25.

    web_modules ├── character-counter ├── store-product ├── ui-Attribution ├── ui-Button ├──

    ui-HomePage ├── ui-Photo ├── ui-ProgressBar └── ui-ReplyBox
  17. 29.
  18. 31.

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

    success. Bruno Latour (Sociologist of science)