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?

WELL… A LOOK AT HISTORY

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 superfluous 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

GOOD BYE OLD BOX MODEL WOES

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

CLASS NAMING

CLASS NAMING IS HARD

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; }

TOOLS & METHODOLOGIES

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

CLASSES VS. ID’S

FAVORITE WORD:

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 NESTINGTRY 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

IMAGES OFTEN ACCOUNT FOR MOST OF THE DOWNLOADED

BYTES ON A PAGE. !

OPTIMIZING YOUR IMAGES CAN OFTEN YIELD LARGE BYTE SAVINGS AND PERFORMANCE

IMPROVEMENTS.

MAKE A CALL

BIG OR SMALL

1X, 1.5X OR 2X?

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 / ChromePicture: ASSIGNED (targeted for Chrome 38)srcset: IMPLEMENTED/SHIPPED (Chrome 34)

WebKit / SafariPicture: UNCONFIRMED (not implemented)srcset: IMPLEMENTED

Mozilla FirefoxPicture: ASSIGNED (soon in Nightly)srcset: ASSIGNED (soon in Nightly)

Microso! Internet ExplorerPicture: UNDER CONSIDERATIONsrcset: UNDER CONSIDERATION

PERFORMANCE

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

RENDERING PAGES

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

Every request fetched inside of HEAD, will postpone the rendering of the page!

LOAD JS AFTER CSS

LIMIT HTTP REQUESTS & WHY

CRITICAL RENDERING PATH

A WORD ON WORDPRESS

I ❤️ WORDPRESS

I 👿 WORDPRESS

TELL YOUR FRIENDS!

TAMING FRAMEWORK OVERHEAD

FOUNDATION, BOOTSTRAP, ETC.

B

CSS SPRING CLEANING

JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)

JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)

MISSEDIN-HKG.COM

BEFORE OPTIMISATION

AFTER OPTIMISATION

BAD NEWS: 15.689!

TOOLS & STUFF

CODE GUIDE

http://mdo.github.io/code-guide/

Standards for developing flexible, 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

LEAN BACK NOW

FRONT END IS ‘JUST’ HTML & CSS & JS

THANKS!

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

Front End Best Practices

Internet

Transcript of Front End Best Practices