A look at OOCSS, HTML5 and Web performance

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!

17. Elegant and lean CSS.

18. Fat sack of crap.

20. Object Oriented CSS

24. OOCSS
What is it?

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

26. OOCSS

27. OOCSS
Why it feels weird sometimes.

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

29. OOCSS
How it relates to progressive enhancement.
1. Structure
2. Presentation
3. Behavior
1. HTML
2. CSS
3. JavaScript

30. The process

35. .dashboard { }

36. .dashboard { }
.component { }

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

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

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

40. Building
HTML
based on
components

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

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

43. CSS Components
contour
+
background
+
content objects

44. HTML Components
headings
grids
buttons
modules
lists

45. Goal: Create
components & combine.

47. OOCSS
You’ve probably used it.

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

49. Using it more.

50. Good uses.

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

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

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

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

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

56. CMS, working with
others & prototyping

57. Bad uses.

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

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

61. “
If modules look too
similar to include
on the same page,
they are too similar
to include in the
same site.
@stubbornella

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

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

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

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

66. Please don’t use it in production.

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

68. Some things I like about OOCSS

69. Some things I like about OOCSS
- performance benefits

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

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

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

73. Some things I don’t like about OOCSS

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

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

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

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

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

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

80. You have a friend in HTML5

81. HTML & JavaScript

82. the markup?

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

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

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

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

87. the javascript?

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

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

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

91. Web Sockets
http://www.csskarma.com/lab/html5/websockets/

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

93. Web Workers
http://slides.html5rocks.com/#web-workers

94. Resources
csslint.net
github.com/stubbornella/oocss
websocket.org
960.gs

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

96. Thanks!
Questions?
Comments?

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