Post on 02-Dec-2014
description
Introduction To
OOCSSJulie Cameron @jewlofthelotus
Slides http://bit.ly/oocss_wks Download Exercises http://bit.ly/oocss_ex Install Sublime Text http://sublimetext.com/2
Workshop Prep
About Me
@jewlofthelotus
About Me
@jewlofthelotus
DERP.
About You
What is your name?
What is your 140 character bio?
What is your favorite CSS prop/value?
Object Oriented Cascading Stylesheets
OOCSS
What is OOCSS?
A scalable, maintainable, semantic, and predictable approach to writing CSS.
Why Do We Need It?
Why Do We Need It?
CSS is complicated.
What are we doing wrong?
What are we doing wrong?
• A top down approach to writing styles often leads to repetition and bloat.
What are we doing wrong?
• A top down approach to writing styles often leads to repetition and bloat.
• Selector misuse often leads to specificity trouble.
What are we doing wrong?
• A top down approach to writing styles often leads to repetition and bloat.
• Selector misuse often leads to specificity trouble.
• Bloat + bad selectors = bad performance.
What are we doing wrong?
• A top down approach to writing styles often leads to repetition and bloat.
• Selector misuse often leads to specificity trouble.
• Bloat + bad selectors = bad performance.
• !important is the devil.
NONE OF THIS IS
SCALABLE OR
MAINTAINABLE.
Why OOCSS?
OOCSS was created by Nicole Sullivan while working for Facebook.
She created a reusable module called the “media object” which she proved could save hundreds of lines of code.
The Media Object
“a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)”
https://github.com/stubbornella/oocss/wiki
The Media Object
“a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)”
https://github.com/stubbornella/oocss/wiki
AKA a Facebook status.
The Media ObjectMedia Block Media to the left and some variable length content to the right.
<div class="media"> <img class="media__img" src="img.png" /> <div class="media__body"> <div class="media__title">Some title here</div> <p>Some body content here</p> </div> </div>
The Foundation of Object Oriented CSS
OBJECTS
CSS Objects
The abstraction of repetition into reusable “objects”.
HTML + CSS + JS
https://github.com/stubbornella/oocss/wiki/FAQ
HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS declarations about the style of those nodes, all of which begin with the class name of the wrapper node
HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS declarations about the style of those nodes, all of which begin with the class name of the wrapper node
3. Components like background images and sprites required for display
HTML + CSS + JS1. HTML, which can be one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS declarations about the style of those nodes, all of which begin with the class name of the wrapper node
3. Components like background images and sprites required for display
4. JavaScript behaviors, listeners, or methods associated with the object.
Modules with Variations
.btn
Modules with Variations
.btn
.btn—primary .btn-warningCSS
Modules with Variations
.btn
.btn—primary .btn-warningCSS
.btn—disabled .btn-active
CSS JS
Module Components
Module Components
Objects or Modules or Components .media
Module Components
Objects or Modules or Components .media
Parent - Child .media__img .media__body
Relationships
Module Components
Objects or Modules or Components .media
Modifiers .media—-inline, .media__img—-right
CSS Design Variations
Parent - Child .media__img .media__body
Relationships
Module Components
Objects or Modules or Components .media
Modifiers .media—-inline, .media__img—-right
CSS Design Variations
States .media—-collapsed, .media—-active
CSS / JS Design Adjustments
Parent - Child .media__img .media__body
Relationships
Key Considerations
CLASSES CLASSES CLASSES
1ST CONSIDERATION
CLASSES CLASSES CLASSES
Take that, Specificity!
1ST CONSIDERATION
NAMING CONVENTIONS
2ND CONSIDERATION
NAMING FORMAT
.camelCase
.dashed-dash
.under_score
Choose your style and be consistent.
.bem—-style
.bem__style
NAMING PATTERNS
.object-child
.object__child
.object_child
.objectChild
.myObject-childObj
How do you identify children? Modifiers?
.object-modifier
.object—-modifier
.object_modifier
.objectModifier
.myObj-modClass
BEM NAMING
.object
.object__child
.object—-modifier
.object__child—-modifier
SEMANTIC VS
PRESENTATIONAL
3RD CONSIDERATION
DRY HTML VS
DRY CSS
Semantic
Presentational
SEMANTIC
.bookmark
.article
.callToAction
Describes what the object is.
.error
.article__title
.article—-flagged
PRESENTATIONAL
.grid__col—-9
.btn—-small
.border—-all
Describes how the object looks.
.copy—-red
.float—-left
.border—thick
MY SYSTEM = A HYBRID SYSTEM
Module Classes + Utility Classes
<div class=“media__body copy—-small content—-secondary”>
Semantic Presentational
Questions?
2 Principles of OOCSS
Separation of
STRUCTURE from
SKIN
1ST PRINCIPLE
Structure Vs. Skin
Define repeating visual patterns as reusable skins.
visible == different
!!!!
Define repeating “invisible” patterns as reusable structures.
invisible == same
StructureRepeating “invisible” patterns.
invisible == same
StructureRepeating “invisible” patterns.
invisible == same
.btn { border-radius: 4px; display: inline-block; font-size: 1.25em; padding: 1em; text-align: center; vertical-align: middle; }
SkinRepeating visible patterns.
visible == different
.btn—-primary { background: blue; }
.btn—-success { background: green; }
.btn—-info { background: lightblue; }
.btn—-warning { background: orange; }
.btn—-danger { background: red; }
Structure + Skin
<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>
1. Download and unzip package !
2. Open entire folder in Sublime Text
3. Open index.html in browser
Let’s Do This.
http://bit.ly/oocss_ex
Structure, Skins, States, & Modifiers
Button Exercise
Button Structure
Exercise 1
Hints: use class .btn, no hover or focus styles
Button Skins
Exercise 2
Hints: use classes .btn—-primary, .btn—-secondary, .btn—-tertiary
only three CSS properties need to be modified
Button States
Exercise 3
Hint: style each variation for :hover only three CSS properties need to be adjusted for each variation
Button Modifiers
Exercise 4Hints: use classes .btn—-medium, .btn—-small, .btn—-block
BONUS: .btn—-inverse
Questions?
Break Time
Separation of
CONTAINER from
CONTENT
2ND PRINCIPLE
Container Vs. Content
Objects should look the same no matter where you put them.
Container Vs. Content
Objects should look the same no matter where you put them.
AVOID Location-Dependent Styles (which often lead to duplication)
Location Dependent Styles
.categoryList h2 { // stylez }
Location Dependent Styles
.categoryList h2 { // stylez }.footer h2 { // copy stylez }
Location Dependent Styles
.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }
Location Dependent Styles
.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }BAD
.categoryList h2,
.footer h2,
.sidebar h3 { // stylez }
Better?
.categoryList h2,
.footer h2,
.sidebar h3 { // stylez }
Better?
SORTA
Separation Of Container & Content
.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }
What is the container?
Separation Of Container & Content
.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }
What is the container?
Separation Of Container & Content
.categoryList h2 { // stylez }.footer h2 { // copy stylez }.sidebar h3 { // copy stylez again }
What is the content?
Separation Of Container & Content
.categoryList { //… }
.footer { //… }
.sidebar { //… }
How do we separate the content styles?
.sectionHeader { // YESSS! We can reuse this header // style anywhere!! }
With OOCSS, we’re encouraged to give more forethought to what is common among different elements, then separate those common features into modules, or objects, that can be reused anywhere.
http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
OOCSS Objects
.sectionHeader { // IS AN OBJECT!! }
How Do We Do This?
1. Base Styles - html, body, p, a, h1-h6, etc.
In practice.
How Do We Do This?
1. Base Styles - html, body, p, a, h1-h6, etc.
2. Building Block Objects - lists, nav, buttons, media
In practice.
How Do We Do This?
1. Base Styles - html, body, p, a, h1-h6, etc.
2. Building Block Objects - lists, nav, buttons, media
3. Composite Objects - headers, footers, masonry cards, sidebars
In practice.
Put It All Together
Put It All Together!%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
Put It All Together!%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
Open index.html in browser
Let’s Do This.
Containers & Contents
Sidebar ~> Object Exercise
Separate - Setup the same styles in the footer
Exercise 1
Hints: Assume heading and paragraph styles are site defaults
Modify - Create styles for the Right Sidebar
Exercise 2
Hints: abstract float styles, add an alignment modifier We only need 3 new classes!
Questions?
Uber Classitis OOCSS http://appendto.com/2014/04/oocss/
Bonus Demo
CLASSITIS
Classitis
DRY HTML vs. DRY CSS
DRY CSS will be more maintainable.
The Semantics Debate
• Should classes always be semantic rather than presentational?
• Is it better to have one semantic class or multiple mixed classes?
• To whom are classes semantic to?
The Semantics Debate
• Classes have NO meaning to the browser.
• Classes ARE semantic to developers, though.
• Presentational classes are reusable and don’t couple to content.
• The content describes itself, classes don’t need to.
The choice is yours. (and your team’s)
Closing Don’ts
• Avoid styling ID selectors
• Avoid styling descendent selectors, ie. .sidebar ul li
• Avoid attaching classes to element selectors, ie. h1.title
• Avoid !important
Closing Do’s
• Always look for UI patterns
• Always be abstracting
• Establish and be consistent with your naming system
• Use a preprocessor like Sass for even more modularity and organization
• Look into other modular systems like SMACSS or Atomic
Resources
• https://github.com/stubbornella/oocss/wiki
• http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
• http://appendto.com/2014/04/oocss/
• http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
Questions?
Slides: http://bit.ly/oocss_wks !@jewlofthelotus
Questions?
Slides: http://bit.ly/oocss_wks !@jewlofthelotus