forked from JoeMorgan/Developer-Docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss.html
442 lines (418 loc) · 20.3 KB
/
css.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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
<!DOCTYPE html>
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js non-ie"> <!--<![endif]-->
<head>
<link href="css/main.css" media="screen" rel="stylesheet" />
<meta charset="utf-8" />
<meta content="" name="keywords"/>
<meta content="" name="description"/>
<title>Interactive Development Best Practices</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<script src="js/modernizr.js"></script>
<script src="js/curl.js"></script>
<script>
define.amd.jQuery = true;
curl(
{
baseUrl: "js",
paths: {
"jquery" : "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min"
}
},
[
"jquery",
"jquery.easing.1.3",
"domReady!",
"rainbow",
"main"
]
);
</script>
</head>
<body>
<div class="main-container">
<header>
<hgroup>
<h1>Interactive Development Best Practices</h1>
<h2><time datetime="20012-04-29">April 29, 2012</time></h2>
</hgroup>
<p>
Documenting best practices for interactive development is an exhaustive task, and is one that, if done effectively, would fill the pages of
several books. The purpose of this guide is not to provide an all-encompassing list of best practices, but to highlight many of the most
important components of a stable, high performance web page.
</p>
</header>
<nav>
<h1>Navigate This Document</h1>
<ul>
<li>
<a class="top-level" href="index.html" title="HTML">HTML</a>
<ul class="second-level">
<li><a href="#doctype" title="Doctype">Doctype</a></li>
<li>
<a href="#HTML5" title="HTML5">HTML5</a>
<ul>
<li><a href="#HTML5-shim" title="Making HTML5 Work">Making HTML5 Work</a></li>
<li><a href="#laymans-HTML5" title="The Layman's HTML5">The Layman's HTML5</a></li>
</ul>
</li>
<li><a href="#XHTML-syntax" title="XHTML Syntax">XHTML Syntax</a></li>
<li><a href="#validation" title="HTML Validation">HTML Validation</a></li>
<li><a href="#deprecated" title="Avoid Deprecated Elements">Avoid Deprecated Elements</a></li>
<li>
<a href="#semantics" title="Semantics">Semantics</a>
<ul>
<li><a href="#document-outline" title="Document Outline">Document Outline</a></li>
<li><a href="#header-tags" title="Header Tags in HTML5 and XHTML">Header Tags in HTML5 and XHTML</a></li>
<li><a href="#tables-for-data" title="Use Tables for Tabular Data">Use Tables for Tabular Data</a></li>
<li><a href="#avoid-unnecessary-elements" title="Avoid Unnecessary Elements">Avoid Unnecessary Elements</a></li>
</ul>
</li>
<li><a href="#unnecessary-classes" title="Avoid Unnecessary Classes and IDs">Avoid Unnecessary Classes and IDs</a></li>
<li><a href="#image-tags" title="Image Tags">Image Tags</a></li>
<li><a href="#miscellaneous-guidelines" title="Miscellaneous Guidelines">Miscellaneous Guidelines</a></li>
</ul>
</li>
<li>
<a class="top-level" href="images.html" title="Images">Images</a>
<ul class="second-level">
<li><a href="#image-size" title="Image Size">Image Size</a></li>
<li><a href="#image-format" title="Image Formats">Image Formats</a></li>
<li><a href="#CSS-sprites" title="Leverage CSS Sprites">Leverage CSS Sprites</a></li>
</ul>
</li>
<li class="active">
<a class="top-level" href="#css" title="CSS">CSS</a>
<ul class="second-level">
<li><a href="#inline-styles" title="Inline Styles">Inline Styles</a></li>
<li><a href="#external-css" title="Place All CSS Within the <head>">Place All CSS Within the <code><head></code></a></li>
<li><a href="#combine-stylesheets" title="Combine CSS Files">Combine CSS Files</a></li>
<li><a href="#link-vs-import" title="Use <link> to Include CSS, Not @import">Use <code><link></code> to Include CSS, Not <code>@import</code></a></li>
<li><a href="#reset" title="Use a CSS Reset">Use a CSS Reset</a></li>
<li><a href="#font-sizes" title="Specifying Font Sizes">Specifying Font Sizes</a></li>
<li><a href="#writing-good-selectors" title="Writing Good Selectors">Writing Good Selectors</a></li>
<li><a href="#shorthand" title="Shorthand">Shorthand</a></li>
<li><a href="#useful-links" title="Useful Links">Useful Links</a></li>
</ul>
</li>
<li>
<a class="top-level" href="javascript.html" title="JavaScript">JavaScript</a>
<ul class="second-level">
<li><a href="#use-external-js" title="Restrict JavaScript to External Files">Restrict JavaScript to External Files</a></li>
<li>
<a href="#place-external-js" title="Placement of External JavaScript Files">Placement of External JavaScript Files</a>
<ul>
<li><a href="#end-of-page" title="Include JavaScript near the end of the page">Include JavaScript near the end of the page</a></li>
<li><a href="#js-loader" title="Use a JavaScript loader">Use a JavaScript loader</a></li>
</ul>
</li>
<li><a href="#use-jquery" title="Use jQuery">Use jQuery</a></li>
<li><a href="#organize-code" title="Organize Your Code">Organize Your Code</a></li>
<li><a href="#general-js" title="General Coding Practices">General Coding Practices</a></li>
</ul>
</li>
<li>
<a class="top-level" href="about.html" title="About">About</a>
<ul class="second-level">
<li><a href="#summary" title="Purpose">Purpose</a></li>
<li><a href="#goals" title="Goals">Goals</a></li>
<li><a href="#contributors" title="Contributors">Contributors</a></li>
</ul>
</li>
</ul>
</nav>
<section id="css">
<h1>CSS</h1>
<ul class="recs">
<li>
<h2 id="inline-styles">Never Use Inline Styles</h2>
<p>
It may be tempting to declare styles for an element within a style attribute. For example:
</p>
<figure>
<figcaption class="code-label">Inline styling</figcaption>
<pre><code data-language="html"><p style="color:red; font-size:1.4em;">Wrong way to style</p> </code></pre>
</figure>
<p>
Declaring styles for an element this way usually leads to maintenance issues, as you would now have to keep track of styles declared
both in the HTML itself as well as in an external stylesheet.
</p>
<p>
The style declared in the HTML tag attribute also loses out on context. When looking at styles within a (well organized) CSS document,
you can see all other styles that may be applied to the element, including those that may be applied to its parent or other ancestors
(this "cascade" is the C in CSS).
</p>
<p>
Finally, inline styles will override externally defined styles, even those intentionally given a high cascade weight. This can make
debugging difficult when a developer is expecting external styles to be applied.
</p>
<p>
For reasons similar to these, it is usually best to avoid using <code><style></code> elements as well, though there may occasionally
be an exception to the rule in this case.
</p>
</li>
<li>
<h2 id="external-css">Place All CSS Within the <code><head></code></h2>
<p>
Technically speaking, links to external stylesheets and <code><style></code> elements may be placed almost anywhere within an HTML page.
However, it is considered to be a best practice to put all styles within the <code><head></code> of a page to improve the perceived load
time of the page.
</p>
<p>
When styles are included within the <code><body></code> element, they may be applied after elements have already rendered on the page.
This can cause “jumpy” effects as styles are retroactively applied to the rendered elements.
</p>
<p>
The actual loading time of the page (as opposed to the perceived loading time) can be affected as well, as application of certain styles causes
the browser to repeat certain page loading actions (such as determining element layout and “painting” the rendered page).
</p>
</li>
<li>
<h2 id="combine-stylesheets">Combine CSS Files</h2>
<p>
Browsers can only request a limited number of files from the server concurrently. This leads to a staggered download profile, and the loading
time of a page will increase dramatically along with the number of assets that need to be requested from the server.
</p>
<p>
One way to avoid excess server round-trip time is to combine assets into fewer files. For this reason, if a given set of styles is going
to be used across a site, it almost always makes the most sense to combine all of these styles into a single stylesheet.
</p>
<p>
For further details, read
<a href="http://code.google.com/speed/page-speed/docs/rtt.html#CombineExternalCSS" target="_blank" title="Combine CSS files">Google's documentation</a>
on minimizing round trips.
</p>
</li>
<li>
<h2 id="link-vs-import">Use <code><link></code> to Include CSS, Not <code>@import</code></h2>
<p>
There are two ways to include a stylesheet in your web page. You can use the <code><link></code> tag:
</p>
<figure>
<figcaption class="code-label">The <code><link></code> method</figcaption>
<pre><code data-language="html"><link rel='stylesheet' href='css/main.css'> </code></pre>
</figure>
<p>
Or you can use the <code>@import</code> rule:
</p>
<figure>
<figcaption class="code-label">The @import method</figcaption>
<pre><code data-language="html"><style>
@import url('a.css');
</style> </code></pre>
</figure>
<p>
Steve Souders, author of
<em><a href="http://www.amazon.com/dp/0596529309?tag=stevsoud-20&camp=14573&creative=327641&linkCode=as1&creativeASIN=0596529309&adid=1S1KP4EV129EN37422C0&" target="_blank" title="High Performance Web Sites">High Performance Web Sites</a></em>,
recommends the use of the <code><link></code> element over the <code>@import</code> rule for performance reasons, among other things.
You can find his blog article on the subject
<a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/" target="_blank" title="Steve Souders discusses the @import rule">here</a>.
</p>
</li>
<li>
<h2 id="reset">Use a CSS Reset</h2>
<p>
Unfortunately for interactive developers, the baseline styles applied to HTML elements differ widely from browser to
browser. It is a long standing practice to include a CSS reset within the global stylesheet for a website. This is the best way to
ensure a consistent result from browser to browser. There are many such resets, but one good one that has been adapted for the use
of HTML5 elements
<a href="http://html5doctor.com/html-5-reset-stylesheet/" target="_blank" title="An example of a CSS reset">can be found here</a>
</p>
<h3>Normalize.css</h3>
<p>
One criticism of CSS resets is that the browser default styles are useful, and having to redefine them after resetting everything is
wasteful. <a href="http://necolas.github.com/normalize.css/" target="_blank" title="Normalize.css">Normalize.css</a> seeks to address
these concerns by preserving default styles, changing only those styles necessary to ensure consistency across browsers.
</p>
<p>
The resetters will be quick to point out that the browser landscape is ever-changing, and it may be dangerous to assume that these normalizations will
hold up indefinately without maintenance.
</p>
<p>
As with anything else, the decision of whether to user a reset or Normalize.css depends on the needs of your project and your team's level of comfort with
each approach.
</p>
</li>
<li>
<h2 id="font-sizes">Specifying Font Sizes</h2>
<p>
Font sizes can be specified in several ways: pixels, percentages, ems, and points. The choice as to which should be used largely depends
on what browsers you are obligated to support for your project. Modern browsers provide either text resizing of pixel units and/or full-page zooming,
but Internet Explorer 6 relies on relative font sizing (like ems or percentages) for this functionality. A good rule of thumb is to use
pixels (which offer the most absolute control of font sizes) if you are not obligated to support IE6.
</p>
<p>
If IE6 must be supported, it helpful to recognize that, by default, body text size is set to 16 pixels across all major browsers
(one thing they managed to do the same, thankfully). Since calculating em values based on the number 16 is tiresome, a good practice
is to set the font size of the body element to 0.625em. This converts the baseline font size to 10 pixels, and other font sizes can
be given as a multiplier of 10 (which is easy to handle mentally).
</p>
<p>
For instance, if a design calls for paragraph text to be 12 pixels in size and <code><h1></code> text to be 18 pixels, you would specify
the following styles:
</p>
<figure>
<figcaption class="code-label">Example of using ems to support text resizing in IE6</figcaption>
<pre><code data-language="css">body{
font-size:0.625em; /* equivalent to 10px */
}
p{
font-size:1.2em; /* equivalent to 12px */
line-height:1.25em; /* relative to the p font size, so 15px */
}
h1{
font-size:1.8em; /* equivalent to 18px */
}</code></pre>
</figure>
</li>
<li>
<h2 id="writing-good-selectors">Writing Good Selectors</h2>
<p>
Writing good CSS selectors is important for maintainability and performance. To understand why, you have to first realize
two things: <strong>browsers parse CSS selectors from right to left</strong>, and different selector types have different
relative weights (this latter part is called <strong>CSS specificity</strong>).
</p>
<p>
Let's use the following set of selectors as a reference to illustrate these concepts:
</p>
<figure>
<figcaption class="code-label">CSS selector examples</figcaption>
<pre><code data-language="css">.highlight{
color:blue;
}
span.highlight{
color:red;
}
#note-section .highlight{
color:yellow;
}
div.footer .highlight{
color:green;
}</code></pre>
</figure>
<p>
If we were to assume that browsers parsed as we read, from left to right, then we would think that each of these selectors
is more efficient than the last. The opposite is true. It is faster for a browser to find all elements with the <code>highlight</code>
class than it is to first find those elements, then verify that each of those elements meets the additional selector
requirements (such as being a <code><span></code>, or having a <code><div></code> as an ancestor).
</p>
<p>
Of course we can't always use the simplest selectors. We may want our highlights to be blue in general, but yellow within the
note section of our page and green within the footer. This is where being more specific helps, but there's a problem with our
example set above: ID selectors are infinitely more powerful than class selectors, so the footer highlight will end up being yellow,
not green.
</p>
<p>
The only way to trump the ID selector would be to add an <em>another</em> ancestor element with an ID selector into the selection
chain, or to use the <code>!important</code> designator. You can probably see how this can escalate into a selector arms race,
with each overriding selector getting longer and longer (not to mention slower and slower!).
</p>
<p>
To avoid these issues, here are some specific guidelines to follow:
</p>
<ul>
<li>
<p>
Use the simplest selector necessary to reach your target elements and override any pre-existing styles (note that an
equivalent selector located lower in the source code is sufficient for this)
</p>
</li>
<li>
<p>
Avoid ID selectors unless you're certain that the style will never be overridden
</p>
</li>
<li>
<p>
Never use the <code>!important</code> designator
</p>
</li>
<li>
<p>
Avoid the wildcard selector (<code>*</code>)
</p>
</li>
<li>
<p>
Don't qualify ID selectors (e.g. <code>div#myid</code>) or class selectors (e.g. <code>table.results</code>) unless its
necessary for readability or for efficiency
</p>
</li>
</ul>
<p>
For further reading, check out these articles on
<a href="http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors" target="_blank" title="Selector efficiency">selector efficiency</a>,
<a href="http://css-tricks.com/specifics-on-css-specificity/" target="_blank" title="CSS specificity">CSS specificity</a>, and
<a href="http://www.quirksmode.org/css/contents.html" target="_blank" title="Browsers support for CSS selectors">browser support for CSS selectors</a>
</p>
</li>
<li>
<h2 id="shorthand">Shorthand</h2>
<p>
In general, CSS shorthand is preferred because of its terseness, and the ability to later go back and add in values that are
already present, such as the case with margin and padding. Developers should be aware of the TRBL acronym, denoting the order
in which the sides of an element are defined, in a clock-wise manner: Top, Right, Bottom, Left. If bottom is undefined, it
inherits its value from top. Likewise, if left is undefined, it inherits its value from right. If only the top value is defined,
all sides inherit from that one declaration.
</p>
<p>
For more on reducing stylesheet code redundancy, and using CSS shorthand in general:
</p>
<ul>
<li>
<p>
<a href="http://sonspring.com/journal/css-redundancy" target="_blank" title="CSS redundancy">http://sonspring.com/journal/css-redundancy</a>
</p>
</li>
<li>
<p>
<a href="http://qrayg.com/journal/news/css-background-shorthand" target="_blank" title="Background shorthand">http://qrayg.com/journal/news/css-background-shorthand</a>
</p>
</li>
<li>
<p>
<a href="http://dustindiaz.com/css-shorthand" target="_blank" title="CSS shorthand">http://dustindiaz.com/css-shorthand</a>
</p>
</li>
</ul>
</li>
<li>
<h2 id="useful-links">Useful Links</h2>
<p>
The web is rife with CSS tools and references. Some useful links are provided below:
</p>
<ul>
<li>
<p>
<a href="http://css3please.com/" target="_blank" title="CSS3 Please">http://css3please.com/</a>
</p>
</li>
<li>
<p>
<a href="http://mothereffingtextshadow.com/" target="_blank" title="CSS3 Text Shadow tool">http://mothereffingtextshadow.com/</a>
</p>
</li>
<li>
<p>
<a href="http://caniuse.com/" target="_blank" title="Can I use tool">http://caniuse.com/</a>
</p>
</li>
<li>
<p>
<a href="http://html5readiness.com/" target="_blank" title="HTML5 Readiness">http://html5readiness.com/</a>
</p>
</li>
<li>
<p>
<a href="http://www.spritecow.com/" target="_blank" title="Sprite Cow">http://www.spritecow.com/</a>
</p>
</li>
</ul>
</li>
</ul>
</section>
</div>
</body>
</html>