Introduction To

OOCSSJulie Cameron @jewlofthelotus

Slides http://bit.ly/oocss_wks Download Exercises http://bit.ly/oocss_ex Install Sublime Text http://sublimetext.com/2

Workshop Prep

About Me

@jewlofthelotus

About Me

@jewlofthelotus

DERP.

About You

What is your name?

What is your 140 character bio?

What is your favorite CSS prop/value?

Object Oriented Cascading Stylesheets

OOCSS

What is OOCSS?

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

Why Do We Need It?

Why Do We Need It?

CSS is complicated.

What are we doing wrong?

What are we doing wrong?

• A top down approach to writing styles often leads to repetition and bloat.

What are we doing wrong?

• A top down approach to writing styles often leads to repetition and bloat.

• Selector misuse often leads to specificity trouble.

What are we doing wrong?

• A top down approach to writing styles often leads to repetition and bloat.

• Selector misuse often leads to specificity trouble.

• Bloat + bad selectors = bad performance.

What are we doing wrong?

• A top down approach to writing styles often leads to repetition and bloat.

• Selector misuse often leads to specificity trouble.

• Bloat + bad selectors = bad performance.

• !important is the devil.

NONE OF THIS IS

SCALABLE OR

MAINTAINABLE.

Why OOCSS?

OOCSS was created by Nicole Sullivan while working for Facebook.

She created a reusable module called the “media object” which she proved could save hundreds of lines of code.

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

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.

The Media ObjectMedia Block Media to the left and some variable length content to the right.

<div class="media"> <img class="media__img" src="img.png" /> <div class="media__body"> <div class="media__title">Some title here</div> <p>Some body content here</p> </div> </div>

The Foundation of Object Oriented CSS

OBJECTS

CSS Objects

The abstraction of repetition into reusable “objects”.

HTML + CSS + JS

https://github.com/stubbornella/oocss/wiki/FAQ

HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM

https://github.com/stubbornella/oocss/wiki/FAQ

HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM

https://github.com/stubbornella/oocss/wiki/FAQ

2. CSS declarations about the style of those nodes, all of which begin with the class name of the wrapper node

HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM

https://github.com/stubbornella/oocss/wiki/FAQ

2. CSS declarations about the style of those nodes, all of which begin with the class name of the wrapper node

3. Components like background images and sprites required for display

HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM

https://github.com/stubbornella/oocss/wiki/FAQ

2. CSS declarations about the style of those nodes, all of which begin with the class name of the wrapper node

3. Components like background images and sprites required for display

4. JavaScript behaviors, listeners, or methods associated with the object.

Modules with Variations

.btn

Modules with Variations

.btn

.btn—primary .btn-warningCSS

Modules with Variations

.btn

.btn—primary .btn-warningCSS

.btn—disabled .btn-active

CSS JS

Module Components

Module Components

Objects or Modules or Components .media

Module Components

Objects or Modules or Components .media

Parent - Child .media__img .media__body

Relationships

Module Components

Objects or Modules or Components .media

Modifiers .media—-inline, .media__img—-right

CSS Design Variations

Parent - Child .media__img .media__body

Relationships

Module Components

Objects or Modules or Components .media

Modifiers .media—-inline, .media__img—-right

CSS Design Variations

States .media—-collapsed, .media—-active

CSS / JS Design Adjustments

Parent - Child .media__img .media__body

Relationships

Key Considerations

CLASSES CLASSES CLASSES

1ST CONSIDERATION

CLASSES CLASSES CLASSES

Take that, Specificity!

1ST CONSIDERATION

NAMING CONVENTIONS

2ND CONSIDERATION

NAMING FORMAT

.camelCase

.dashed-dash

.under_score

Choose your style and be consistent.

.bem—-style

.bem__style

NAMING PATTERNS

.object-child

.object__child

.object_child

.objectChild

.myObject-childObj

How do you identify children? Modifiers?

.object-modifier

.object—-modifier

.object_modifier

.objectModifier

.myObj-modClass

BEM NAMING

.object

.object__child

.object—-modifier

.object__child—-modifier

SEMANTIC VS

PRESENTATIONAL

3RD CONSIDERATION

DRY HTML VS

DRY CSS

Semantic

Presentational

SEMANTIC

.bookmark

.article

.callToAction

Describes what the object is.

.error

.article__title

.article—-flagged

PRESENTATIONAL

.grid__col—-9

.btn—-small

.border—-all

Describes how the object looks.

.copy—-red

.float—-left

.border—thick

MY SYSTEM = A HYBRID SYSTEM

Module Classes + Utility Classes

<div class=“media__body copy—-small content—-secondary”>

Semantic Presentational

Questions?

2 Principles of OOCSS

Separation of

STRUCTURE from

SKIN

1ST PRINCIPLE

Structure Vs. Skin

Define repeating visual patterns as reusable skins.

visible == different

!!!!

Define repeating “invisible” patterns as reusable structures.

invisible == same

StructureRepeating “invisible” patterns.

invisible == same

StructureRepeating “invisible” patterns.

invisible == same

.btn { border-radius: 4px; display: inline-block; font-size: 1.25em; padding: 1em; text-align: center; vertical-align: middle; }

