OOCSS And The Life-Altering Awesomeness That Is Modular CSS Architecture Prepared for the SEM.js Birthday Bash at Nutshell in Ann Arbor, Michigan on May 12, 2014

1. OOCSSAndThe Life-Altering Awesomeness
That Is Modular CSS Architecture
Julie Cameron | @jewlofthelotus

2. WTF
CSS?!!?

3. WHAT IS
MODULAR CSS
ARCHITECTURE?
(It’s freaking awesome, that’s what.)
!
!
The abstraction of repetition into reusable "objects".

4. FRONTEND OBJECTS
Naming Conventions Semantic .content, .news__title, .callNow
Presentational .grid__col—-9, .btn—-small
Modules with states .btn, .btn—primary, .btn—disabled.
Classes vs. IDs vs. Element Selectors Take that, specificity!

5. MODULAR CSS GOALS
Modularity (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.

6. MODULAR CSS GOALS
Modularity (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
LOT OF
WIN!

7. OBJECT COMPOSITION
Modifiers & States .media—-inline, .media—-collapsed .media__img—-right
Parent - Child Relationships
Objects / Modules / Blocks .media
.media__img, .media__body

8. OOCSS PRINCIPLES
Separation of
Structure
from
Skin
Separation of
Container
and
Content

9. 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-success” href=“#”></a>
<input class=“btn btn-info” type=“submit” />
<span class=“btn btn-warning”></span>
<label class=“btn btn-danger”></label>

10. 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 h2s will look like h2s.
• All .categoryHeaders will look like .categoryHeaders
<h2 class=“categoryHeader”></h2>

11. BUT CLASSITIS?!? SEMANTICS?!?
Is this going to bloat my HTML markup with classes? Yes.
Is that a bad thing? Shrug.
What about semantics?! It’s complicated.

12. EXAMPLE TIME
!
%nav
%ul.list--horzRight.list--blockAll
%li
%a.media--inline
%span.media__img.icon-bookmark
%span.media__body Bookmark
%li.dropdown
%a.media--inline
%span.media__img.icon-share
%span.media__body Share
%ul.dropdown__content—-right.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:
• List
• Media
• Dropdown
• Icon

13. Y U NO
WRITE
OOCSS?!

14. QUESTIONS? AMA!
Slides & Resources: http://bit.ly/sem_oocss
!
@jewlofthelotus
Girl Develop It Ann Arbor
Launch Party w/ Pillar @ The Forge
June 4th 6:30pm
RSVP @ meetup.com
Hey, look!
A media object!

15. 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
OOCSS