Slow kinda sucks

Slow Kinda Sucks. A look at OOCSS, some HTML5 and Web Performance Tim Wright Tim Wright, @csskarma

A Brief Introduction Boston University CSSKarma Smashing Magazine & SitePoint Snappy dresser

The Goal.

What we’re going over . Object Oriented CSS - what - how - why . Some HTML 5 - forms - communication . Speed

TheStory.

Web site

header 16K navigation sidebarmediacontent footer

header 17K navigation tipsmediacontent footer

#sidebar .tips{  background:#f1f1f1;}#sidebar .tips h3{  font: 1.3/16px Serif;  background: url(../images/gradient_blue.png) repeat‐x 0 0;  text‐shadow: 0 1px 0 rgba(255,255,255,.7);  padding: 0 10px;}#sidebar .tips ul{  margin:10px 10px 15px 30px;  list‐style:disc;}

header navigation tipsmedia newscontent footer

20K#content .tips {  }#sidebar .tips {  }#sidebar .tips,#sidebar .news {  }

header navigation tipsmedia social newscontent footer

30K#content .tips {  }#sidebar .tips {  }#sidebar .tips,#sidebar .news,#sidebar .social {  }#sidebar .social .twitter{  }#sidebar .social .facebook{  }

header navigation tipsmedia social news tweetscontent quicklinks footer

Elegant and lean CSS.

Fat sack of crap.

Object Oriented CSS

OOCSS What is it?

OOCSS<div class=”rounded bg-brown one-of-three”> describing the area

OOCSSWhy it feels weird sometimes.

OOCSSHow it relates to progressive enhancement. 1. Structure 2. Presentation 3. Behavior

OOCSSHow it relates to progressive enhancement. 1. Structure 2. Presentation 3. Behavior 1. HTML 2. CSS 3. JavaScript

The process

.dashboard {  }

.dashboard {  }.component {  }

.dashboard {  }.component {  }.list‐inline {  }.list‐bulk {  }.list‐block {  }

.dashboard {  }.component {  }.list‐inline {  }.list‐bulk {  }.list‐block {  }.ellipsify {  }

.dashboard {  }.component {  }.list‐inline {  }.list‐bulk {  }.list‐block {  }.ellipsify {  }.component h2{  }

Building HTML based oncomponents

<div class=”dashboard”> <div class=”component”> <h2>Your Tweets</h2> <div class=”container ellipsify”> <p>[ my boring tweet ]</p> </div><!‐‐/.container .ellipsify‐‐> </div><!‐‐/.component‐‐></div><!‐‐/.dashboard‐‐>

Goal: Be predictable. helping you, others and the future.

CSS Components contour + background + content objects

HTML Components headings grids buttons modules lists

Goal: Createcomponents & combine.

OOCSSYou’ve probably used it.

OOCSS .right { float:right; } .left { float:left; }.clearfix { clear:both; }

Using it more.

Good uses.

Combining components<div class=”section”> <div class=”module media”></div> <div class=”module size1of3”></div> <div class=”module size2of3”></div></div> describing document structure & content.

Slimming your JavaScript accessible code elem.attr(‘class’,‘hide’); vs. elem.hide();

Slimming your JavaScript accessible code .hide { position: absolute; top: ‐9999px; left: ‐9999px; }

Slimming your JavaScript accessible codevar elem = $(‘.section’).first();if(elem.hasClass(“hide”)){ $(this).click(function(){ elem.hide().removeClass(‘hide’).fadeIn(500); });} else { $(this).click(function(){ elem.fadeOut(500).addClass(‘hide’).show(); });}

Slimming your JavaScript accessible code elem.setAttribute("class", "hide"); or elem.style.display = “none”;

CMS, working withothers & prototyping

Bad uses.

Taking it too far<div class=”sidebar rounded‐5px”> <div class=”content gradient‐blue”> <h2 class=”size‐20px”>News</h2> </div></div>

Goal: ... H1 - Headings H2 - Should H3 - Be H4 - Headings

