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

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

3.
The Goal.

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

5.
TheStory.

6.
Web site

7.
header 16K navigation sidebarmediacontent footer

8.
header 17K navigation tipsmediacontent footer

9.
#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;}

10.
header navigation tipsmedia newscontent footer

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

12.
header navigation tipsmedia social newscontent footer

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

14.
header navigation tipsmedia social news tweetscontent quicklinks footer

15.
3GB!

16.
Elegant and lean CSS.

17.
Fat sack of crap.

18.
Object Oriented CSS

19.
OOCSS What is it?

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

21.
OOCSS

22.
OOCSSWhy it feels weird sometimes.

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

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

25.
The process

26.
.dashboard { }

27.
.dashboard { }.component { }

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

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

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

31.
Building HTML based oncomponents

32.
<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‐‐>

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

34.
CSS Components contour + background + content objects

35.
HTML Components headings grids buttons modules lists

36.
Goal: Createcomponents & combine.

37.
OOCSSYou’ve probably used it.

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

39.
Using it more.

40.
Good uses.

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

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

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

44.
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(); });}

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

46.
CMS, working withothers & prototyping

47.
Bad uses.

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

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

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

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

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

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

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

55.
Please don’t use it in production.

56.
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?

57.
Some things I like about OOCSS

58.
Some things I like about OOCSS- performance benefits

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

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

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

62.
Some things I don’t like about OOCSS

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

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

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

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

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

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

69.
You have a friend in HTML5

70.
HTML & JavaScript

71.
the markup?

72.
<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" />

73.
<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”>

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

75.
<!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>

76.
the javascript?

77.
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/

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

79.
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");

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

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

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

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

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

85.
Thanks!Questions?Comments?

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