More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
Nicole Sullivan, CSS Ninja & Performance Engineer - F2E All of the code examples are available on the open source project. Better to get the source there because sometimes (for brevity) I highlight on the slide only the bit I'm talking about.
http://wiki.github.com/stubbornella/oocss
Cheers, Nicole4 years ago
Are you sure you want to
vilucarExcellent, now how to download it so that I may use the info?4 years ago
Are you sure you want to
After which he said that “CSS is broken” Very common to say that CSS is broken when it is misunderstood. “Emerging frameworks are a sign that CSS is broken.” Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
After which he said that “CSS is broken” Very common to say that CSS is broken when it is misunderstood. “Emerging frameworks are a sign that CSS is broken.” Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
Modular CSS is a great idea in theory, but in practice...
Nothing is shared between modules, each reinvents the CSS wheel. Wastefully file sizes and http requests grow and...
What is ... ?
lists, headings, etc should all be global
grids
contours X backgrounds X content objects = complexity 1 X foo bar X 1 2 X 4 = 8 HTTP req 5 X 5 = 25 HTTP req
Classes on object we wish to extend.
media, media extended, wrap Open editable zone
media, media extended, wrap Open editable zone
media, media extended, wrap Open editable zone
function created to return area that occasionally returns the diameter instead.
There is a general belief in CSS development that there are many ‘right’ ways. This isn’t always true.
Each time you analyze a solution, there are three main metrics that should be considered.
What is Object Oriented CSS?Presentation Transcript
WHAT IS OBJECT-ORIENTED
CSS?
A framework? A tool? A philosophy?
MORE LIKE AN EVOLUTION
OF THE LANGUAGE
it makes CSS more powerful
HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
Until now, we focused all our effort here
HOW IS IT DIFFERENT?
ul{...}
ul li{...}
ul li a{...}
But, the architecture lives here
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford
CSS
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Doug Crockford
CSS CIRCA 2005
total spaghetti
CSS CIRCA 2008
a little better
RATHER THAN MAKING
OUR CODE PLAY NICE
We built big fences
BUT FOR PERFORMANCE?
SITES GET SLOW
As file size and HTTP requests are not optimized
CSS CIRCA 2009
OBJECT ORIENTED CSS
best practices for performance,
scalability, and most importantly,
easy to use.
1. Create objects rather than pages or modules
2. Set good global defaults on content objects
3. Abstract reusable elements
4. Separate structure and skin (into two classes)
5. Separate container and content (open editable
zones)
6. Tame the cascade
7. Use multiple classes to simulate OO
CREATE OBJECTS
rather than pages or modules
SET GOOD GLOBAL
DEFAULTS?
for standard content objects
ABSTRACT REUSABLE
ELEMENTS?
to allow maximum scalability, and less code
Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.
Capital of the Canterbury region and the largest city
on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...
X X
TAME THE CASCADE
Apply classes to the object we wish to extend, rather than
random parent nodes. Predictability!
TAMING THE CASCADE
❖ Within any one object use the cascade fully
❖ All sub-nodes of an object should be prefaced with the object
class name. For example: .mymodule .inner{...}
❖ Avoid the cascade as much as possible between objects
SEPARATE CONTAINER
AND CONTENT
define the boundaries of each object
Media
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
image
or flash OPEN EDITABLE ZONE
image
or flash OPEN EDITABLE ZONE
USE MULTIPLE CLASSES?
to simulate inheritance
Media
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Media Extended
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
MEDIA
Extending objects, a simple
example.
WHAT BELONGS IN THE
SKIN?
Every value in the skin should be predictable, something that
can easily be calculated or measured.
Colors
Borders
Images
WHAT NOT TO DO!
inappropriate dependence on the cascade is not object
oriented.
LOCATION DEPENDENT
STYLES
avoid!
FUNCTION AREA()
FUNCTION AREA()
FUNCTION AREA()
EVERY NOW AND THEN...
RETURNED DIAMETER
BROKEN.
IN CSS WE DO THIS
ALL THE TIME
BROKEN.
A Heading should not become a Heading
in another part of the page.
AVOID
CODE EXAMPLE
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color undefined for h3, so it will be
‣ unstyled in new modules,
‣ developers forced to write more CSS for the same style
AVOID
CODE EXAMPLE
h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color defined (better!)
❖ Weather and tabs override default h3
‣ three styles for h3 cannot co-exist in the same module
‣ default style cannot be used in weather and tabs without costly
overrides
❖ Weather and tabs h3 can never be used outside of those
modules
CONSISTENCY
Writing more rules to
overwrite the crazy rules from
before.
e.g. Heading should behave
predictably in any module.
NEED MORE THAN 6
HEADINGS?
Really? Any duplicates? Any too similar?
STILL NEED MORE
HEADINGS?
.category{...}
.section{...}
.product{...}
.prediction{...}
❖ Extend the heading object via a class on the object itself
❖ Avoid using the cascade to place classes on parent objects
CALCULATING
COMPLEXITY IN CSS
All solutions are not created equal
O(n)
Natural to you, but not to designers.
FRONT END ARCHITECTURE
NEEDS TO BE RIGHT
Even best practices, like CSS sprites, can have unintended
consequences.
3 METRICS
1. HTTP requests
2. Size of images
3. Size of the CSS
OUTCOMES
If the theory is right, it should yield better results.
TEMPLATE
• 807 bytes
• 13 lines of code
• easily
extended to custom
page and column width
GRIDS
• 574 bytes
• 14 lines of code
• Percentage widths adapt to
different page sizes
• Includes halfs, thirds, fourths, and
fifths
• No gutters
• Infinite nesting and stacking
MODULE
• 1.3K (structure)
• 22 lines of code
• Width and height agnostic
• Three structures
• 264 different combos of
skins
JS COMMUNITY
How to remain JS lib agnostic?
DHTML objects?
Easily adding behaviors?
Trigger parameters?
FLICKR PHOTO CREDITS
❖ “spaghetti con salsa de tomate y carne + albahaca” by pablovenegas
❖ “Jenga” by j3ku (3 photos, same title)
❖ “Sandbox Fun” by engelsrud
❖ “Golden Gate from Alcatraz” by Tolka Rover
❖ “Treasure Island / The Island / L'île Perdu / La Isla Maravillosa - Version II” by Aaron Escobar
❖ “Razor Wire (01)” by Amy
❖ “At the landfill” by digitalsadhu
❖ “Happy Day” by Daniel Gebhart
❖ “Finding Time to Laugh” by Leepack
❖ “Very Happy Baby” by Yogi
LET’S KEEP TALKING
❖ “Stubbornella” on the web. Twitter, doppler, everywhere...
❖ http://stubbornella.org
❖ nicole@stubbornella.org
Nelson Vale
http://wiki.github.com/stubbornella/oocss
Cheers,
Nicole 4 years ago