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
580
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
990
Thinking beyond "Scalable CSS"
necolas
14
6.9k
Making Twitter UI Infrastructure
necolas
14
4.2k
Adaptation and Components
necolas
6
1.3k
HTML5 Boilerplate: past, present, and future
necolas
4
260
The purification of web development
necolas
5
530
Other Decks in Programming
See All in Programming
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
180
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
770
技術同人誌をMCP Serverにしてみた
74th
1
680
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
340
PipeCDのプラグイン化で目指すところ
warashi
1
290
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.3k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
240
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
620
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Music & Morning Musume
bryan
46
6.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
158
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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