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
430
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
4k
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
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Realtime API 入門
riofujimon
0
150
Jakarta EE meets AI
ivargrimstad
0
140
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
EventSourcingの理想と現実
wenas
6
2.3k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
Jakarta EE meets AI
ivargrimstad
0
600
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
290
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Designing for humans not robots
tammielis
250
25k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
How to train your dragon (web standard)
notwaldorf
88
5.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Agile that works and the tools we love
rasmusluckow
327
21k
A Tale of Four Properties
chriscoyier
156
23k
Statistics for Hackers
jakevdp
796
220k
Testing 201, or: Great Expectations
jmmastey
38
7.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