OOCSSAndThe Life-Altering Awesomeness 	

That Is Modular CSS Architecture
Julie Cameron | @jewlofthelotus
WTF
CSS?!!?
WHAT IS 	

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

!
!
The abstraction of repetition into reusab...
FRONTEND OBJECTS
Naming Conventions Semantic .content, .news__title, .callNow	

Presentational .grid__col—-9, .btn—-small	...
MODULAR CSS GOALS
Modularity (duh)	

Added new page.Wrote 0 lines of CSS.WIN.
Predictability
Hey! I know how to construct ...
MODULAR CSS GOALS
Modularity (duh)	

Added new page.Wrote 0 lines of CSS.WIN.
Predictability
Hey! I know how to construct ...
OBJECT COMPOSITION
Modifiers & States .media—-inline, .media—-collapsed .media__img—-right
Parent - Child Relationships
Obj...
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 st...
CONTAINER VS CONTENT
• An Object should look the same no
matter where you put it.
• AVOID Location-Dependent Styles
(which...
BUT CLASSITIS?!? SEMANTICS?!?
Is this going to bloat my HTML markup with classes? Yes.
Is that a bad thing? Shrug.
What ab...
EXAMPLE TIME
!
%nav
%ul.list--horzRight.list--blockAll
%li
%a.media--inline
%span.media__img.icon-bookmark
%span.media__bo...
Y U NO
WRITE
OOCSS?!
QUESTIONS? AMA!
Slides & Resources: http://bit.ly/sem_oocss
!
@jewlofthelotus
Girl Develop It Ann Arbor	

Launch Party w/ ...
RESOURCES
• https://github.com/stubbornella/oocss/wiki	

• http://www.smashingmagazine.com/2011/12/12/an-introduction-
to-...
Upcoming SlideShare
Loading in …5
×

OOCSS Lightening Talk

1,253 views

Published on

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

Published in: Internet, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,253
On SlideShare
0
From Embeds
0
Number of Embeds
219
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OOCSS Lightening Talk

  1. 1. OOCSSAndThe Life-Altering Awesomeness That Is Modular CSS Architecture Julie Cameron | @jewlofthelotus
  2. 2. WTF CSS?!!?
  3. 3. WHAT IS MODULAR CSS ARCHITECTURE? (It’s freaking awesome, that’s what.) ! ! The abstraction of repetition into reusable "objects".
  4. 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. 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. 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. 7. OBJECT COMPOSITION Modifiers & States .media—-inline, .media—-collapsed .media__img—-right Parent - Child Relationships Objects / Modules / Blocks .media .media__img, .media__body
  8. 8. OOCSS PRINCIPLES Separation of Structure from Skin Separation of Container and Content
  9. 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. 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. 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. 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. 13. Y U NO WRITE OOCSS?!
  14. 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. 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

×