Front End Best Practices

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

“FRONT END IS JUST
HTML & CSS & JS”

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

http://www.evolutionoftheweb.com/

WHAT EXACTLY IS THE
RIGHT THING?

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

Whenever possible, avoid superﬂuous parent
elements when writing HTML. Many times this
requires iteration and refactoring, but produces less
HTML.
REDUCING MARKUP

<a
href=“#”
class=“button”>Link</a>
THIS IS BETTER

/*
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/

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

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

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

SEMANTIC CLASSES VS
PRESENTATIONAL
CLASSES

USE CLASS WITH
SEMANTICS IN MIND
Choose your class names to what the
element is instead of how it looks

.blue-‐box
{

background:
#51A7F9;

}

.blue-‐box
{

background:
#DC0100;

}

.box
{

background:
#F28717;

}

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

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

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

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

1 ELEMENT
div
0
-‐
0
-‐
1

2 ELEMENTS
div
0
-‐
0
-‐
2

1 CLASS
.classname
0
-‐
1
-‐
0

1 PSEUDO-CLASS
:last-‐child
0
-‐
1
-‐
0

1 ELEMENT 1 CLASS
li.classname
0
-‐
1
-‐
1

1 ID SELECTOR
#div
1
-‐
0
-‐
0

2 ID SELECTORS
1 ELEMENT SELECTOR
#divitis
#div
a
2
-‐
0
-‐
1

style=“”
1
-‐
0
-‐
0
-‐
0
INLINE STYLE

!Important
1
-‐
0
-‐
0
-‐
0
-‐
0
!IMPORTANT

SASS/SCSS NESTING
TRY TO NOT NEST MORE
THAN 3 LEVELS DEEP

Sass/SCSS:

.classname1
{

.classname2
{

…

}

}

 
Output:

.classname1
.classname2
{
…
}

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;

}

LESS/SASS
OUTPUT FILE SIZE IS USUALLY OK
DESPITE LONGER SELECTOR CHAINS

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

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

https://imageoptim.com

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

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>

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

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

Waiting for the DOM and CSSOM to build the render
tree.
!
Blocking JavaScript until the CSS ﬁle is downloaded
and parsed: the JavaScript may query the CSSOM
RENDER-BLOCKING
h ps://developers.google.com/speed/docs/insights/BlockingJS

Every request fetched inside of HEAD, will postpone
the rendering of the page!
LOAD JS AFTER CSS

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

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

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

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

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

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

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

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

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

FRONT END IS ‘JUST’
HTML & CSS & JS

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

Front End Best Practices

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Front End Best Practices (20)

More from Holger Bartel (13)

Recently uploaded (16)

Front End Best Practices