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.1k
Adaptation and Components
necolas
6
1.3k
HTML5 Boilerplate: past, present, and future
necolas
4
260
The purification of web development
necolas
5
520
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
780
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
GoのWebAssembly活用パターン紹介
syumai
3
10k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
840
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
Select API from Kotlin Coroutine
jmatsu
1
180
Gleamという選択肢
comamoca
6
740
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for humans not robots
tammielis
253
25k
Rails Girls Zürich Keynote
gr2m
94
14k
Thoughts on Productivity
jonyablonski
69
4.7k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Site-Speed That Sticks
csswizardry
10
650
Facilitating Awesome Meetings
lara
54
6.4k
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