Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code. Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.

1. Introduction To
OOCSS
Julie Cameron
@jewlofthelotus
Slides http://bit.ly/oocss_wks
Exercises http://bit.ly/oocss_ex
Workshop Prep

2. About Me
@jewlofthelotus
DERP.

3. About You
What is your name?
What is your 140 character bio?
What is your favorite CSS prop/value?

5. #cascade {
div.is {
span.delicate {
position: absolute !important;
}
}
}

6. “It’s almost a challenge to find a development
team that’s working on a codebase that’s more
than a couple of years old where the CSS isn’t
the most frightening and hated part of that
system.”
Andy Hume - CSS for Grownups

7. TOP DOWN CSS
=
REPETITION & BLOAT

8. SELECTOR MISUSE
=
SPECIFICITY HELL

9. BLOAT
+
BAD SELECTORS
=
BAD PERFORMANCE

10. !IMPORTANT
=
THE DEVIL

11. NONE OF THIS IS
SCALABLE OR
MAINTAINABLE.
A hot mess is what it is…

12. TOP
DOWN
OVERLY
SPECIFIC
CSS
HTML

13. WE’VE BEEN
COUPLING OUR
HTML & CSS

14. Coupled CSS Selectors

15. Object Oriented Cascading Stylesheets
OOCSS
https://github.com/stubbornella/oocss/wiki

16. A scalable, maintainable,
semantic, and predictable
approach to writing CSS.

17. OOCSS was created by Nicole Sullivan
while working for Facebook.
She created a reusable CSS module
called the “media object” to save
hundreds of lines of code.
stubbornella.org

18. The Media Object
“a content block containing a fixed-size
media element (e.g. image or video) along
with other variable-size content (e.g. text)”
https://github.com/stubbornella/oocss/wiki

19. The Media Object
“a content block containing a fixed-size
media element (e.g. image or video) along
with other variable-size content (e.g. text)”
https://github.com/stubbornella/oocss/wiki
AKA a Facebook status.

20. A Media Object
Media to the left and some
variable length content to
the right.
img.png

21. OBJECTS

22. Objects are the
abstraction of repetition.

23. Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ

24. Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS that styles those nodes

25. Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS that styles those nodes
3. JavaScript functionality tied to those nodes

26. Modules with Variations
.btn

27. Modules with Variations
.btn
.btn—primary .btn-small
CSS
.btn:hover

28. Modules with Variations
.btn
.btn.is—disabled .btn.is-active
CSS
JS
.btn—primary .btn-small
CSS
.btn:hover

29. Module Components
Object aka module / component / block .btn, .media

30. Module Components
Object aka module / component / block .btn, .media
Child Objects .media__img, .media__body
Relationships

31. Module Components
Object aka module / component / block .btn, .media
Modifiers .btn—-primary, .media—-inline
CSS Design Variations
Child Objects .media__img, .media__body
Relationships

32. Module Components
Object aka module / component / block .btn, .media
Modifiers .btn—-primary, .media—-inline
CSS Design Variations
States .btn.is-active, .media—-collapsed
CSS / JS Design Adjustments
Child Objects .media__img, .media__body
Relationships

33. BEST
PRACTICES

34. SINGLE
RESPONSIBILITY
Do one thing well and one thing only.

35. .CLASSES
.CLASSES
.CLASSES
Take that, specificity!

36. NAMING
CONVENTIONS
Just breathe. Everything is going to be okay.

37. PICK A SYSTEM
BE CONSISTENT

38. Naming Formats
.modulename
.moduleName
.module-name
.module_name
.bem——style
.bem_ _style

39. Naming Patterns
How do you identify children? States? Modifiers?
.objectChild
.object-child
.object_child
.object_ _child
.myObject—childObj
.object.is—active
.objectModifier
.object-modifier
.object_modifier
.object——modifier
.myObj-modClass
.object.active

40. BEM
.block__element——modifier
http://bem.info

41. .block .media

42. .block .media
.block__element .media_ _img

43. .block .media
.block__element .media_ _img
.block——modifier .media——inline

44. .block .media
.block__element .media_ _img
.block——modifier .media——inline
.block__element——modifier .media_ _img——right

45. SEMANTIC
VS
PRESENTATIONAL
NAMING
Uh oh…

46. Presentational Naming
Describes how the object looks.
.grid_ _col——9
.btn——small
.border——all
.color——red
.float——left
.border——thick

47. Semantic Naming
Describes what the object is.
.bookmark
.article
.callToAction
.error
.article_ _title
.article——flagged

48. Fewer Semantic Classes
DRY HTML
VS
DRY CSSMany Presentational Classes

49. NO ONE KNOWS
WHAT THEY’RE
DOING.

50. Questions?

51. 2 Principles
of OOCSS

