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”
   

   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