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
1k
Thinking beyond "Scalable CSS"
necolas
14
7k
Making Twitter UI Infrastructure
necolas
14
4.2k
Adaptation and Components
necolas
6
1.4k
HTML5 Boilerplate: past, present, and future
necolas
4
270
The purification of web development
necolas
5
550
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Devoxx BE - Local Development in the AI Era
kdubois
0
140
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.9k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
120
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Automating Front-end Workflow
addyosmani
1371
200k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
The Pragmatic Product Professional
lauravandoore
36
7k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Music & Morning Musume
bryan
46
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
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