Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Future is In Pieces
Search
snookca
December 05, 2015
Programming
1
160
The Future is In Pieces
My talk from CSSDay.io
snookca
December 05, 2015
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
980
Responsive Web Applications
snookca
0
170
Responsive Web Applications with Container Queries
snookca
3
680
Responsive Web Applications
snookca
0
110
Becoming a Deep Generalist
snookca
1
490
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
180
Your CSS is a Mess from SmartWeb
snookca
0
240
How to Write a Book
snookca
4
400
Other Decks in Programming
See All in Programming
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
180
The State of Fluid (2025)
s2b
0
200
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
570
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
970
実践 Dev Containers × Claude Code
touyu
1
240
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
decksh - a little language for decks
ajstarks
4
21k
Langfuseと歩む生成AI活用推進
licux
3
300
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
Featured
See All Featured
Building an army of robots
kneath
306
46k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
BBQ
matthewcrist
89
9.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Balancing Empowerment & Direction
lara
2
590
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Thoughts on Productivity
jonyablonski
69
4.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
KATA
mclloyd
32
14k
Transcript
The Future is in Pieces
2003 CSS Takes Off
Wired Redesign
Blog Design
None
None
Blog Designs #header h1, #header h2 { font-size:13px; font-weigh… }
#header h1 { color: #680; float:right; padding-b…} #header h2 { float:left; padding:18px 20px; posi…} #header h2 img { position:absolute; left:0; top:0; } #header h2 a { text-decoration:none; color:#333; } #main h2 {text-transform:uppercase; font-weight:…} #main h2 a {text-decoration:none; color:#444;} #main h2 a:hover {color:#680;} #main .article.inside h1 { text-transform:uppercase;…} #comments .comment .meta .authorname { text-transfo… } #comments .comment .meta .commentnumber a { float: … }
Blog Designs #header h1, #header h2 { font-size:13px; font-weigh… }
#header h1 { color: #680; float:right; padding-b…} #header h2 { float:left; padding:18px 20px; posi…} #header h2 img { position:absolute; left:0; top:0; } #header h2 a { text-decoration:none; color:#333; } #main h2 {text-transform:uppercase; font-weight:…} #main h2 a {text-decoration:none; color:#444;} #main h2 a:hover {color:#680;} #main .article.inside h1 { text-transform:uppercase;…} #comments .comment .meta .authorname { text-transfo… } #comments .comment .meta .commentnumber a { float: … }
Blog Designs #header h1, #header h2 { font-size:13px; font-weigh… }
#header h1 { color: #680; float:right; padding-b…} #header h2 { float:left; padding:18px 20px; posi…} #header h2 img { position:absolute; left:0; top:0; } #header h2 a { text-decoration:none; color:#333; } #main h2 {text-transform:uppercase; font-weight:…} #main h2 a {text-decoration:none; color:#444;} #main h2 a:hover {color:#680;} #main .article.inside h1 { text-transform:uppercase;…} #comments .comment .meta .authorname { text-transfo… } #comments .comment .meta .commentnumber a { float: … }
None
None
None
None
None
None
SMACSS
Scalable and Modular Architecture for CSS
• Describes how to approach site design and development •
No GitHub repo, not a library, not a framework, no tools • Techniques can be applied to static CSS, Sass, React, Web Components, etc.
What does it mean to be modular?
A module is “each of a set of standardized parts
or independent units that can be used to construct a more complex structure.” –Dictionary
None
None
None
None
What hurdles are there to being truly independent?
• Inheritance • Cascade • Browser Default Styling • Putting
modules/components together
Inheritance
• Typography e.g. color, font-size, font-family • List Styles e.g.
list-style • Table Styles e.g. border-collapse
Sorry, React. Inline styles won’t save you from inheritance.
• all: initial
None
None
Cascade
The cascade is how the browser decides what properties to
apply when you have multiple rules declared on the same element.
a:link { color: blue; } a:hover { color: cornflowerblue; }
.sidebar a:link { color: grey; } .sidebar a:hover { color: crimson; } .nav a:link { color: cadetblue; } .nav a:hover { color: darkblue; }
• Don’t write multiple rules for the same element •
Inline styles • Create a structured layering system to prevent conflicts
Browser Defaults
<button class="button"> .button { border:1px solid purple; padding: 5px 10px;
color: pink; } <a href="/" class="button"> text-decoration: none;
• all: initial • Predictable HTML i.e. templates
Putting Modules Together
Send
Cancel Send
.button + .button { margin-left: 10px; }
Cancel Send
Send Email
.button + .button, .input + .button { margin-left: 10px;
} * + * { margin-left: 10px; }
Send Subscribe Email
http://snk.ms/26
• Separate layout from module • Micro layout classes
<span class=“layout-inline”> <input><button>Send</button> </span> <span class=“layout-inline”> <button>Subscribe</button> </span>
<input><button>Send</button> <button class=“ML-S”>Subscribe</ button>
BONUS PROBLEM! Media Queries
None
None
If Module A in Module B in Layout
C Then I’m screwed.
If Module A has room do this.
Element Queries
Element Queries
Oh, right. SMACSS.
None
None
None
None
None
None
None
Design has a cost.
Every piece of design ends up in code.
None
None
• Categorize • Naming Convention
Base Layout Module State Theme
• .btn • .btn--variation • .btn__component • .btn • &--variation
• &__component • button.css • .variation • .component SMACSS-y BEM Sass CSS Modules/React • .btn • .btn-variation • .btn--component
HTML CSS JavaScript HTML CSS JavaScript HTML CSS JavaScript
The Future is React?
React.render( <XUIButton type={type}> My Button! </XUIButton> );
var XUIButton = React.createClass({ render: function() { return ( <button
className="{this.props.type}"> {this.props.children} </button> ); } });
var myStyle = { color: '#FFF', backgroundColor: '#330000' } var
XUIButton = React.createClass({ render: function() { return ( <button style="{myStyle}"> {this.props.children} </button> ); }
HTML CSS JavaScript HTML CSS JavaScript HTML CSS JavaScript
The Future is Web Components?
• Templates • Shadow DOM • Custom Elements • HTML
Imports
var p = document.createElement(‘p'); p.createShadowRoot(); p.shadowRoot.innerHTML = 'HTML Contents'; document.body.appendChild(p);
• The Cascade no longer applies • Inheritance still applies
(unless you use all:initial)
None
HTML CSS JavaScript
HTML CSS JavaScript component.html <link rel="import" href="component.html">
<template> <figure> <content select="img"></content> </figure> <div> <content></content> </div> </template>
<custom-element> <img src="…"> </custom-element>
// Creates a MediaObjectElement class // that extends HTMLElement. class
MediaObjectElement extends HTMLElement { createdCallback() { var shadowRoot = this.createShadowRoot(); shadowRoot.innerHTML = 'Shadow DOM contents...'; } } // Registers the `<custom-element>` element for use. document.registerElement('custom-element', MediaObjectElement);
• Likely a year before all browsers support everything. •
JavaScript Dependent • Phillip Walton’s Talk on Modular CSS with Web Components http://snk.ms/27
• Think about standardized and modular design. • Frameworks like
React can help. • Web Components are coming. (So is winter.)
Thank you. http://snook.ca/ @snookca