An Introduction to Object Oriented CSSScalable and Maintainable Stylesheets

Nati Devalle - @Taly UX Designer

Starting a project from scratch

6 months later...

WHY?

We keep piling styles up

instead of reusing them

Where do we start?http://www.flickr.com/photos/mrlemming_photos/5750248841/

Object OrientedCSS

by Nicole Sullivan

2 Principles

1. Separation of Structure from Skin

2. Separation of Containers from Content

2 Principles

1. Separation of Structure from Skin

2. Separation of Containers from Content

Structure Skin

Structure Skin

Scalable

.ch-box-error {}

.ch-box-attention {}

Scalable

.ch-box-error {}

.ch-box-attention {}

.ch-box-help {}

.ch-box-information {}

.ch-box-ok {}

Maintainable

[class*='ch-box'] {border-radius: 5px;padding: 10px;margin: 0 0 10px 0;

}

Maintainable

[class*='ch-box'] {border-radius: 20px;padding: 10px;margin: 0 0 10px 0;

}

2 Principles

1. Separation of Structure from Skin

2. Separation of Containers from Content

What’s Content?

What’s Container?

http://www.html5code.com/tutorials/html5-semantic-layout-tags/

Break the dependency between content and container

(So you can put the content in different containers)

Use styles that are

specific to an element and

don’t depend on location

The Recipe1. Identify the pattern 2. Create a component library3. Extend it

http://www.flickr.com/photos/mlazarevski/8108416027/sizes/l/in/photostream/

What’sThePattern?

How did we code this?

How did we code this?

How did we code this?

Pattern = Reusable(and consistency)

Create a component

Extend

Too similar?Choose one!

Extend more

Exceptions

Not bad

But it is really necessary?

Today

7 badgesSaved 18+ repeated declarations

20 badgesSaved 57+ repeated declarations

And that’s just ONE pattern

Think of all the others we can find

http://www.flickr.com/photos/bdesham/2432400623/in/photostream/

and this

and thiscould be just this

Success!

This could be very tempting...

But what if it changes?

Future-proof

Don’t forget about semantics

Embrace Semantics

To sum it up...

If you have to copy and paste just one single CSS declaration...

( Tweet me at @Taly )

● http://oocss.org/

● http://www.slideshare.net/stubbornella/object-oriented-css

● http://www.slideshare.net/stubbornella/what-is-object-oriented-css

● https://www.youtube.com/watch?v=EW8NAFELWzo

● http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

● http://www.slideshare.net/stubbornella/5-mistakes-of-massive-css

● http://www.lukew.com/ff/entry.asp?1049

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

● http://www.sitepoint.com/css-architectures-scalable-and-modular-approaches/

● https://www.google.com.ar/search?q=OOCSS

Resources