Post on 23-Aug-2014
description
transcript
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