Slide 1
Slide 1 text
The modular
future of CSS
@rstacruz
Rico Sta. Cruz
ricostacruz.com
Subtitle here
Title goes here
ACTION 2
ACTION 1
ACTION
Single-line snackbar
60
Groceries:
almond milk
coconut water
cucumber
Campbell
Groceries:
almond milk
coconut water
cucumber
Trevor Hansen
Arial
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
1 4:15
One Day
DISABLED
DISABLED
Subtitle here
Title goes here
ACTION 2
ACTION 1
ACTION
Single-line snackbar
60
Campbell
Groceries:
almond milk
coconut water
cucumber
Campbell
Groceries:
almond milk
coconut water
cucumber
Trevor Hansen
Arial
Verdana
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
1 4:15
One Day
DISABLED
DISABLED
Slide 2
Slide 2 text
“
The world writes a lot
of front-end code.
Slide 3
Slide 3 text
The Tragedy of Hamlet,
Prince of Denmark
William Shakespeare
c. 1599–1602
Shakespeare's Hamlet took
up to 3 years to write.
Slide 4
Slide 4 text
Word count:
34 thousand words
(including footnotes,
copyright info, etc)
Shakespeare wrote a lot of
text for Hamlet.
Slide 5
Slide 5 text
So that's the case for
William Shakespeare.
Slide 6
Slide 6 text
What about your average
Front-end developer?
Slide 7
Slide 7 text
Show everything from $NAME
in this folder
filter it by lines added
count the number of words
git log --author=$NAME -c \
-- app/assets/stylesheets/ \
| grep -E '^\+ ' \
| wc -w
Let's inspect how one of my
coworkers wrote CSS code.
Slide 8
Slide 8 text
git log ... | grep | wc -w
43671= 1.25 Hamlets
One coworker wrote 1.25
Hamlets worth of CSS.
Slide 9
Slide 9 text
WordPress 4.6.1
Significant line of
code count
More than half our code
bases is front-end code.
PHP
165k lines
CSS
76k
JS
50k
Slide 10
Slide 10 text
Pinterest.com:
1.6MB of CSS. That's
47k lines of CSS code,
148k words of CSS.
That's around 4.3 Hamlets of
CSS code.
Slide 11
Slide 11 text
One Hamlet is roughly
equivalent of 10k lines of
CSS code, which, in my
experience, is the point
when CSS gets really
complicated.
Assuming around 3.2 words
per line.
Slide 12
Slide 12 text
The world writes,
and needs, a lot of
front-end code.
“
Slide 13
Slide 13 text
Just as much as
back-end code,
in fact.
“
Slide 14
Slide 14 text
Why isn't writing
CSS as well
thought-out as
programming?
“
Slide 15
Slide 15 text
Why do we seem
to lack standards
in front-end
coding?
“
Slide 16
Slide 16 text
Nah, we don't.
Don't worry.
”
Slide 17
Slide 17 text
@rstacruz
Rico Sta. Cruz
Slide 18
Slide 18 text
@rstacruz
The modular
future of CSS
Rico Sta. Cruz
ricostacruz.com
on
Slide 19
Slide 19 text
Before we talk about the
future, let's visit the past.
The evolution of modern CSS
Slide 20
Slide 20 text
1 9 9 0 –2 0 0 0
Slide 21
Slide 21 text
A long, long time ago...
Slide 22
Slide 22 text
In a galaxy far away...
Slide 23
Slide 23 text
HTML was written very
differently.
Slide 24
Slide 24 text
apple.com, circa 2004.
Notice the tables.
Slide 25
Slide 25 text
One of the first books that
talked about CSS positioning.
Zen Garden
Slide 26
Slide 26 text
2 0 0 3
Slide 27
Slide 27 text
Eventually people thought
differently.
Couldn't we use CSS to
separate content from
style?
“
Slide 28
Slide 28 text
People started separating
content from style.
Zen Garden
Slide 29
Slide 29 text
People started separating
content from style.
CO N TE NT
Zen Garden
h1 { font-weight: bold; color: #338899; font-face: Arial, sans-serif; } ST Y LE Zen GardenSlide 30
Slide 30 text
This used to be called "CSS
Positioning." Nowadays it's just "CSS."
"CSS positioning"
{
Slide 31
Slide 31 text
CSS tricks started to appear.
B EF ORE
div {
margin-left: 8px;
}
A FT E R
div {
margin-left: 8px;
}
A FT E R
Slide 32
Slide 32 text
CSS tricks started to appear.
B EF ORE
...
...
.container {
overflow: hidden;
}
.box {
float: left;
}
A FT E R
Slide 33
Slide 33 text
One of the first books that
talked about CSS positioning.
Designing with Web
Standards
2003
Slide 34
Slide 34 text
We were moving towards
separating concerns.
.html .css .js
Content Style Behavior
Slide 35
Slide 35 text
Take this component, for
example.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Slide 36
Slide 36 text
We started using classes to describe
content based on what they were.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Slide 37
Slide 37 text
We used the correct HTML tags based on
content, too.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Slide 38
Slide 38 text
This led to a movement of making your
markup "semantic."
"Semantic HTML"
<>
Slide 39
Slide 39 text
This led to a movement of making your
markup "semantic."
One problem—
no one knew how to
properly write CSS for
Semantic HTML.
<>
Slide 40
Slide 40 text
No one knew how to write
CSS for it, though.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
}
Slide 41
Slide 41 text
We took advantage of Sass, Less,
and other preprocessors.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
.image {
height: 240px;
background: $green;
}
}
Slide 42
Slide 42 text
You can nest indefinitely.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
.image { ... }
.text {
padding: 16px;
}
}
Slide 43
Slide 43 text
No one warned us about
nesting too much, though.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
.image { ... }
.text {
padding: 16px;
.heading {
font-size: 2em;
}
}
}
Slide 44
Slide 44 text
With more complicated
things like media queries...
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
.image { ... }
.text {
padding: 16px;
.heading {
font-size: 2em;
@media (min-width: 768px) {
font-size: 3em;
}
}
}
}
Slide 45
Slide 45 text
CSS became more and
more of a nightmare.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
.image { ... }
.text {
padding: 16px;
.heading {
font-size: 2em;
@media (min-width: 768px) {
font-size: 3em;
}
}
.subheading {
font-size: .9em;
}
}
}
Slide 46
Slide 46 text
Too much nesting can kill
your brain.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
.image { ... }
.text {
padding: 16px;
.heading {
font-size: 2em;
@media (min-width: 768px) {
font-size: 3em;
}
}
.subheading {
font-size: .9em;
@media (min-width: 768px) {
font-size: .95em;
}
}
}
}
Slide 47
Slide 47 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Before you know it, you've written a
Hamlet of CSS code.
.photo-card {
.image { ... }
.text {
padding: 16px;
.heading {
font-size: 2em;
@media (min-width: 768px) {
font-size: 3em;
}
}
.subheading {
font-size: .9em;
@media (min-width: 768px) {
font-size: .95em;
}
}
}
}
Too many lines,
too much CSS.
Slide 48
Slide 48 text
CSS is so
complicated.
“
Slide 49
Slide 49 text
What have we learned so far:
✓ Separate content and style. 2003
✗ Writing CSS properly is hard.
2003
Slide 50
Slide 50 text
2 0 0 9
Slide 51
Slide 51 text
Eventually people thought
differently.
Can we apply lessons
we've learned in
programming to CSS?
“
Slide 52
Slide 52 text
We started using classes to describe
content based on what they were.
Button Save
Delete
More info
Slide 53
Slide 53 text
This was very similar to some OOP patterns
that have been in use in programming.
class Button {
...
}
class SaveButton extends Button {
...
}
class DeleteButton extends Button {
...
}
"Object-oriented
Programming"
Slide 54
Slide 54 text
How about we apply the
same ideas to CSS?
Button Save
Delete
More info
class="button"
class="button button-delete"
class="button button-save"
class="button button-info"
PA RE N T
SUB - CL AS S
Slide 55
Slide 55 text
One of the first books that
talked about CSS positioning.
OOCSS: Object
Oriented CSS
Nicole Sullivan
2009
Slide 56
Slide 56 text
OOCSS tells us to build
components like Lego's.
Button
Text box
Campbell
Groceries:
almond milk
coconut water
cucumber
Abcdefghijklmno
Third
Second
First
"Lego's first"
Slide 57
Slide 57 text
OOCSS tells us to build
components like Lego's.
Button
Text box
Campbell
Groceries:
almond milk
coconut water
cucumber
Abcdefghijklmno
Third
Second
First
"Components
are like legos"
Slide 58
Slide 58 text
What have we learned so far:
✓ Separate content and style. 2003
✓ Create a component library. 2009
✗ Writing CSS properly is still hard.
2009
Slide 59
Slide 59 text
2 0 1 2
Slide 60
Slide 60 text
checkin-form
invoice-heading
invoice-table
book-button
Everything is a component in a component
in a component.
listing-page
listing-actions
Slide 61
Slide 61 text
"Sub-classing" is still a thing, though no one
seems to call it that.
Button Save
Delete
More info
CO M PO NENT
STAT ES
Slide 62
Slide 62 text
One of the first books that
talked about CSS positioning.
SMACSS: Scalable and
Modular Architecture
for CSS
2012
Slide 63
Slide 63 text
Modules was a way to think
of your UI in pieces.
"Modules"
listing-actions
Slide 64
Slide 64 text
Modules can have states.
"States"
Save
Delete
More info
Slide 65
Slide 65 text
Modules can have states.
"Layers"
Base
Layouts
Modules
States
button
{ font-family: sans-serif; }
.button-group > button
{ margin: 0 5px; }
.button
{ ... }
.button.delete
{ background: $red; }
Slide 66
Slide 66 text
What have we learned so far:
✓ Separate content and style. 2003
✓ Create a component library. 2011
✓ Everything is a component. 2012
✗ Writing CSS properly is still hard.
2012
Slide 67
Slide 67 text
2 0 1 3
Slide 68
Slide 68 text
We started turning them into
actual conventions.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Slide 69
Slide 69 text
Class names are based on
block, element and modifiers.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Block Element
.photo-card
.photo-card__photo
.photo-card__heading
.photo-card__subheading
.photo-card__description
.photo-card__description_long
.photo-card__description_short
.photo-card__action
Modifier
Slide 70
Slide 70 text
BEM was started as a convention for
these classnames.
BEM:
Block, Element, Modifier
2013
Slide 71
Slide 71 text
BEM offers a simple naming
convention for CSS classes.
.block-name__element-name_modifier
"Block, Element,
Modifier"
Slide 72
Slide 72 text
checkin-form
invoice-heading
invoice-table
book-button
A "block" is still a component,
same as before.
listing-page
listing-actions
Slide 73
Slide 73 text
Sass's ampersands made it
easy to write BEM.
&
Sass
ampersand
operator
Slide 74
Slide 74 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
&__image {
...
}
&__heading {
...
}
&__description {
...
}
&__actions {
...
}
}
BEM with Sass made CSS
very fun to write.
BEM wi t h SAS S
Slide 75
Slide 75 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card__image {
...
}
.photo-card__heading {
...
}
.photo-card__description {
...
}
.photo-card__actions {
...
}
The ampersand operator
removes redundancies.
O U T PU T
Slide 76
Slide 76 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
.photo-card {
&__image {
...
}
&__heading {
...
}
&__description {
...
}
&__actions {
...
}
}
The ampersand operator
removes redundancies.
BEM wi t h SAS S
Slide 78
Slide 78 text
What have we learned so far:
✓ Separate content and style. 2003
✓ Create a component library. 2011
✓ Everything is a component. 2012
✓ CSS conventions are extremely useful. 2013
✗ Writing CSS and markup properly is hard.
2013
Slide 79
Slide 79 text
2 0 1 4
Slide 80
Slide 80 text
Frontend JavaScript was just about
taking an interesting turn.
React.js: JavaScript
library for building
user interfaces
2014
Slide 81
Slide 81 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
var PhotoCard = React.createClass({
render () {
return
}
})
React let you write things in
nested components.
RE ACT. js
Slide 82
Slide 82 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Vue.component('PhotoCard', {
el: '#card-template'
})
<div>
<PhotoImage />
<PhotoHeading />
<PhotoDescription />
<PhotoActions />
</div>
So did Vue.js.
VU E .j s
Slide 83
Slide 83 text
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
{{photo-image}}
{{photo-heading}}
{{photo-description}}
{{photo-actions}}
So did Ember.js.
EM BE R .j s
Slide 84
Slide 84 text
Everything is a component
in the new world.
{
JavaScript
components
Slide 85
Slide 85 text
What have we learned so far:
✓ Separate content and style. 2003
✓ Create a component library. 2011
✓ Everything is a still component. 2012, 2014
✓ CSS conventions are extremely useful. 2013
✗ Writing CSS and markup properly is hard.
2014
Slide 86
Slide 86 text
2 0 1 5
Slide 87
Slide 87 text
Atomic Design is about thinking
about your UI in pieces.
Slide 88
Slide 88 text
Atomic Design is about thinking
about your UI in pieces.
Slide 89
Slide 89 text
Atomic Design is about thinking
about your UI in pieces.
Slide 90
Slide 90 text
Atomic Design is about thinking
about your UI in pieces.
Slide 91
Slide 91 text
Atomic Design is about thinking
about your UI in pieces.
Slide 92
Slide 92 text
In fact, Atomic Design tells us about
this design ideology.
Atomic Design
2015
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
All these ideas build on top of
one another.
Slide 95
Slide 95 text
One theme persists in all these ideas:
Slide 96
Slide 96 text
Everything is a component.
Subtitle here
Title goes here
ACTION 2
ACTION 1
Subtitle here
Title goes here
ACTION 2
ACTION 1
ACTION
Single-line snackbar
60
ACTION
Single-line snackbar
60
Campbell
Groceries:
almond milk
coconut water
cucumber
Campbell
Groceries:
almond milk
coconut water
cucumber
Trevor Hansen
Verdana
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
1 4:15
One Day 1 4:15
One Day
1 4:15
One Day
DISABLED
DISABLED
Subtitle here
Title goes here
ACTION 2
ACTION 1
Subtitle here
Title goes here
ACTION 2
ACTION 1
ACTION
Single-line snackbar
60
Campbell
Groceries:
almond milk
coconut water
cucumber
Campbell
Groceries:
almond milk
coconut water
cucumber
Trevor Hansen
Verdana
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
1 4:15
One Day 1 4:15
One Day
1 4:15
One Day
DISABLED
DISABLED Subtitle here
Title goes here
ACTION 2
ACTION 1
Single-line snackba
60
Groceries:
almond m
coconut w
Slide 97
Slide 97 text
What's next?
Slide 98
Slide 98 text
What have we learned so far:
✓ Separate content and style. 2003
✓ Create a component library. 2011
✓ Everything is a component. 2012
✓ CSS conventions are extremely useful. 2013
✗ Writing CSS and markup properly is hard.
Slide 99
Slide 99 text
Shakespeare's Hamlet took
up to 3 years to write.
RSCSS: Reasonable
System for CSS
Stylesheet Structure
2015
http://rscss.io
Slide 100
Slide 100 text
Just like with all other
CSS systems.
Everything
is made with
components.
Slide 101
Slide 101 text
Remember this
example component?
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
Slide 102
Slide 102 text
RSCSS class names are still
"semantic" style.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
...
...
...
...
Slide 103
Slide 103 text
The CSS structure mirrors
the HTML structure.
UIIUIUIN UIIUNIUN
UIUNUN INU UINUIU
> .image {
... }
> .heading { ... }
> .description { ... }
> .actions { ... }
.photo-card {
}
Slide 104
Slide 104 text
Slide 105
Slide 105 text
These words are separated
with a hyphen.
.two-words
Components
are always two or
more words.
Rule No. 1—
Slide 106
Slide 106 text
If it needs to be more than one word,
don't use underscores or hyphens.
.button
Elements
are always one
word.
Rule No. 2—
Slide 107
Slide 107 text
This differentiates it from
components and elements.
.-small
Variants
begin with a
hyphen.
Rule No. 3—
Slide 108
Slide 108 text
This is a good idea, let me
explain later.
>
Use the child
descendant
selector.
Rule No. 4—
Slide 109
Slide 109 text
.photo-card
Components
.image
> .-large
Elements Variants
This way, we remove ambiguity on
the meaning of class names.
.search-box .field
> .-selected
.audio-controls .button
> .-play
Slide 110
Slide 110 text
Here's a simple component.
.button-box { ... }
Slide 111
Slide 111 text
We'll probably write it with a variant.
.button-box {
&.-small {
...
}
}
Slide 112
Slide 112 text
That component is part of a
bigger component.
Slide 113
Slide 113 text
That component has more elements.
...
Slide 114
Slide 114 text
The CSS mirrors the HTML structure.
.callout-box {
> .image { ... }
> .text { ... }
> .text > .heading { ... }
}
Slide 115
Slide 115 text
Organize your components per file.
.callout-box {
> .image { ... }
> .text { ... }
> .text > .heading { ... }
}
callout-box.scss
• • •
One component
per CSS file.
Rule No. 5—
Slide 116
Slide 116 text
.callout-box {
> .image { ... }
> .text { ... }
> .text > .heading { ... }
}
callout-box.scss
• • •
This makes it easy to include them all.
One component
per CSS file.
Rule No. 5—
@import 'components/*';
application.scss
• • •
Slide 117
Slide 117 text
Let's look at an example
of how we would write RSCSS.
Slide 118
Slide 118 text
.nav-bar
Component
Slide 119
Slide 119 text
.nav-bar
.logo
Nested
components
Slide 120
Slide 120 text
.nav-bar
.logo
.search-bar
Nested
components
Slide 121
Slide 121 text
.nav-bar
.logo
.search-bar
.nav-links
Nested
components
Slide 122
Slide 122 text
.nav-bar
.logo
.search-bar
.nav-links
.user-links
Nested
components
Slide 123
Slide 123 text
.project-header
Slide 124
Slide 124 text
.project-nav
Slide 125
Slide 125 text
.project-nav
> .tab
Elements
Slide 126
Slide 126 text
.project-nav
> .tab.-active
Variants
Slide 127
Slide 127 text
.project-overview
Slide 128
Slide 128 text
.project-toolbar
.left
.right
Layouts
Slide 129
Slide 129 text
.button-group
Layouts
Slide 130
Slide 130 text
rscss.io
Slide 131
Slide 131 text
Everything is a
component.
“
That's our most important
lesson from all these ideas.
Slide 132
Slide 132 text
Where do we go from here?
Slide 133
Slide 133 text
One of the first books that
talked about CSS positioning.
Web Components
and Shadow DOM
w3.org
www.w3.org/wiki/WebComponents/
Slide 134
Slide 134 text
h3 {
color: red !important;
}
People started separating
content from style.
warning.html
index.html
Warning!
Don't try this at home.
Slide 135
Slide 135 text
There's a proposal to make CSS
components easier.
CSS @scope
Proposal
w3.org
www.w3.org/TR/css-scoping-1/
Slide 136
Slide 136 text
@scope .user-profile {
...
}
CSS scoping lets you write CSS without
components bleeding into other components.
Slide 137
Slide 137 text
Always think in
components.
@rstacruz
Rico Sta. Cruz
ricostacruz.com
Subtitle here
Title goes here
ACTION 2
ACTION 1
ACTION
Single-line snackbar
60
Groceries:
almond milk
coconut water
cucumber
Campbell
Groceries:
almond milk
coconut water
cucumber
Trevor Hansen
Arial
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
1 4:15
One Day
DISABLED
DISABLED
Subtitle here
Title goes here
ACTION 2
ACTION 1
ACTION
Single-line snackbar
60
Campbell
Groceries:
almond milk
coconut water
cucumber
Campbell
Groceries:
almond milk
coconut water
cucumber
Trevor Hansen
Arial
Verdana
Courier
Calibri
Arial
Verdana
Courier
Calibri
Arial
1 4:15
One Day
DISABLED
DISABLED