“If modules look toosimilar to includeon the same page,they are too similarto include in thesame site.@stubbornella

OOCSS Framework all.css core.css    plugins.css https://github.com/stubbornella/oocss

OOCSS Framework @import url("core/core.css"); @import url("plugins/plugins.css"); https://github.com/stubbornella/oocss

OOCSS Framework @import url("libraries.css"); @import url("template/template.css"); @import url("grid/grids.css"); @import url("module/mod.css"); @import url("module/mod_skins.css"); @import url("media/media.css"); @import url("content.css"); @import url("heading/heading.css"); @import url("spacing/space.css"); @import url("table/table.css"); @import url("table/table_skins.css"); https://github.com/stubbornella/oocss

OOCSS Framework @import url("breadcrumb/breadcrumb.css"); @import url("tabs/tabs.css"); @import url("talk/talk.css"); @import url("talk/talk_skins.css"); https://github.com/stubbornella/oocss

Please don’t use it in production.

Don’t blindly use anything. Back-end principlesMy convoluted opinion Can we peacefully co-exist?Should I use it? What’s with the comic book references?

Some things I like about OOCSS

Some things I like about OOCSS- performance benefits

Some things I like about OOCSS- performance benefits- people won’t screw up your code

Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature

Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature- rapid prototyping last one

Some things I don’t like about OOCSS

Some things I don’t like about OOCSS- design information embedded in HTML

Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup

Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s

Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s- HTML 5 scalability

Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s- HTML 5 scalability- applying back-end to the front-end

Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s- HTML 5 scalability- applying back-end to the front-end- smug attitude last one

You have a friend in HTML5

HTML & JavaScript

the markup?

<head> Markup <!doctype html> <html lang=”en”> <head> <meta charset=”utf‐8”> vs.<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http‐equiv="Content‐type" content="text/html; charset=utf‐8" />

<head> Markup<script type=”text/javascript” src=”js/script.js”></script> & <style type=”text/css”></style><link rel=”stylesheet” href=”css/style.css” type=”text/css”> vs. <script src=”js/script.js”></script> & <style></style> <link rel=”stylesheet” href=”css/style.css”>

Form Elements<input type=”email” placeholder=”you@email.com” required> previously javascript <input type=”date”>

<!doctype html><html lang=”en”><head> <title>E‐mail Form</title> <meta charset=”utf‐8”> <link rel=”stylesheet” href=”css/style.css”></head><body> <form action=”” method=”post”> <label for=”fn”>Name:</label> <input type=”text” id=”fn” required> <label for=”e”>E‐mail:</label> <input type=”email” id=”e” name=”e” placeholder=”you@email.com”  required> <button type=”submit”>Submit</button> </form> <script src=”js/script.js”></script></body></html>

the javascript?

Selectorsvar section = document.getElementByClassName(“section”);var section = document.getElementByClassName(“section red”);var section = document.getElementByClassName(“section”)                      .getElementByClassName(“section‐inner”); http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

getElementsByClassName http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

Selectorsvar lis = document.querySelectorAll("ul li:nth‐child(odd)");var tds = document.querySelectorAll("div.test > ul > li");var el = document.querySelector("div.test > ul > li");

Web Socketshttp://www.csskarma.com/lab/html5/websockets/

Web Workers top priority thread worker thread (non-blocking)http://www.csskarma.com/lab/html5/webworker/worker- simple.html

Web Workershttp://slides.html5rocks.com/#web-workers

Resources csslint.netgithub.com/stubbornella/oocss websocket.org 960.gs

What we went over . Object Oriented CSS - what - how - why . Some HTML 5 - forms - communication

Thanks!Questions?Comments?

Communication E-mail: timwright12@gmail.com Twitter: @csskarmaSlides n’ stuff: www.csskarma.com/presentations/webspeed/

Slow kinda sucks

by Tim Wright on Jun 22, 2011

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 3

Statistics

Slow kinda sucks Presentation Transcript

http://www.coderwall.com	2
http://www.slideshare.net	1