oocss

HTML AND CSSLet’s all make fast sites

Presentation about OOCSS inspired by Nicole Sullivan. Flickr photo © Legoagogo

O Hai! I’m Yoni

Yoni De Beule, http://www.yonidebeule.be, @yoniweb

I work at Netlashamong others.

http://www.netlash.com http://www.minify.be http://www.vlmbuzz.be http://www.wrappp.it

I love building websites that are beautiful, accessible, easy to use and fast.

I love building websites that are beautiful, accessible, easy to use and fast.

Beautiful

Beautiful sites

Accessible

Accessible sites (http://www.slideshare.net/YoniWeb/anysurfer)

Easy to use

Easy to use sites (love your Information Architectsʼs)

Fast

Fast sites

I also love using pictures in my presentations...

I also love using pictures in my presentations...

It’s a designer thing

Itʼs a designer thing

I’m here today to make you happy.

Iʼm here today to make you happy.

I’ll be making users happy

Iʼll be making users happy

I’ll be making developers happy

Iʼll be making developers happy

I’ll be making clients happy

Iʼll be making clients happy

I’ll even be making myself happy

Iʼll even be making myself happy

I’m here to make you happy by telling you about Object Oriented CSS.

Iʼm here to make you happy by telling you about Object Oriented CSS.

Nicole Sullivan

Thanks to Nicole Sullivan (Yahoo!) I found out about OOCSS © Marien van Os

She’s awesome.

Sheʼs awesome.

Pure WIN.

Pure WIN.

WHAT?Object Oriented CSS

What is OOCSS?

OOCSS is all about building big websites that are fast.

OOCSS is all about building big websites that are fast. Thereʼs a framework, but Iʼm all for the “concept”, the “idea”, the brilliance.

Two major principles



1. Separate structure and skin

Separate structure and skin



2. Separate container and content

Separate container and content

Doesn’t that kind of sounds like ...

Doesnʼt that kind of sounds like ...

Yeah, that’s what I thought.

Yeah, thatʼs what I thought.

WHY USE IT?Object Oriented CSS

Why use OOCSS?

Lego’s.

Legoʼs.

That’s right.

Thatʼs right.

Lego’s.

Legoʼs are modular blocks of html, css, images and javascript that can be used all across a site.

Lego’s



They follow the OOCSS principles.

Fast site with less CSS.

Fast site with less CSS.

Users happy

Users happy

Developers can use these lego’s virtually anywhere without the help of a designer.

Developers can use these legoʼs virtually anywhere without the help of a designer.

Developers happy

Developers happy

Less design time needed and faster new features.

Less design time needed and faster new features.

Clients happy

Clients happy

Consistent design = clean code = fast site

And last but not least consistent design = clean code = fast site.

Yoni happy

Yoni and all the other designers Happy

Designers happy

Happy times.

HOW?Object Oriented CSS

How do you use OOCSS?

Lego’s?

How do you use these Legoʼs?

<div class="mod"> <div class="inner"> <div class="hd"> <h3>Title</h3> </div> <div class="bd content"> <p>Content</p> </div> </div></div>

Notice the content class devs! Use it!

<div id="blogRecentArticlesListWidget" class="mod article"> <div class="inner"> <div class="hd"> <h3>Recent articles</h3> </div> <div class="bd content"> <ul> <li><a href= "#" >Lorem ipsum</a></li> </ul> </div> <div class="ft"> <p><a href= "#" >Blog archive</a></p> </div> </div></div>

Example from the new Fork CMS.

Use it and make it your ownbut make it understandable.

Use it, try it, make it your own. Donʼt let my code or the framework hold you back!

PRO TIPSObject Oriented CSS

Iʼve been using it for a while and want to hand out some very very specific “pro tips”.

Names, don’t loose yourself in them.

Stop using “general” names like “extraColumn” and “noticeBox”... Tell it like it is!

Respect the design, don’t worship it.

Respect the design, donʼt worship it.

Sprites rule, but are a bitch to maintainso beware!

Sprites help, but are a bitch to maintain. I might do a presentation about this later (like why the new Ruby feature is a bad idea). {OFF TOPIC}

Progressive enhancement (PNG8).

Fireworks! *pew* *pew* {OFF TOPIC}

Questions?

Questions?

http://www.yonidebeule.be



Yoni De Beule, http://www.yonidebeule.be, @yoniweb

