-
Notifications
You must be signed in to change notification settings - Fork 0
/
class-reunion-1.html
302 lines (212 loc) · 17.4 KB
/
class-reunion-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- derickruiz.com/responsive-calendar -->
<!-- It would be cool having the emoji either in the title or in the description. -->
<!-- A single emoji that represents what the post is about -->
<title>Class Reunion Pt. 1 - Derick Ruiz</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Some custom description in here -->
<meta name="Description" content="">
<link rel="canonical" href="/class-reunion-1">
<meta http-equiv="cleartype" content="on">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">
<!-- Typekit code that loads nimbus sans -->
<script>
(function(d) {
var config = {
kitId: 'yhz0fyw',
scriptTimeout: 3000
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/code.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58696895-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class='blog-post-page' itemscope="itemscope" itemprop="http://schema.org/WebPage">
<div class='wrapper'>
<section class='intro clearfix'><!-- Is intro the appropriate name for this section? -->
<nav class="clearfix" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li class=''>
<a href="/about" itemprop="url">About</a>
</li>
<li class=''>
<a href="/articles" itemprop="url">Articles</a>
</li>
<li class=''>
<a href="/works" itemprop="url">Works</a>
</li>
<li class=''>
<a href="/contact" itemprop="url">Contact</a>
</li>
<li class="home-link" aria-hidden="true">
<a href="/"></a>
</li>
</ul>
</nav>
<a href="/"><!-- link to home page -->
<header itemscope itemtype="http://schema.org/Person">
<h3 class='name' itemprop="name">
<span itemprop="givenName">Derick</span> <span itemprop="familyName">Ruiz</span>
</h3>
</header>
</a>
</section>
</div>
<div class='wrapper wrapper--noSpacing'>
<!-- Put the item type of blog back inside of here -->
<main role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
<article itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
<header>
<h1 class='hyphenate' itemprop="headline">Class Reunion Pt. 1</h1>
<h3 class="subheadline" class="hyphenate" itemprop="headline">or how 3 words by Tantek Celik completely shaped CSS.</h3>
<time itemprop="datePublished" datetime=2016-05-10>
<span class='month-day-year'>05.10.2016</span>
</time>
<span class='separator'>|</span>
<time class='read-time' itemprop="timeRequired" datetime="06M">
<span>06 minute read</span>
</time>
<meta itemprop="wordCount" content="1366">
</header>
<div class='hyphenate content' itemprop="articleBody">
<p>Open up any web page and take a look at the CSS under the hood. More than likely you’ll see CSS structured something like the following:</p>
<pre data-language="CSS"><code>.nav li a {
background-color: blue;
}
blockquote p {
font-size: 1em;
}</code></pre>
<p>That CSS looks normal, right? But how did that structure get so popular given how open and malleable CSS with classes is?</p>
<p>It turns out that a particular style of CSS encouraged by a few influencers in the field, the connection of semantic HTML to the class attribute, and a few websites encouraging more experimentation with CSS were the primary reason for that style taking such a strong hold.</p>
<h2 id="in-the-beginning">In the beginning…</h2>
<p>In 2002, Tantek Celik wrote the most influential essay that shaped how web developers write CSS titled A Touch of Class<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup>. Tantek argued that instead of using class names to indicate semantics in HTML to first look for a tag more appropriate than a div or a span. Instead of <code class="highlighter-rouge"><div class='posttitle'>Today's news</div></code> to do <code class="highlighter-rouge"><h2>Today's news</h2></code>. Adopting this approach made the HTML more semantically rich. Many other influencers in the field were also writing on the topic of Semantic HTML and how that related to writing good classes and CSS styles. In 2004 Eric Meyer in particular with the essay Competent Classing<sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup>, wrote how some classes are useless and simply bloat the page weight (because the elements can be styled through the hierarchy in place instead). Tantek left a comment<sup id="fnref:3"><a href="#fn:3" class="footnote">3</a></sup> on Eric Meyer’s essay that would formalize those ideas and forever leave an imprint on CSS structure.</p>
<h2 id="context-before-class">Context before class</h2>
<p>Three words that beautifully captured the popular ideas of how to write CSS at the time. Context before class says that before using a class name to connect an element to a CSS rule to use the element’s context (parent) to construct a selector. Instead of <code class="highlighter-rouge">.nav-link{}</code> to use <code class="highlighter-rouge">.nav li{}</code>. Both Tantek and Eric Meyer argued that this approach would reduce page weight by removing unnecessary classes.</p>
<pre data-language="html">
<code data-language="html"><ul class="nav">
<li class="nav-link">Blah01</li> |
<li class="nav-link">Blah02</li>
</ul></code>
</pre>
<p>could then become the following:</p>
<pre data-language="html">
<code data-language="html"><ul class="nav">
<li>Blah01</li> |
<li>Blah02</li>
</ul></code>
</pre>
<h2 id="how-did-it-come-to-life">How did it come to life?</h2>
<p>Tantek word’s beautifully captured the idea, but how did it come into life? These ideas about CSS were obvious backlashes against the popular table movement just a few years before it. This new movement ushered in by Tantek Celik and Eric Meyer was to bring the web back to its structural roots and guiding principles.</p>
<h2 id="the-guiding-principals-of-the-web">The guiding principals of the web</h2>
<p>The web, created by Tim Berners-Lee, was originally created for structure. It was a science project designed for information organization.<sup id="fnref:4"><a href="#fn:4" class="footnote">4</a></sup> There’s a lot of benefits to the structural approach. You have machine readability which leads to better accessibility, better indexing and search engines, and portability to all devices.</p>
<figure><img src="/img/posts/class-reunion/This-is-for-everyone.jpg" alt="A photo of the London Olympics showcasing Tim Berners-Lee's This is for everyone." /></figure>
<p>However, that structural purity wasn’t what the web was destined for. The web, as was so famously captured in the London Olympics, was given for everyone to use. And it turns out that the best practices for computer scientists aren’t necessarily the same for regular people.</p>
<h2 id="the-table-movement">The Table Movement</h2>
<p>People wanted the web to be a visual medium. Pretty sites, animated gifs, and places to post photos. Catering to normal people was seen as a competitive advantage for browsers because there’s a lot more normal people than there are computer scientists.</p>
<p>Besides browser incompatibility and lack of developer inertia, CSS just wasn’t powerful enough to achieve the layouts that designers wanted. It was just good enough for a few text effects and changing colors. The only way to achieve this visual nature was to abuse HTML structure at the time. Hence font tags and inline formatting. The mid 90’s HTML was all about presentation.</p>
<figure><img src="/img/posts/class-reunion/creating-killer-websites.jpg" /></figure>
<p>The book Creating Killer Web Sites by David Siegel was extremely popular because it helped people achieve that visual medium. It got designers excited about the web. The most important concept expressed in the book was how to use tables and transparent gifs to achieve a grid-based layout that was close to print.</p>
<h2 id="the-meaningless-class-attribute">The meaningless class attribute</h2>
<p>In direct contrast to the table movement which abused HTML tags to achieve layout, Ian Hickson, another early web influencer, created a post titled Why Semantic Markup is so Important<sup id="fnref:5"><a href="#fn:5" class="footnote">5</a></sup>. Ian argued that because classes are meaningless (just a space separated list of author defined tokens) they shouldn’t be used in the markup at all. Markup was supposed to be pure and since classes didn’t mean anything then they shouldn’t be in the markup. It was from this idea that Tantek’s Context before Class was birthed. This style of writing HTML and CSS was seen as extremely semantic and on course with the original vision of the web created by Tim Berners-Lee.</p>
<h2 id="success-but-css-not-being-adopted-yet">Success but CSS not being adopted yet?</h2>
<p>The context before class style of writing CSS and classes was seen as an extreme positive. It maintained the best of the table movement because CSS2 was now as powerful as tables to create the layouts that designers wanted. Also, it was semantic as the original guiding principals of the web had intended.</p>
<p>Despite CSS2 finally achieving the power necessary to create modern layouts the developer inertia still wasn’t there and developers were reluctant to hop on the CSS train.</p>
<h2 id="the-road-css-took-to-prove-itself">The road CSS took to prove itself</h2>
<figure><img src="/img/posts/class-reunion/daily-css-fun.jpg" /></figure>
<p>In late 2001 Chris Casciano posted an influential transitionary post from using tables to taking advantage of the new power of CSS titled Your CSS Bores Me<sup id="fnref:6"><a href="#fn:6" class="footnote">6</a></sup>. He argued that CSS was just as powerful as tables and wondered why designers still weren’t taking advantage of it. In response, a lot of designers said they still weren’t sure if CSS could do what Chris was claiming. As a result, he created a project called Daily CSS Fun<sup id="fnref:7"><a href="#fn:7" class="footnote">7</a></sup> in 2002 in which every day in the month of February he would post a new redesign of his website by only changing the stylesheet.</p>
<p>In the table movement a few years before, redesigns were extremely tedious. Because the design was very much tied into the markup it required designers to go into the HTML and manually update all the values on every page. By only changing the stylesheet and not any of the markup to achieve his redesigns, Chris was essentially marketing to web developers, “No need to change the markup for presentational changes, just use CSS!”. It was to reassure them that they would no longer have to face the great pains of big redesigns.</p>
<p>Because the design was only changed through the stylesheet, consequently the style and structure of the CSS very much resembled Tantek Celik’s Context before Class. This would help to further enforce and solidify that style of writing CSS.</p>
<h2 id="solidification-of-style-with-css-zen-garden">Solidification of style with CSS Zen Garden</h2>
<figure><img src="/img/posts/class-reunion/css-zen-garden.jpg" /></figure>
<p>In 2003 Dave Shea, the creator of CSS Zen Garden was inspired by Chris Casciano’s Daily CSS Fun project and Your CSS Bores Me post to create CSS Zen Garden<sup id="fnref:8"><a href="#fn:8" class="footnote">8</a></sup>. Instead of Dave doing all of the redesigns, as Chris did, he opened it up to the community as a contest. This was huge because many web designers got their start around this period. They learned CSS by experimenting with the layouts presented in the contests and through reading the CSS source code created by other developers.</p>
<p>CSS Zen Garden convinced a lot of developers that CSS was a serious language. It was fun. It was experimental. Just by changing the CSS you could go to a completely different look and feel.</p>
<h2 id="end">End</h2>
<p>Ultimately Tantek’s context before class, the connection of classes to semantic HTML, and CSS proving itself came together to create a system to style pages that worked very well for developers. It finally just began to spread and it became commonplace.</p>
<p>This style of CSS works great for static documents. But there is a difference between styling a document, a glorified word document, to styling a web application. As the internet was becoming more of an application platform instead of a document sharing platform, the same methods were no longer up to par. Except they are still being used as we can see.</p>
<p><a class="SpecialLink" href="/class-reunion-2">Read Part 2</a></p>
<p>Thank you for reading.</p>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>http://tantek.com/log/2002/12.html <a href="#fnref:1" class="reversefootnote">↩</a></p>
</li>
<li id="fn:2">
<p>http://meyerweb.com/eric/thoughts/2004/07/18/competent-classing/ <a href="#fnref:2" class="reversefootnote">↩</a></p>
</li>
<li id="fn:3">
<p>http://meyerweb.com/eric/thoughts/2004/07/18/competent-classing/#comment-529 <a href="#fnref:3" class="reversefootnote">↩</a></p>
</li>
<li id="fn:4">
<p>https://www.w3.org/Consortium/mission#principles <a href="#fnref:4" class="reversefootnote">↩</a></p>
</li>
<li id="fn:5">
<p>http://ln.hixie.ch/?start=1038263537&order=-1&count=10 <a href="#fnref:5" class="reversefootnote">↩</a></p>
</li>
<li id="fn:6">
<p>http://www.chunkysoup.net/opinion/boringcss/ <a href="#fnref:6" class="reversefootnote">↩</a></p>
</li>
<li id="fn:7">
<p>https://placenamehere.com/neuralustmirror/200202/ <a href="#fnref:7" class="reversefootnote">↩</a></p>
</li>
<li id="fn:8">
<p>http://mezzoblue.com/archives/2003/05/07/css_zen_gard/ <a href="#fnref:8" class="reversefootnote">↩</a></p>
</li>
</ol>
</div>
</div>
</article>
</main>
</div><!-- .wrapper -->
<div class='wrapper'>
<footer>
<div class='email'>
<a class='link' href="/contact">derick.r.ruiz@gmail.com</a>
</div>
<!-- Figure out how to loop through the social_services thing in _confing.yml -->
<ul class='social-links'>
<li>
<a href="http://codepen.io/derickruiz"><i class='icon-codepen'></i> <span class='link service'>Codepen</span></a>
</li>
<li>
<a href="https://github.com/derickruiz"><i class='icon-github'></i> <span class='link service'>Github</span></a>
</li>
<li>
<a href="https://twitter.com/drrrruiz"><i class='icon-twitter'></i> <span class='link service'>Twitter</span></a>
</li>
<li>
<a href="https://www.linkedin.com/in/derickruiz"><i class='icon-linkedin'></i> <span class='link service'>Linkedin</span></a>
</li>
</ul>
</footer>
</div>
<script src="/js/vendor/SmartUnderline/js/smart-underline.js"></script>
<script src="/js/vendor/Hyphenator/Hyphenator_Loader.js"></script>
<script src="/js/typography.js"></script>
<script src="/js/vendor/rainbow.js"></script>
<script src="/js/vendor/language/generic.js"></script>
<script>
(function () {
Rainbow.color();
}());
</script>
</body>
</html>