Web Design Best Practices
•
0 recomendaciones•462 vistas
I discuss various best practices for front end developers to apply to their projects to ensure consistency and quality across the entire project.
Recomendados
Recomendados
Más contenido relacionado
Último
Último (20)
Destacado
Destacado (20)
Web Design Best Practices
- 2. Joe Mainwaring Software Engineer, Highground Instructor, 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
- 4. 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
- 5. File Organization 5 Keep your files organized into buckets by their type. Avoid adding sub-folders to buckets with less than 25 files. Path File Types my-project/ .html my-project/css .css my-project/fonts .eot .ttf .woff my-project/img .jpg .png .gif .svg my-project/js .js
- 6. 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>
- 7. 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>
- 8. HTML Syntax Always use "double" quotes, never 'single' quotes, on attributes. 8 <!-- Incorrect --> <div class='single-quote'></div> <!-- Correct --> <div class="double-quote"></div>
- 9. 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" />
- 10. 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>
- 11. 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>
- 12. 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>
- 13. Including Stylesheets 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>
- 14. 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>
- 15. Attribute Naming 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" />
- 16. 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" />
- 17. 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>
- 18. CSS Syntax Include one space before the opening brace of declaration blocks for readability. 18 // Incorrect .foo{display: block;} // Correct .foo {display: block;}
- 19. 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;}
- 20. 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;}
- 21. CSS Syntax 21 Avoid specifying units for zero values // Incorrect .foo {margin: 0px;} // Correct .foo {margin: 0;}
- 22. CSS Selectors 22Keep selectors short and strive to limit the number of elements in each selector to three. // Less Ideal section ul.nav li a {text-decoration: none;} // Correct ul.nav a {text-decoration: none;}
- 23. Single Declarations Selectors with a single declaration can be kept on a single line 23 // Incorrect .foo { margin: 0px; } // Correct .foo {margin: 0;}
- 24. 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; }
- 25. 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; }
- 26. 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. // Incorrect header { background-color: #034f80; display: block; } footer { background-color: #000000; } header nav ul {list-style: none;} // Correct header { background-color: #034f80; display: block; } header nav ul {list-style: none;} footer { background-color: #000000; }
- 27. Find these best practices at: github.com/theaccordance/styleguide
- 28. http://joemainwaring.com | jm@theaccordance.com | @theaccordance Thank You