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
530
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
990
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
260
Other Decks in Programming
See All in Programming
DataformでPythonする / dataform-de-python
snhryt
0
160
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
470
Infer入門
riru
4
1.2k
実践 Dev Containers × Claude Code
touyu
1
160
iOS開発スターターキットの作り方
akidon0000
0
240
構文解析器入門
ydah
7
2k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
330
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
630
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
790
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
290
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
800
Featured
See All Featured
Docker and Python
trallard
45
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
Building an army of robots
kneath
306
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
It's Worth the Effort
3n
185
28k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Code Reviewing Like a Champion
maltzj
524
40k
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