Frontend Guidelines

HTML and CSS good practices and what NOT to do (:

Transcript

1. FRONTEND GUIDELINES
2. HTML
3. SEMANTICS <h1> <figure> <img alt=‘Company’ src=‘logo.png’> </figure> </h1> <h1> <img alt=‘Company’ src=‘logo.png’> </h1> <!-- bad --> <!-- good -->
4. <div id=‘main’> <div class=‘article’> <div class=‘header’> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime=‘2015-02-21’>21st Feb, 2015</time></p> </header> <p>…</p> </article> </main> <!-- bad --> <!-- good --> SEMANTICS
5. <meta http-equiv=Content-Type content=‘text/html; charset=utf-8’ /> <link rel=‘stylesheet’ href=‘style.css’ type=‘text/css’ /> <input type=‘email’ placeholder='you@email.com’ required=‘required’ /> <script src=‘main.js’ type=‘text/javascript’></script> <meta charset=‘utf-8’> <link rel=‘stylesheet’ href=‘style.css’> <input type=‘email’ placeholder='you@email.com’ required> <script src=‘main.js’></script> <!-- good --> <!-- bad --> BREVITY
6. <h1><img alt=‘Logo’ src=‘logo.png’></h1> <div class=‘button’></div> <h1><img alt=‘Acid Labs’ src=‘logo.png’></h1> <button></button> <!-- good --> <!-- bad --> ACCESSIBILITY
7. <!doctype html> <html> <head> <title></title> </head> </html> <!doctype html> <html lang=‘en’> <head> <meta charset=‘utf-8’> <title></title> </head> </html> <!-- good --> <!-- bad --> LANGUAGE
8. <!doctype html> <html> <head> <title></title> <script src=analytics.js></script> </head> </html> <!doctype html> <html lang=‘en’> <head> <meta charset=‘utf-8’> <title></title> </head> <body> <script src=analytics.js></script> </body> </html> <!-- good --> <!-- bad --> PERFORMANCE
9. CSS
10. SEMI COLONS div { color: red } div { color: red; } /* bad */ /* good */
11. NATURAL FLOW img { display: block; } img { vertical-align: middle; } /* bad */ /* good */
12. NATURAL FLOW div { width: 100px; position: absolute; right: 0; } div { width: 100px; margin-left: auto; } /* bad */ /* good */
13. SELECTORS div:first-of-type :last-child > p ~ * div:first-of-type .info /* bad */ /* good */
14. SELECTORS img[src$=svg], ul > li:first-child { opacity: 0; } [src$=svg], ul > :first-child { opacity: 0; } /* bad */ /* good */
15. SPECIFICITY .bar { color: green !important; } .foo { color: red; } .foo.bar { color: green; } .foo { color: red; } /* bad */ /* good */
16. OVERRIDING li { visibility: hidden; } li:first-child { visibility: visible; } li + li { visibility: hidden; } /* bad */ /* good */
17. INHERITANCE div h1, div p { text-shadow: 0 1px 0 #fff; } div { text-shadow: 0 1px 0 #fff; } /* bad */ /* good */
18. LANGUAGE :nth-child(2n + 1) { transform: rotate(360deg); } :nth-child(odd) { transform: rotate(1turn); } /* bad */ /* good */
19. BREVITY div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; } /* bad */ /* good */
20. PREFIXES div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; } /* bad */ /* good */
21. ANIMATIONS div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } } div:hover { transition: 1s; transform: translateX(100px); } /* bad */ /* good */
22. UNITS div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; } div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; } /* bad */ /* good */
23. COLORS div { color: hsl(103, 54%, 43%); } div { color: #5a3; } /* bad */ /* good */
24. DRAWING div::before { content: url(white-circle.svg); } div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } /* bad */ /* good */