Download as PDF, PPTX
Uploaded byHolger Bartel
Front End Best Practices
This document provides best practices, tips, and methodologies for front-end development, focusing on HTML, CSS, and JavaScript. Key topics include validation, reducing markup, naming conventions, and performance optimization, as well as tools like SMACSS, BEM, and CSS preprocessors. The presentation emphasizes the importance of image optimization, responsive design, and properly managing CSS and JavaScript for improved web performance.
More Related Content
![[Basic HTML/CSS] 5. css - selector, units](https://cdn.slidesharecdn.com/ss_thumbnails/5-170304052513-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Front End Best Practices
- 1. FRONT END BEST PRACTICES HolgerBartel | @foobartel | WomenWhoCodeHK 23/07/2014 A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development
- 2. “FRONT END ISJUST HTML & CSS & JS”
- 3.
- 4. –@maddesigns “simple: do theright thing! :)” Q: WHAT IS YOUR FAVORITE FRONT END BEST PRACTICE?
- 5. WELL… A LOOK ATHISTORY
- 6.
- 7. WHAT EXACTLY ISTHE RIGHT THING?
- 8. GOOD OLD TIPNO. 1: VALIDATION http://validator.w3.org ! http://jigsaw.w3.org/css-validator/
- 9. Whenever possible, avoidsuperfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. REDUCING MARKUP
- 10. <div class=“button”> <span class=“x”> <a href=“#”>Link</a> </span> </div>
- 11.
- 12. GOOD BYE OLD BOXMODEL WOES
- 13. /* apply a natural box layout model to all elements */ ! *, *:before, *:after { -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing: border-‐box; http://www.paulirish.com/2012/box-sizing-border-box-ftw/
- 14. px is anabsolute unit of measurement - px units don't scale ! em is not an absolute unit - it is a unit that is relative to the currently chosen font size. PIXELS VS. EMS
- 15. body { font-‐size:62.5%; } h1 { font-‐size: 2.4em; } /* =24px */ p { font-‐size: 1.4em; } /* =14px */ li { font-‐size: 1.4em; } /* =14px? */ ! li li { } ! 1.4em = 14px BUT 14 * 1.4 = 20 FONT SIZE COMPOUNDS
- 16. The em unitis relative to the font-size of the parent, which causes the compounding issue. ! The rem unit is relative to the root—or the html—element. REM == ROOT EM
- 17.
- 18. CLASS NAMING ISHARD
- 19.
- 20. USE CLASS WITH SEMANTICSIN MIND Choose your class names to what the element is instead of how it looks
- 21. .blue-‐box { background: #51A7F9; }
- 22. .blue-‐box { background: #DC0100; }
- 23. .box { background: #F28717; }
- 24.
- 25. SMACSS SCALABLE AND MODULAR ARCHITECTUREFOR CSS https://www.smacss.com
- 26.
- 27.
- 28. DON’T MAKE YOURLIFE HARDER THAN IT NEEDS TO BE WITH SPECIFICITY
- 30.
- 31.
- 32. 1 ELEMENT div 0 -‐ 0 -‐ 1
- 33. 2 ELEMENTS div 0 -‐ 0 -‐ 2
- 34. 1 CLASS .classname 0 -‐ 1 -‐ 0
- 35. 1 PSEUDO-CLASS :last-‐child 0 -‐ 1 -‐ 0
- 36. 1 ELEMENT 1CLASS li.classname 0 -‐ 1 -‐ 1
- 37. 1 ID SELECTOR #div 1 -‐ 0 -‐ 0
- 38. 2 ID SELECTORS 1ELEMENT SELECTOR #divitis #div a 2 -‐ 0 -‐ 1
- 39. style=“” 1 -‐ 0 -‐ 0 -‐ 0 INLINE STYLE
- 40. !Important 1 -‐ 0 -‐ 0 -‐ 0 -‐ 0 !IMPORTANT
- 43. SASS/SCSS NESTING TRY TONOT NEST MORE THAN 3 LEVELS DEEP
- 44. Sass/SCSS: .classname1 { .classname2 { … } } Output: .classname1 .classname2 { … }
- 45. div.pp_woocommerce .pp_arrow_prev:before, div.pp_woocommerce .pp_arrow_next:before, div.pp_woocommerce .pp_previous:before, div.pp_woocommerce .pp_next:before { line-‐height: 1.15 !important } #footer #footer_bar_left #container .headline { position: absolute; top: 0; left: 20px; }
- 46. LESS/SASS OUTPUT FILE SIZEIS USUALLY OK DESPITE LONGER SELECTOR CHAINS
- 47. DON’T WORRY ABOUT THESIZE OF YOUR CSS ! RATHER CARE ABOUT IMAGE SIZE
- 48.
- 49. IMAGES OFTEN ACCOUNTFOR MOST OF THE DOWNLOADED BYTES ON A PAGE. ! OPTIMIZING YOUR IMAGES CAN OFTEN YIELD LARGE BYTE SAVINGS AND PERFORMANCE IMPROVEMENTS.
- 50.
- 51.
- 52. 1X, 1.5X OR2X?
- 53.
- 55.
- 56. All New! THE PICTURE ELEMENT <picture> <source media="(min-‐width: 45em)” srcset="large.jpg"> <source media="(min-‐width: 18em)" srcset="med.jpg"> <img src="small.jpg" alt=“A smiling icebear"> </picture>
- 57. Blink / Chrome Picture:ASSIGNED (targeted for Chrome 38) srcset: IMPLEMENTED/SHIPPED (Chrome 34) WebKit / Safari Picture: UNCONFIRMED (not implemented) srcset: IMPLEMENTED Mozilla Firefox Picture: ASSIGNED (soon in Nightly) srcset: ASSIGNED (soon in Nightly) Microso Internet Explorer Picture: UNDER CONSIDERATION srcset: UNDER CONSIDERATION
- 58.
- 60.
- 61.
- 62. Waiting for theDOM and CSSOM to build the render tree. ! Blocking JavaScript until the CSS file is downloaded and parsed: the JavaScript may query the CSSOM RENDER-BLOCKING h ps://developers.google.com/speed/docs/insights/BlockingJS
- 63. Every request fetchedinside of HEAD, will postpone the rendering of the page! LOAD JS AFTER CSS
- 64. LIMIT HTTP REQUESTS& WHY
- 65.
- 66.
- 67.
- 68.
- 76.
- 77.
- 78.
- 79.
- 80. JUST LIKE WITHT-SHIRTS (OR OTHER STUFF) JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)
- 81.
- 83.
- 84.
- 87.
- 88.
- 89. CODE GUIDE http://mdo.github.io/code-guide/ Standards fordeveloping flexible, durable, and sustainable HTML and CSS.
- 90.
- 91.
- 92.
- 93. DEVICE TESTING Adobe EdgeInspect ! Ghostlab ! BrowserSync! ! !
- 94.
- 95.
- 96.
- 97.
- 98. FRONT END IS‘JUST’ HTML & CSS & JS
- 99. THANKS! Holger Bartel |@foobartel | WomenWhoCodeHK 23/07/2014