Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014

1. FRONT END
BEST PRACTICES
Holger Bartel | @foobartel | WomenWhoCodeHK 23/07/2014
A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development

2. “FRONT END IS JUST
HTML & CSS & JS”

3. EASY!

4. –@maddesigns
“simple: do the right thing! :)”
Q: WHAT IS YOUR FAVORITE FRONT END BEST
PRACTICE?

5. WELL…
A LOOK AT HISTORY

6. http://www.evolutionoftheweb.com/

7. WHAT EXACTLY IS THE
RIGHT THING?

8. GOOD OLD TIP NO. 1:
VALIDATION
http://validator.w3.org
!
http://jigsaw.w3.org/css-validator/

9. Whenever possible, avoid superfluous 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. <a
href=“#”
class=“button”>Link</a>
THIS IS BETTER

12. GOOD BYE OLD
BOX MODEL 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 an absolute 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 unit is 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. CLASS NAMING

18. CLASS NAMING IS HARD

19. SEMANTIC CLASSES VS
PRESENTATIONAL
CLASSES

20. USE CLASS WITH
SEMANTICS IN 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. TOOLS &
METHODOLOGIES

25. SMACSS
SCALABLE AND MODULAR
ARCHITECTURE FOR CSS
https://www.smacss.com

26. http://www.oocss.org
OOCSS
OBJECT ORIENTED CSS

27. http://www.bem.info
BEM
BLOCK, ELEMENT, MODIFIER

28. DON’T MAKE YOUR LIFE
HARDER THAN IT NEEDS TO BE
WITH SPECIFICITY

30. CLASSES VS. ID’S

31. FAVORITE WORD:
SPECIFICITY

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 1 CLASS
li.classname
0
-­‐
1
-­‐
1

37. 1 ID SELECTOR
#div
1
-­‐
0
-­‐
0

38. 2 ID SELECTORS
1 ELEMENT 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 TO NOT 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 SIZE IS USUALLY OK
DESPITE LONGER SELECTOR CHAINS

47. DON’T WORRY ABOUT
THE SIZE OF YOUR CSS
!
RATHER CARE ABOUT
IMAGE SIZE

48. IMAGES

49. IMAGES OFTEN ACCOUNT FOR
MOST OF THE DOWNLOADED
BYTES ON A PAGE.
!
OPTIMIZING YOUR IMAGES
CAN OFTEN YIELD LARGE BYTE
SAVINGS AND PERFORMANCE
IMPROVEMENTS.

50. MAKE A CALL

51. BIG OR SMALL

52. 1X, 1.5X OR 2X?

53. https://imageoptim.com

55. RESPONSIVE ♥ SERVER
SIDE
http://www.ress.io

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. PERFORMANCE

60. h ps://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present?slide=id.p19

61. RENDERING PAGES

62. Waiting for the DOM 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 fetched inside of HEAD, will postpone
the rendering of the page!
LOAD JS AFTER CSS

64. LIMIT HTTP REQUESTS &
WHY

65. CRITICAL RENDERING
PATH

66. A WORD ON
WORDPRESS

67. I ❤️ WORDPRESS

68. I 👿 WORDPRESS

76. TELL YOUR FRIENDS!

77. TAMING FRAMEWORK
OVERHEAD

78. FOUNDATION,
BOOTSTRAP, ETC.
B

79. CSS SPRING CLEANING

80. JUST LIKE WITH T-SHIRTS
(OR OTHER STUFF)
JUST LIKE WITH T-SHIRTS
(OR OTHER STUFF)

81. MISSEDIN-HKG.COM

83. BEFORE OPTIMISATION

84. AFTER OPTIMISATION

87. BAD NEWS: 15.689!

88. TOOLS & STUFF

89. CODE GUIDE
http://mdo.github.io/code-guide/
Standards for developing flexible,
durable, and sustainable HTML and
CSS.

90. CHECK HTML5/CSS3
BROWSER FEATURES
http://www.caniuse.com

91. CODEKIT
STEROIDS
FOR WEB DEVELOPERS
https://incident57.com/codekit/

92. CROSS-BROWSER
TESTING
VirtualBox
!
Modern.ie
!
Browserstack.com
!
Sauce Labs

93. DEVICE TESTING
Adobe Edge Inspect
!
Ghostlab
!
BrowserSync!
!
!

94. PERFORMANCE TESTING
http://www.webpagetest.org
!
http://tools.pingdom.com/fpt/
!
https://developers.google.com/speed/pagespeed/
!
https://developer.yahoo.com/yslow/

95. GRUNT
JAVASCRIPT TASK
RUNNER
http://www.gruntjs.com

96. GULP
ANOTHER (FASTER)
TASK RUNNER
http://www.gulpjs.com

97. LEAN BACK NOW

98. FRONT END IS ‘JUST’
HTML & CSS & JS

99. THANKS!
Holger Bartel | @foobartel | WomenWhoCodeHK 23/07/2014