OOCSS

Why OOCSS?

CSS Suck?
a bit.

  • Hundreds of lines of code
  • Not really maintenable
  • Cross browser issues
  • Specicifity wars

Fight agains specificity wars

"Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed"

Add 1 for each element and pseudo-element, add 10 for each attribute, class and pseudo-class, add 100 for each ID; and add 1000 for an inline style.

  • p.note: 1 class + 1 element = 11
  • #sidebar p[lang="en"] 1 ID + 1 attribute + 1 element = 111
  • body #main .post ul li:last-child 1 ID + 1 class + 1 pseudo-class + 3 elements = 123

Two Main Principles

SEPARATE STRUCTURE AND SKIN

SEPARATE CONTAINER AND CONTENT

Separate Structure and Skin

Abstract the structure of the block from the skin which is being applied

Before


#button {
	width: 200px;
	height: 50px;
	padding: 10px;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
	width: 400px;
	overflow: hidden;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
	width: 500px;
	min-height: 200px;
	overflow: auto;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

After


.button {
	width: 200px;
	height: 50px;
}

.box {
	width: 400px;
	overflow: hidden;
}

.widget {
	width: 500px;
	min-height: 200px;
	overflow: auto;
}

.skin {
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Separate Container and Content

Break the dependency between the container module and the container objects it contains

10 Best Practise

  1. Create a component library
  2. Use consistent semantic Style
  3. Design Modules to be transparent on the inside
  4. Be Flexible
  5. Learn to love grids
  6. Minimize Selectors
  7. Separate Structure and skin
  8. Separete Container and content
  9. Extend object by applkying multiple class on elemnt
  10. Use reset and fonts from YUI

Pitfalls

  1. Location dependent styles (#sidebar h3)
  2. Avoid specifying what tag a class applies (#sidebar.left)
  3. Avoid IDs to style inside the main content areas (#container #content .titolo)
  4. Redundancy

Pro & Cons


Pro

  • Better Maintenably of Code
  • Better Performance
  • Consistent Design

Cons

  • Greater Effort on writing Css

Real Example

Facebook Feed

CSS Reduced by 19%
HTML Reduced of 50%

Tools to the rescue

Css Preprocessor like SASS [Mixins and Extend]

CSS Frameworks based on OOCSS Approach

Resources

Thank You