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
CSS Application Architecture
Search
Nicolas Gallagher
September 10, 2013
Programming
15
530
CSS Application Architecture
An introduction to the aims and design of the SUIT framework
Nicolas Gallagher
September 10, 2013
Tweet
Share
More Decks by Nicolas Gallagher
See All by Nicolas Gallagher
React Native for web and beyond
necolas
5
940
Thinking beyond "Scalable CSS"
necolas
14
6.7k
Making Twitter UI Infrastructure
necolas
14
3.8k
Adaptation and Components
necolas
6
1.1k
HTML5 Boilerplate: past, present, and future
necolas
4
240
The purification of web development
necolas
5
360
Other Decks in Programming
See All in Programming
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8.1k
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
Open Source Swiftc Workshop
kitasuke
1
290
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
280
Enhancing Applications with Accessibility API
kishikawakatsumi
3
1k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.5k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Adopting Sorbet at Scale
ufuk
66
8.5k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
GraphQLとの向き合い方2022年版
quramy
28
12k
Navigating Team Friction
lara
177
13k
KATA
mclloyd
14
11k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Music & Morning Musume
bryan
39
5.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Designing for humans not robots
tammielis
247
25k
Transcript
CSS Application Architecture @necolas
What’s the difference between “Architecture”, “Framework”, and “Toolkit”?
Architecture… a plan about how to structure an application.
None
Framework… an implementation of an architecture that someone can use
as the basis for a working application.
None
Toolkit / Library… a collection of pre-built patterns that can
be assembled to create an application.
None
Making architectural decisions
Client / Agency work
None
I don’t need an architecture!
None
None
Long-lived product work
No clients to blame :(
Find the right problems
Clean code! …no
“Does he ever think of anything rbut himself?”
Dealing with change
Reducing helplessness
Communicate ways of thinking
The freest human is the one who never has to
choose
1. Single responsibility 2. Extension over modification 3. Composition over
inheritance 4. Low coupling 5. Encapsulation 6. Documentation
Home Sidebar Tweetbox .home .sidebar .tweetbox { ... } .home
.footer .listbox { ... } Footer Listbox
Home Sidebar Tweetbox .tweetbox { ... } .listbox { ...
} Footer Listbox
SUIT framework github.com/suitcss/suit
Web Component-y .tweet { /* make it look good */
} .avatar { ... } .text { ... } <article class="tweet"> ... <img class="avatar" ...> ... <p class="text">...</p> </article>
# utilities u-utilityName # components ComponentName ComponentName--modifierName ComponentName-descendantName # js
utilities js-hookName
None
HTML example <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...>
... <p class="Tweet-text">...</p> </article>
.Tweet { ... } /* Component */ .Tweet.is-favorited { ...
} /* State */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>
.Tweet { ... } /* Component */ .Tweet-text { ...
} /* Descendant */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>
.Avatar { ... } /* Component */ .Avatar--large { ...
} /* Modifier */ <article class="Tweet is-favorited"> ... <img class="Avatar Avatar--large" ...> ... <p class="Tweet-text">...</p> </article>
<article class="Tweet"> <a class="u-linkComplex" ...> ... <b class="u-linkComplex-target"> {user.name} </b>
<span class="u-textMute"> {user.screenname} </span> </a> <p class="Tweet-text u-textBreak">...</p> ... </article>
<article class="Tweet"> <a class="u-linkComplex" ...> ... <b class="u-linkComplex-target"> {user.name} </b>
<span class="u-textMute"> {user.screenname} </span> </a> <p class="Tweet-text u-textBreak">...</p> ... </article>
<article class="Tweet"> {{>partials/tweet_useridentity}} <div class="u-sizeFit"> {{>partials/tweet_text}} {{>partials/tweet_media}} {{>partials/tweet_actions}} </div> </article>
<x-tweet user-fullname="{{user.fullname}}" user-screenname="{{user.screenname}}" user-avatar="{{user.avatar}}" show-actions show-media> {{text}} </x-tweet>
What about RWD?
bostonglobe.com
92 separate @media directives 27 different width values 380 480
481 600 620 639 640 700 750 768 788 799 800 809 810 900 930 931 960 980 1024 1050 1100 1200 1210 1220 1400
Restraint required
@import “component/grid-v1.css”; @import “component/grid-v2.css” (min-width: 20em); @import “component/grid-v3.css” (min-width: 50em);
.v1-u-size1of2 { ... } .v2-u-size1of4 { ... } .v3-u-size1of6 {
... }
Tooling
bower.io
# bower.json { "name": "my-app", "dependencies": { "normalize-css": "~2.1.0", "suit-utils":
"~0.6.0", "suit-button": "~2.0.0”, "suit-grid": "~0.2.0", ... } }
None
CSS preprocessing
Automatic vendor prefixes
.Button { background: linear-gradient(…); }
.Button { background: -webkit-linear-gradient(…); background: linear-gradient(…); }
CSS variables
:root { var-button-bg: linear-gradient(…); } .Button { background: var(button-bg); }
.Button { background: linear-gradient(…); }
Conformance checking
Nothing is perfect Nothing lasts Nothing is finished
Accept transience and imperfection
End