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
370
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
940
Thinking beyond "Scalable CSS"
necolas
14
6.7k
Making Twitter UI Infrastructure
necolas
14
3.8k
Adaptation and Components
necolas
6
1.1k
CSS Application Architecture
necolas
15
540
HTML5 Boilerplate: past, present, and future
necolas
4
240
Other Decks in Programming
See All in Programming
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
SIMD Parallel Programming with the Vector API
josepaumard
0
230
Elm 0.19.0 Changes
bkuhlmann
0
510
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
760
Milestoner
bkuhlmann
1
410
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
PHPはいつから死んでいるかの調査
chiroruxx
2
420
Documentation for users with AsciiDoc and Antora
ahus1
0
370
Site Reliability Engineering for GMO
pyama86
8
1.1k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
440
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Infographics Made Easy
chrislema
238
18k
Happy Clients
brianwarren
92
6.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Atom: Resistance is Futile
akmur
260
25k
Web development in the modern age
philhawksworth
203
10k
Raft: Consensus for Rubyists
vanstee
133
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
How to Ace a Technical Interview
jacobian
273
22k
Code Review Best Practice
trishagee
56
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
YesSQL, Process and Tooling at Scale
rocio
165
13k
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