52. Separation of
STRUCTURE
from
SKIN
1ST PRINCIPLE

53. Structure Vs. Skin

54. Structure Vs. Skin
Define repeating “invisible” patterns
as reusable structures.
What makes a button look like a button?

55. Structure Vs. Skin
Define repeating “invisible” patterns
as reusable structures.
What makes a button look like a button?
Define repeating visual patterns
as reusable skins.
What makes these buttons look different?

56. Structure
Repeating “invisible” patterns.
What makes a button look like a button?

57. Structure
Repeating “invisible” patterns.
What makes a button look like a button?

58. Skin
Repeating visible patterns.
What makes these buttons look different?

59. Skin
Repeating visible patterns.
What makes these buttons look different?

60. Structure + Skin

61. Structure + Skin
.btn .btn—-primary
.btn—-small
.btn—-block
.btn—-inverse

62. 1. Download and unzip package
2. Open entire folder in your text editor
3. Open index.html in browser
Let’s Do This.
http://bit.ly/oocss_ex

63. Structure, Skins, States, & Modifiers
Button Exercise

64. Button Structure
Exercise 1
Hints: use class .btn, make sure there are no hover or focus styles

65. Button Skins
Exercise 2
Hints: use classes .btn—-primary, .btn—-secondary, .btn—-tertiary
only three CSS properties need to be modified

66. Button States
Exercise 3
Hint: style each variation for :hover
only three CSS properties need to be adjusted for each variation

67. Button Modifiers
Exercise 4
Hints: use classes .btn—-medium, .btn—-small, .btn—-block
BONUS: .btn—-inverse

68. Questions?

69. Break Time

70. Separation of
CONTAINER
from
CONTENT
2ND PRINCIPLE

71. Container Vs. Content
Objects should look the same
no matter where you put them.

72. Location Dependent Styles

73. Location Dependent Styles

74. Location Dependent Styles

75. Better?

76. Separation Of
Container & Content
What is the container?

77. Separation Of
Container & Content
What is the container?

78. Separation Of
Container & Content
What is the content?

79. Separation Of
Container & Content
Abstract reusable styles into a new object.

80. With OOCSS, we’re encouraged to give
more forethought to what is common
among different elements, then separate
those common features into modules, or
objects, that can be reused anywhere.
Louis Lazaris — Smashing Magazine

81. Open index.html in browser
Let’s Do This.

82. Containers & Contents
Sidebar ~> Object Exercise

83. Separate - Setup the same styles in the footer
Exercise 1
Hints: Assume heading and paragraph styles are site defaults;
lists are everything.

84. Modify - Create styles for the Right Sidebar
Exercise 2
Hints: abstract float styles, add an alignment modifier
We only need 3 new classes!

85. Uber Classitis OOCSS
http://appendto.com/2014/04/oocss/
Bonus Demo

86. Questions?

87. OOCSS
Structure vs. Skin
Container vs. Content

88. CLASSITIS

89. HTML <3 CSS

90. HTML <3 CSSCSS
STYLE

91. The Semantics Debate
• Do classes actually have “semantic” value?

92. The Semantics Debate
• Do classes actually have “semantic” value?
• To whom are classes semantic to?

93. The Semantics Debate
• Do classes actually have “semantic” value?
• To whom are classes semantic to?
• Should we stick with one way or the other?

94. Presentational
Arguments
• Classes have NO meaning to the browser.

95. Presentational
Arguments
• Classes have NO meaning to the browser.
• Classes ARE semantic to developers.

96. Presentational
Arguments
• Classes have NO meaning to the browser.
• Classes ARE semantic to developers.
• Content describes itself, classes don’t need to.

97. Semantic
DRY HTML
VS
DRY CSSPresentational

98. WHAT
NOW?

99. Closing Don’ts
• Avoid styling ID selectors
• Avoid styling descendent selectors, ie. .sidebar ul li
• Avoid attaching classes to element selectors, ie. h1.title
• Avoid !important

100. Closing Do’s
• Always look for UI patterns
• Always be abstracting
• Establish and be consistent with your naming system
• Use a preprocessor like Sass for even more modularity
and organization
• Look into other modular systems like SMACSS or Atomic

101. Resources
• https://github.com/stubbornella/oocss/wiki
• http://www.smashingmagazine.com/2011/12/12/an-
introduction-to-object-oriented-css-oocss/
• http://appendto.com/2014/04/oocss/
• http://nicolasgallagher.com/about-html-semantics-
front-end-architecture/
• Decoupling the Frontend with Modular CSS @ SEM.js
https://youtu.be/HoQ-QEusyS0

102. Questions?
Slides http://bit.ly/oocss_wks
Exercises http://bit.ly/oocss_ex
Julie Cameron
@jewlofthelotus