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.
The
Story.

6.
Web site

7.
header 16K
navigation
sidebar
media
content
footer

8.
header 17K
navigation
tips
media
content
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
tips
media
news
content
footer

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

12.
header
navigation
tips
media
social
news
content
footer

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

14.
header
navigation
tips
media
social
news
tweets
content
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.
OOCSS
Why it feels weird sometimes.

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

24.
OOCSS
How 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 on
components

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: Create
components & combine.

37.
OOCSS
You’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 code
var 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 with
others & 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 too
similar to include
on the same page,
they are too similar
to include in the
same 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 principles
My 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.
Selectors
var 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.
Selectors
var 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 Sockets
http://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 Workers
http://slides.html5rocks.com/#web-workers

83.
Resources
csslint.net
github.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: @csskarma
Slides n’ stuff:
www.csskarma.com/presentations/webspeed/