CSS Isn't Object Oriented!

Dave Widmer
Web Applications Developer - BGSU
dwidmer@bgsu.edu
@davewidmer

Introduction

Basically, a CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. Once created, an object can then be reused throughout a site.

- Nicole Sullivan (OOCSS Wiki)

Uses the class attribute

... as a guide not a rule

Principal #1: Separate Structure and Skin

HTML

<aside id="sidebar">
  <h2>Title</h2>
  <p>Content</p>
</aside>

Output

CSS

#sidebar{
  background-color: #E7E7E7;
  padding: 1em;
}
#sidebar h2 {
  color: #FF7300;
}
#sidebar p {
  margin-bottom: 0;
}

HTML

<aside idclass="sidebar">
  <h2 class="orange">Title</h2>
  <p class="no-bm">Content</p>
</aside>

OOCSS

.sidebar{
  background-color: #E7E7E7;
  padding: 1em;
}
.orange {
  color: #FF7300;
}
.no-bm {
  margin-bottom: 0;
}

Principal #2: Separate Container and Content

<div class="offspring"><img src="assets/images/nicholas.jpg" alt="Nicholas" /></div>

CSS

.offspring img {
  border: 6px solid #FFF;
  box-shadow: 0 0 1em #999;
}

OOCSS

.shadow-box {
  border: 6px solid #FFF;
  box-shadow: 0 0 1em #999;
}

<div class="offspring">
  <img src="assets/images/nicholas.jpg" alt="Nicholas" class="shadow-box" />
</div>

Grids (.row .span#)

.span1

.span2

.span3

.span6

.span9

.span3

Buttons (class="button")

Link

<a href="#test" class="button">Link</a>

<input type="submit" class="button red rounded" value="Submit" />

<button class="button black">Button</button>

UI Elements

Messages (class="message")

This was a success!

<div class="message success">

Ooops, error time!

<div class="message error">

Here is some info you want to look at...

<div class="message info">

Pagination (class="pagination")

«
1
2
3
4
»

<ul class="pagination">

«
1
2
3
4
»

<ul class="pagination collapsed">

Hands On

CSS

.example{}

HTML

<div class="msu-masthead">
  <h1 class="msu-title"><strong>Michigan State</strong> University</h1>
</div>

CSS Isn't Object Oriented!

Introduction

Uses the class attribute

... as a guide not a rule

Principal #1: Separate Structure and Skin

HTML

Output

CSS

HTML

OOCSS

Principal #2: Separate Container and Content

CSS

OOCSS

Grids (.row .span#)

Buttons (class="button")

UI Elements

Messages (class="message")

Pagination (class="pagination")

Hands On

CSS

HTML

Resources

Learn More

Libraries

Shameless Plug

Helpers

Questions? Comments?