forked from twitter/opensource-website
-
Notifications
You must be signed in to change notification settings - Fork 1
/
semantic-snakeoil.html
137 lines (114 loc) · 10.4 KB
/
semantic-snakeoil.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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Semantic Snakeoil [ brack3t ]</title>
<meta name="description" content="">
<meta name="author" content="Brack3t, aka Kenneth Love and Chris Jones">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/ico" href="./brack3t-theme/assets/favicon.ico">
<link href="./feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="brack3t ATOM Feed">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="http://fonts.googleapis.com/css?family=Exo:200,300,500,700,900,200italic,300italic,500italic,700italic,900italic" rel="stylesheet">
<link href="./brack3t-theme/assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="./brack3t-theme/assets/github.css" rel="stylesheet">
<link href="./brack3t-theme/assets/bootstrap/css/brack3t.css" rel="stylesheet">
<script>
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-4642386-4"]);
_gaq.push(["_trackPageview"]);
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var disqus_identifier = "semantic-snakeoil.html";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://brack3t.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span8">
<header id="logo" role="banner">
<h1><a href="/">Brack3t</a></h1>
<p>Two guys… and Python.</p>
</header>
</div>
<aside class="span2" id="sidebar" role="complementary">
<nav>
<ul class="unstyled">
<li><a href="./pages/projects.html">Projects</a></li>
<li><a href="./archives.html">Archives</a></li>
<li><a href="./tags.html">Tags</a></li>
</ul>
</nav>
</aside>
</div>
<div class="row-fluid">
<div class="span7 offset1" id="main" role="main">
<article>
<header>
<h1><a href="./semantic-snakeoil.html" class="slabtext">Semantic Snakeoil</a></h1>
<h6><span class="permalink">Published: <a href="./semantic-snakeoil.html">10-03-2011</a></span>
<span class="author">by <strong>Kenneth</strong></span>
<span class="tags">tags: <a href="./tag/semantics.html">semantics</a> <a href="./tag/html.html">html</a> <a href="./tag/css.html">css</a> </span>
</h6>
</header>
<p>For years now, we've been told that we should always use semantic class names and IDs in our HTML.
And, in general, this is a good practice, I don't want anyone to think it's not. You <em>should</em> make
your markup, all aspects of it, as accurate and related as possible. The problem, though, comes
when people become fanatical about their classes and IDs to the point of swearing off grid systems
and CSS frameworks in the name of "proper" web development practices.</p>
<p>So why isn't it a big deal? Both the <a class="reference external" href="http://www.w3.org/TR/html5-author/global-attributes.html#classes">W3C</a> and the <a class="reference external" href="http://developers.whatwg.org/elements.html#classes">WHATWG</a> emphasize that the class attribute, and its values, if specified, should describe the nature of the content and not the presentation of it. And for the most part, I agree. This ideal has limits, though, that need to be addressed and understood. <strong>It's currently impossible to be 100% semantic and still be useful.</strong></p>
<p>Let's start with the argument presented by the idealists: All class names and IDs should be semantic and address the nature of the element, not its display. This ends up with us needing to create new classes and ID for every project we do, tied directly to the use case of each bit of markup. Yes, some things could be repeated and copied from project to project, but a decent majority of the CSS would be unique. This is great if you're the only person working on something, or working with a small group that works together on many projects. This is rarely the case with large or open-source projects, though.</p>
<p>Now, let's look at the argument from the utilitarians: All class names should be generically semantic to the structure of the document and relate to the use case and nature of the element; IDs should be semantic to the project or page. This opens up the project to third-party grid systems and the like. So long as the class names have meaning to the document, even if it's not semantic meaning to the content it's wrapped around, it's still valid and logical.</p>
<p>For a second argument against made-to-order frameworks for each project: using third-party libraries like the awesome <a class="reference external" href="https://twitter.github.com/bootstrap/">Twitter Bootstrap</a>, newcomers to the project will either have experience with the library, or can refer to its documentation to get up to speed; if you're using a custom library of CSS for the project, a new developer needs to familiarize themselves with the whole thing with, lilkely, little to no documentation.</p>
<p>To my mind, and many other professionals, the point of the <tt class="docutils literal">class</tt> attribute is to describe the element or its content. The element, though, is the more important bit to describe since using a semantic element already describes the content. If you put a list of links into a <tt class="docutils literal"><nav></tt> element, there's no reason to give it a class of <tt class="docutils literal">nav</tt> or <tt class="docutils literal">menu</tt> or the like. There is, however, plenty of reason to give it a class that describes how it relates to other elements, such as <tt class="docutils literal">span6</tt>.</p>
<p>Using these systems, as well, gives us the ability to reflow content in a way that remains semantic. To set the stage, we have a <tt class="docutils literal"><section></tt> of content that is the main content of the site, and an <tt class="docutils literal"><aside></tt> that is our sidebar. We want the page to reflow based on media queries. If we use an idealistic set of classes, such as <tt class="docutils literal">sidebar</tt>, once the page reflows and the <tt class="docutils literal"><aside></tt> ends up below the main content, its class no longer has the same semantic meaning. Yes, we could have used a class like <tt class="docutils literal"><span class="pre">secondary-content</span></tt> or the like, but few people seem to use class names like this. If, though, we use something like <tt class="docutils literal">span6</tt>, it loses no semantic meaning after the reflow as it is still spanning 6 of our columns. Yes, that's describing the display but it's describing it on relation to all the other elements, so it is semantic in context.</p>
<p>The other point I keep seeing being made is, that, to change the width of an element, the designer has to go and edit the HTML. If, though, you're using HTML correctly, to where classes describe more than one object, if I want only one instance of an object to be wider, I have to either add, remove, or edit a class in the HTML anyway. If your knee-jerk reaction is that "my classes aren't set up that way" and you're using classes like they're IDs, to where they're unique, you aren't using them correctly and should be using IDs on your elements. This also ties into more serious programming; if your model changes, you have to (usually) update your views/controllers and templates/views. This isn't a unique concept and shouldn't trip up any serious developer or designer.</p>
<p>Search engines don't seem to care about class values, either, so using more of them won't hurt your site's SEO (if you care about that). Also, as far as content being available, if people are scraping your HTML, it would be better to offer it in a more consumable format like an JSON API or an RSS feed (aka XML). This way the content is separated from your presentation of it and can be used however the consumer needs it.</p>
<p>So, I put forth a new definition for classes:</p>
<blockquote>
There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content. <strong>It is also valid to use values that describe the element.</strong></blockquote>
<p>Have comments? Continue the discussion on <a class="reference external" href="http://news.ycombinator.com/item?id=3072260">Hacker News</a>.</p>
</article>
<section>
<header>
<h1>Comments</h1>
</header>
<div id="disqus_thread"></div>
</section>
</div>
</div>
<footer><p>© Brack3t. All rights reserved. <a href="./feeds/all.atom.xml">ATOM feed</a></p></footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./brack3t-theme/assets/jquery-1.8.2.min.js"></script>
<script src="./brack3t-theme/assets/modernizr.js"></script>
<script src="./brack3t-theme/assets/jquery.slabtext.min.js"></script>
<script src="./brack3t-theme/assets/jquery.fittext.js"></script>
<script src="./brack3t-theme/assets/highlight.pack.js"></script>
<script>
$(function() {
$(".slabtext").slabText({
"maxFontSize": 200,
"viewportBreakpoint": 768
});
$(".highlight pre").each(function(i, e) {hljs.highlightBlock(e, " ")});
});
</script>
</body>
</html>