SkinRepeating visible patterns.

visible == different

.btn—-primary { background: blue; }

.btn—-success { background: green; }

.btn—-info { background: lightblue; }

.btn—-warning { background: orange; }

.btn—-danger { background: red; }

Structure + Skin

<button class=“btn btn—-primary”></button>

<a class=“btn btn—-success” href=“#”></a>

<input class=“btn btn—-info” type=“submit” />

<span class=“btn btn—-warning”></span>

<label class=“btn btn—-danger”></label>

1. Download and unzip package !

2. Open entire folder in Sublime Text

3. Open index.html in browser

Let’s Do This.

http://bit.ly/oocss_ex

Structure, Skins, States, & Modifiers

Button Exercise

Button Structure

Exercise 1

Hints: use class .btn, no hover or focus styles

Button Skins

Exercise 2

Hints: use classes .btn—-primary, .btn—-secondary, .btn—-tertiary

only three CSS properties need to be modified

Button States

Exercise 3

Hint: style each variation for :hover only three CSS properties need to be adjusted for each variation

Button Modifiers

Exercise 4Hints: use classes .btn—-medium, .btn—-small, .btn—-block

BONUS: .btn—-inverse

Questions?

Break Time

Separation of

CONTAINER from

CONTENT

2ND PRINCIPLE

Container Vs. Content

Objects should look the same no matter where you put them.

Container Vs. Content

Objects should look the same no matter where you put them.

AVOID Location-Dependent Styles (which often lead to duplication)

Location Dependent Styles

.categoryList h2 { // stylez }

Location Dependent Styles

.categoryList h2 { // stylez }.footer h2 { // copy stylez }

Location Dependent Styles

.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }

Location Dependent Styles

.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }BAD

.categoryList h2,

.footer h2,

.sidebar h3 { // stylez }

Better?

.categoryList h2,

.footer h2,

.sidebar h3 { // stylez }

Better?

SORTA

Separation Of Container & Content

.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }

What is the container?

Separation Of Container & Content

.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }

What is the container?

Separation Of Container & Content

.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }

What is the content?

Separation Of Container & Content

.categoryList { //… }

.footer { //… }

.sidebar { //… }

How do we separate the content styles?

.sectionHeader { // YESSS! We can reuse this header // style anywhere!! }

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.

http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

OOCSS Objects

.sectionHeader { // IS AN OBJECT!! }

How Do We Do This?

1. Base Styles - html, body, p, a, h1-h6, etc.

In practice.

How Do We Do This?

1. Base Styles - html, body, p, a, h1-h6, etc.

2. Building Block Objects - lists, nav, buttons, media

In practice.

How Do We Do This?

1. Base Styles - html, body, p, a, h1-h6, etc.

2. Building Block Objects - lists, nav, buttons, media

3. Composite Objects - headers, footers, masonry cards, sidebars

In practice.

Put It All Together

Put It All Together!%nav %ul.list--horzRight.list--blockAll %li %a.media--inline %span.media__img.icon—-bookmark %span.media__body Bookmark %li.dropdown %a.media--inline %span.media__img.icon—-share %span.media__body Share %ul.dropdown__content—-right.list—-boxed %li %a.media--block %span.media__img.icon—-facebook %span.media__body Facebook %li %a.media--block %span.media__img.icon—-twitter %span.media__body Twitter %li %a.media--block %span.media__img.icon—-email %span.media__body Email

Put It All Together!%nav %ul.list--horzRight.list--blockAll %li %a.media--inline %span.media__img.icon—-bookmark %span.media__body Bookmark %li.dropdown %a.media--inline %span.media__img.icon—-share %span.media__body Share %ul.dropdown__content—-right.list—-boxed %li %a.media--block %span.media__img.icon—-facebook %span.media__body Facebook %li %a.media--block %span.media__img.icon—-twitter %span.media__body Twitter %li %a.media--block %span.media__img.icon—-email %span.media__body Email

Objects In Use:

• List • Media • Dropdown • Icon

Open index.html in browser

Let’s Do This.

Containers & Contents

Sidebar ~> Object Exercise

Separate - Setup the same styles in the footer

Exercise 1

Hints: Assume heading and paragraph styles are site defaults

Modify - Create styles for the Right Sidebar

Exercise 2

Hints: abstract float styles, add an alignment modifier We only need 3 new classes!

Questions?

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

Bonus Demo

CLASSITIS

Classitis

DRY HTML vs. DRY CSS

DRY CSS will be more maintainable.

The Semantics Debate

• Should classes always be semantic rather than presentational?

• Is it better to have one semantic class or multiple mixed classes?

• To whom are classes semantic to?

The Semantics Debate

• Classes have NO meaning to the browser.

• Classes ARE semantic to developers, though.

• Presentational classes are reusable and don’t couple to content.

• The content describes itself, classes don’t need to.

The choice is yours. (and your team’s)

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

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

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/

Questions?

Slides: http://bit.ly/oocss_wks !@jewlofthelotus

Questions?

Slides: http://bit.ly/oocss_wks !@jewlofthelotus