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
150
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
920
Responsive Web Applications
snookca
0
140
Responsive Web Applications with Container Queries
snookca
3
640
Responsive Web Applications
snookca
0
89
Becoming a Deep Generalist
snookca
1
480
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
220
How to Write a Book
snookca
4
360
Other Decks in Programming
See All in Programming
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
みんなでプロポーザルを書いてみた
yuriko1211
0
260
Quine, Polyglot, 良いコード
qnighy
4
640
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
190
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.7k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Featured
See All Featured
The Invisible Side of Design
smashingmag
298
50k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
The Cult of Friendly URLs
andyhume
78
6k
Why Our Code Smells
bkeepers
PRO
334
57k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
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