OOCSSAnd The Life-Altering Awesomeness That Is Modular CSS Architecture

JULIE CAMERON@jewlofthelotus

OOCSS

WTF CSS?!!?

WHAT IS MODULAR CSS

ARCHITECTURE?(It’s freaking awesome, that’s what.)

!

!

The abstraction of repetition into reusable "objects".

FRONTEND OBJECTS

Naming Conventions Semantic .content, .news__title, .callNow Presentational .grid__col—-9, .btn—-small

Classes vs. IDs vs. Element Selectors

Modules with states .btn, .btn—primary, .btn—disabled.

Take that, specificity!

HTML + CSS + JS = Module

MODULAR CSS GOALSModularity (duh) Added new page. Wrote 0 lines of CSS. WIN.

Predictability Hey! I know how to construct a new thing!

Maintainability Oh, you wanted a big button? .btn--large. BOOM.

Scalability I got 99 problems, but specificity ain't one.

Flexibility

Mixin' & Matchin’

DRY & Organized …ability. That’s just plain smart.

A WHOLE

FRAKKING

LOT OF

WIN!

OBJECT COMPOSITION

Modifiers & States .btn--small, .btn.is-selected, .media__img—-right

Parent - Child Relationships

Objects / Modules / Blocks .header, .comment, .button, etc.

.media, .media__img, .media__body

OOCSS PRINCIPLES

Separation of

Structure from

Skin

Separation of

Container and

Content

STRUCTURE VS SKIN

Define repeating visual patterns as reusable skins.

Define repeating “invisible” patterns as reusable structures.

// Structure .btn { border-radius: 4px; display: inline-block; font-size: 1.25em; padding: 1em; text-align: center; vertical-align: middle; } !// Skins .btn-primary { background: blue; } .btn-success { background: green; } .btn-info { background: lightblue; } .btn-warning { background: orange; } .btn-danger { background: red; }

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

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

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

<span class=“btn btn-primary”></span>

<label class=“btn btn-primary”></label>

CONTAINER VS CONTENT

• An Object should look the same no matter where you put it.

• AVOID Location-Dependent Styles (which often leads to duplication)

.categoryList h2 { // BAD! h2 styles are location // dependent } !.categoryHeader { // GOOD! We can reuse this header // style anywhere }

Assurances

• All unclassed h2s will look the same, everywhere. • All elements with the .categoryHeader class will look the same, everywhere. • Making the .categoryList h2 look like a normal h2 is super easy - remove the class!

<h2 class=“categoryHeader”></h2>

BUT CLASSITIS?!? SEMANTICS?!?

Isn’t this going to bloat my HTML markup with classes? Yes.

Is that a bad thing? Shrug.

But what about semantics?! It’s complicated.

EXAMPLE TIME!%nav.nav--share.content--tertiary %ul.list--horzRight.list--blockAll %li %a.media--inline %span.media__img.copy--small.icon-bookmark %span.media__body.copy--xsmall Bookmark %li.dropdown %a.media--inline %span.media__img.copy--small.icon-share %span.media__body.copy--xsmall Share %ul.dropdown__content--alignRight.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:

• Nav • List • Media • Dropdown

• Copy • Content • Icon

OMG FRONTEND IS AWESOME!

RESOURCES

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

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

• http://csswizardry.com/2014/03/naming-ui-components-in-oocss

• http://oliverjash.me/2012/09/07/methods-for-modifying-objects-in-oocss.html

QUESTIONS? AMA!http://bit.ly/sem_oocss

!

@jewlofthelotus !

!

!

BTW… Girl Develop It Ann Arbor

Launch Party w/ Pillar @ The Forge June 4th 6:30pm

RSVP @ meetup.com