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 purification of web development
Search
Nicolas Gallagher
May 30, 2013
Programming
5
460
The purification of web development
Nicolas Gallagher
May 30, 2013
Tweet
Share
More Decks by Nicolas Gallagher
See All by Nicolas Gallagher
React Native for web and beyond
necolas
5
970
Thinking beyond "Scalable CSS"
necolas
14
6.9k
Making Twitter UI Infrastructure
necolas
14
4.1k
Adaptation and Components
necolas
6
1.3k
CSS Application Architecture
necolas
15
560
HTML5 Boilerplate: past, present, and future
necolas
4
250
Other Decks in Programming
See All in Programming
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
sappoRo.R #12 初心者セッション
kosugitti
0
230
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
技術を根付かせる / How to make technology take root
kubode
1
240
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
A Philosophy of Restraint
colly
203
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
RailsConf 2023
tenderlove
29
1k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fireside Chat
paigeccino
34
3.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building Adaptive Systems
keathley
40
2.4k
Transcript
The purification of web development
Nicolas Gallagher @necolas
Before code…
Assumptions and the history of ideas
Heraclitus (535 BC – 475 BC)
None
Democritus (460 BC – 370 BC)
None
None
“You cannot step twice into the same river; for fresh
waters are flowing in upon you.” – Heraclitus
CSS and the purification of HTML
<table> <tr> <td align="left" onClick="dothing()"> <center> <font face="verdana">…</font> </center> </td>
</tr> </table>
“To increase the granularity of control over elements, a new
attribute has been added to HTML: 'CLASS'.” - CSS1 spec
None
Don’t use “unsemantic” class names?
“Your HTML, like diamonds, should be forever.” - camendesign.com
“…authors are encouraged to use [class attribute] values that describe
the nature of the content, rather than values that describe the desired presentation of the content.” - HTML5 spec
“A structure based on CLASS is only useful within a
restricted domain, where the meaning of a class has been mutually agreed upon.” - CSS1 spec
Class names are for us, not machines
We can pick our own meaning
Don't write ugly class names?
<p class="hyphens-as-word-separators"> … </p>
/* Component */ .button {…} /* Component */ .button-group {…}
/* Component modifier */ .button.primary {…} /* Component child */ .button-group .item {…}
/* Component */ .Button {…} /* Component modifier */ .Button--primary
{…} /* Component */ .ButtonGroup {…} /* Component descendant */ .ButtonGroup-item {…}
<!-- HTML --> <ul class="ButtonGroup"> <li class="ButtonGroup-item"> <button class="Button"> Save
</button> </li> <li class="ButtonGroup-item"> <button class="Button Button--cancel"> Cancel </button> </li> </ul>
None
github.com/necolas/suit-button-group
github.com/necolas/suit
Structured class names are useful
Don’t use extra elements?
<article class="Box"> <div class="Box-close"> <button class="u-textLike js-close"> <span class="Icon Icon--close"></span>
<span class="u-isHiddenVisually"> Close </span> </button> </div> ... </article>
<article class="Box"> <div class="Box-close"> {{> partials/close-button }} </div> {{$content}}{{/content}} </article>
{{<box_with_close}} {{$content}} <h1>Title</h1> <p>Some words</p> {{/content}} {{/box_with_close}}
Look at what they make you give
Web Components
“Web Components…let web application authors define widgets with a level
of visual richness not possible with CSS alone” - W3C Introduction to Web Components
“…specify the extra presentation using markup…” - W3C Introduction to
Web Components
None
Encapsulation, interoperability, reuse
Shadow DOM Encapsulation and DOM boundaries <element> Custom elements; extend
native elements <template> Clonable, inert DOM fragments
<element extends="button" name="x-btnClose"> <template> <style> @host { /* css to
unstyle button */ } .visHidden { /* css to hide text */ } </style> <x-icon type="close" size="24"></x-icon> <div class="visHidden"> <content></content> </div> </template> <script>// javascript</script> </element>
<button is="x-btnClose">Close</button>
None
It’s ok to rely on extra elements
Step back into the river
The end