web design best practices
TRANSCRIPT
Web DesignBest Practices
1
JoeMainwaringSoftware Engineer, HighgroundInstructor, Startup Institute
I’m a self-taught developer who embraced HTML
during the dot-com era. Today, I use modern technologies to build scalable real-time apps for
the cloud, desktop, and mobile.
ANGULAR.JS
2
CSS3
HTML5
NODE.JS
SWIFT
PHONEGAP
BestPractices
File Naming
Names for your project, files, and folders should be short, lowercase, and use dashes instead of
spaces.
4
\\ Incorrect My Really Awesome Project/Facebook Profile Picture.jpg
\\ Not Ideal my-really-awesome-project/facebook-profile-picture.jpg
\\ Ideal my-project/avatar.jpg
FileOrganization
5
Keep your files organized into buckets by their
type. Avoid adding sub-folders to buckets with less than 25 files.
Path File Typesmy-project/ .html
my-project/css .cssmy-project/fonts .eot .ttf .woffmy-project/img .jpg .png .gif .svgmy-project/js .js
HTML Syntax
If an element has no nested elements, its closing tag can remain on the same line as the opening
tag.
6
<!-- Incorrect --><div><p>Foo</p></div><!-- Not Ideal --><div></div><!-- Correct --><div></div>
HTML Syntax
7
Nested elements should start on a new line and be indented within the parent element.
<!-- Incorrect --><div><p>Foo</p></div><!-- Incorrect --><div><p>Foo</p></div><!-- Correct --><div> <p>Foo</p></div>
HTML Syntax
Always use "double" quotes, never 'single' quotes, on attributes.
8
<!-- Incorrect --><div class='single-quote'></div><!-- Correct --><div class="double-quote"></div>
HTML Syntax
9
Include a trailing slash in self-closing elements
<!-- Incorrect --><img src="foo.jpg" class="bar" > <!-- Correct --><img src="foo.jpg" class="bar" />
HTML Syntax
Do not omit optional closing tags
10
<!-- Incorrect --><ul> <li>Foo <li>Bar <li>Baz</ul> <!-- Correct --><ul> <li>Foo</li> <li>Bar</li> <li>Baz</li></ul>
HTML5 Doctype
11Every html document should start with the
DOCTYPE tag.
Note: Doctype does not have a closing tag
<!-- Incorrect --><html> <head>...</head> <body>...</body><html>
<!-- Correct --><!DOCTYPE html><html> <head>...</head> <body>...</body><html>
Character Encoding
Quickly and easily ensure proper rendering of your content by declaring an explicit character
encoding. When doing so, you may avoid using character entities in your HTML, provided their
encoding matches that of the document (UTF-8).
12
<head> <meta charset="UTF-8"> </head>
IncludingStylesheets
13
Stylesheets are nested in the <head> section of your HTML document.
<!-- Incorrect --><!DOCTYPE html><html> <head>...</head> <body> <link rel="stylesheet" href="css/style.css"> </body><html><!-- Correct --><!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/style.css"> </head> <body>...</body><html>
Attribute Naming
For unique attributes like id & name should follow the camelCasing convention.
Pro Tip: Avoid excessive use of Ids by applying
them only to elements which represent major sections or unique components of your document.
14
<!-- Incorrect --><section id="foo-bar">...</section><!-- Correct --><section id="fooBar">...</section>
AttributeNaming
15
Class names should be formatted using lowercase and dashes.
<!-- Incorrect --><img class="fooBar" src="img/baz.jpg" /> <!-- Incorrect --><img class="foo_bar" src="img/baz.jpg" /> <!-- Correct --><img class="foo-bar" src="img/baz.jpg" />
Attribute Order
Attributes which uniquely identify an element (id, name) should come first for ease of readability,
followed by classes, which are typically the most common attribute found across all elements in an
HTML document.
16
<!-- Incorrect --><img src="img/foo.jpg" id="foo" class="bar baz" /> <!-- Correct --> <img id="foo" class="bar baz" src="img/foo.jpg" />
Reducing Markup
17Whenever possible, avoid superfluous
parent elements when writing HTML. Many times this requires iteration and refactoring,
but produces less HTML.
<!-- Not so great --><section> <div class="row"> <div class="col-left category">...</div> <div class="col-right category">...</div> </div> <div class="row"> <div class="col-left category">...</div> <div class="col-right category">...</div> </div></section>
<!-- Better --><section> <div class="row"> <div class="col-left category">...</div> <div class="col-right category">...</div> <div class="col-left category">...</div> <div class="col-right category">...</div> </div></section>
CSS Syntax
Include one space before the opening brace of declaration blocks for readability.
18
// Incorrect .foo{display: block;} // Correct.foo {display: block;}
CSS Syntax
19
For each declaration within a declaration block:• Include one space after : for each declaration• Do not include one space before : for each declaration• End all declarations with a semi-colon
// Incorrect.foo {display:block;}// Incorrect.foo {display : block;}// Incorrect.foo {display: block}// Correct.foo {display: block;}
CSS Syntax
Declarations with multiple property values should include a space after each comma
20
// Incorrect.foo {box-shadow: 0 1px 2px #ccc,inset 0 1px 0 #fff;} // Correct.foo {box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;}
CSS Syntax
21
Avoid specifying units for zero values
// Incorrect.foo {margin: 0px;}// Correct.foo {margin: 0;}
CSS Selectors
22Keep selectors short and strive to limit the
number of elements in each selector to three.
// Less Idealsection ul.nav li a {text-decoration: none;}
// Correctul.nav a {text-decoration: none;}
Single Declarations
Selectors with a single declaration can be kept on a single line
23
// Incorrect.foo { margin: 0px; }// Correct.foo {margin: 0;}
Multiple Declarations
24
For selectors with multiple declarations:• Each declaration should appear on its own line• Declarations are nested within the selector block• Place closing braces of declaration blocks on a new line
// Incorrect.Foo {Display: Block; Position: Relative;} // Incorrect.Foo {Display: Block;Position: Relative; }// Incorrect.Foo { Display: Block; Position: Relative;}// Correct.Foo { Display: Block; Position: Relative; }
Declaration Order
Declarations should be arranged alphabetically within selectors since in-browser developer tools
will list declarations this way.
25
// Incorrect.Foo { Position: Relative; Top: 0; Left: 12Px; Display: Block; }// Correct.Foo { Display: Block; Left: 0; Position: Relative; Top: 0;}
Selector Organization
26
CSS Selectors should be arranged in groupings by the component they apply to. Grouping order
should mirror the flow of your HTML documents.
Selectors that do not belong to any one specific component should be arranged together under a
utility group after all component groupings.
// Incorrectheader { background-color: #034f80; display: block;}footer { background-color: #000000; }header nav ul {list-style: none;} // Correctheader { background-color: #034f80; display: block;}header nav ul {list-style: none;} footer { background-color: #000000; }
Find these best practices at:github.com/theaccordance/styleguide
