Slide 1
Slide 1 text
Nicolas Gallagher
@necolas
Thinking beyond
“Scalable CSS”
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Artwork by Adele Palmquist
Slide 4
Slide 4 text
Artwork by Rachel Schragis
Slide 5
Slide 5 text
CSS junkies
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
“We cannot solve our
problems with the same
thinking we used when we
created them.
Albert Einstein
Slide 8
Slide 8 text
Scalable UI design
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
UI components
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Tweet
(fragment tree)
Photo
(fragment tree)
Slide 14
Slide 14 text
Tweet
(rendered composite tree)
Slide 15
Slide 15 text
var $size = this.props.size;
var $src = this.props.src
var $content = this.props.content;
!
{$content}
Slide 16
Slide 16 text
// ui-Homepage/index.js
!
var Attribution = require('ui-Attribution');
var Photo = require('ui-Photo');
!
Half-Dome in Yosemite National Park
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
/** @define Photo */
!
/* root */
.Photo {}
!
/* modifier */
.Photo--large {}
!
/* private tree */
.Photo-crop {}
.Photo-caption {}
Slide 20
Slide 20 text
/** @define Photo; use strict */
!
/* root */
.Photo {}
!
/* modifier */
.Photo—-large .Attribution {}
!
/* private tree */
.Photo-crop {}
.Photo-caption {}
BUILD ERROR
postcss-bem-linter
Slide 21
Slide 21 text
// ui-Photo/index.js
!
// css-only dependencies
// (extracted by webpack)
require('suitcss-utils-display');
require('./index.css');
!
var Photo = function () {};
!
module.exports = Photo;
Slide 22
Slide 22 text
Architecture &
the file system
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
web_modules
├── character-counter
├── store-product
├── ui-Attribution
├── ui-Button
├── ui-HomePage
├── ui-Photo
├── ui-ProgressBar
└── ui-ReplyBox
Slide 25
Slide 25 text
web_modules
├── character-counter
├── store-product
├── ui-Attribution
├── ui-Button
├── ui-HomePage
├── ui-Photo
├── ui-ProgressBar
└── ui-ReplyBox
Slide 26
Slide 26 text
web_modules/ui-Photo
├── lib
├── test
├── index.css
├── index.js
├── OWNERS
└── README
Slide 27
Slide 27 text
web_modules/ui-Photo
├── lib
├── test
├── index.css
├── index.js
├── OWNERS
└── README
Slide 28
Slide 28 text
Empathy &
automation
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Artwork by npr
Slide 31
Slide 31 text
“…scientific and technical
work is made invisible by its
own success.
Bruno Latour (Sociologist of science)
Slide 32
Slide 32 text
Nicolas Gallagher
@necolas
Merci!