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
540
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
1k
Thinking beyond "Scalable CSS"
necolas
14
7k
Making Twitter UI Infrastructure
necolas
14
4.2k
Adaptation and Components
necolas
6
1.3k
CSS Application Architecture
necolas
15
580
HTML5 Boilerplate: past, present, and future
necolas
4
270
Other Decks in Programming
See All in Programming
1から理解するWeb Push
dora1998
7
1.9k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
Swift Updates - Learn Languages 2025
koher
2
470
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
print("Hello, World")
eddie
2
530
Deep Dive into Kotlin Flow
jmatsu
1
340
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building Adaptive Systems
keathley
43
2.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Speed Design
sergeychernyshev
32
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
306
46k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
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