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.

Transcript

1. Nicolas Gallagher @necolas Thinking beyond “Scalable CSS”
3. Artwork by Adele Palmquist
4. Artwork by Rachel Schragis
5. CSS junkies
7. “We cannot solve our problems with the same thinking we used when we created them. Albert Einstein
8. Scalable UI design
11. UI components
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>
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
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
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!