View
4.790
Download
0
Category
Preview:
DESCRIPTION
Citation preview
OBJECT-ORIENTED CSSfor High Performance Websites and Applications
Nicole SullivanWednesday, April 29, 2009
GOOD NEWSCSS and front-end architecture have a huge impact on
performance.
Wednesday, April 29, 2009
AND BAD NEWS
If I don’t do my job right, I can slow your site down to a crawlWednesday, April 29, 2009
REQUIRE EXPERT ABILITY JUST TO GET STARTED.
this is not a sign of maturity.
Wednesday, April 29, 2009
FILE SIZE JUST KEEPS GETTING BIGGER
As the site evolves we continuously modify the CSS.
Wednesday, April 29, 2009
CODE RE-USE IS ALMOST NONEXISTENT
people don’t trust other developers code.
Wednesday, April 29, 2009
CODE IS TOO FRAGILE.Even the cleanest code gets ruined by the first non-expert to
touch it.
Wednesday, April 29, 2009
WHAT IS THE MOST IMPORTANT MISTAKE
TALENTED CODERS ARE MAKING?
Writing really clever modules.
Wednesday, April 29, 2009
THE SIZE OF THEIR CSS WILL INCREASE
in a 1:1 relationship with the number of blocks, pages, and complexity of content.
Wednesday, April 29, 2009
“JAVASCRIPT DOESN’T SUCKYou’re just doing it wrong.” -- Doug Crockford
Wednesday, April 29, 2009
“JAVASCRIPT DOESN’T SUCKYou’re just doing it wrong.” -- Doug Crockford
Wednesday, April 29, 2009
“JAVASCRIPT DOESN’T SUCKYou’re just doing it wrong.” -- Doug Crockford
CSS
Wednesday, April 29, 2009
O(n)Natural to you, but not to designers.
Wednesday, April 29, 2009
CALCULATING COMPLEXITY IN CSS
All solutions are not created equal
Wednesday, April 29, 2009
FRONT END ARCHITECTURE NEEDS TO BE RIGHT
Even best practices, like CSS sprites, can have unintended consequences.
Wednesday, April 29, 2009
WHOA!
Wednesday, April 29, 2009
Wednesday, April 29, 2009
Wednesday, April 29, 2009
LET’S SORT THIS OUT.In what ways have the solutions introduced complexity?
Wednesday, April 29, 2009
4x HTTP REQUESTS
Four images where one is enough
Wednesday, April 29, 2009
4x HTTP REQUESTS
Four images where one is enough
Wednesday, April 29, 2009
2x CSS CODE
1x HTTP REQUEST
because background color is tied to border color
because structure is duplicated for both
Wednesday, April 29, 2009
2x CSS CODE
1x HTTP REQUEST
because background color is tied to border color
because structure is duplicated for both
Wednesday, April 29, 2009
2x CSS CODE
EXTRA WEIGHT
because sprites duplicate iconography
because the two cannot share the same CSS
Wednesday, April 29, 2009
2x CSS CODE
EXTRA WEIGHT
because sprites duplicate iconography
because the two cannot share the same CSS
Wednesday, April 29, 2009
EXTRA CSS
EXTRA WEIGHT
because sprites include text as images
because each button requires its own CSS
Wednesday, April 29, 2009
EXTRA CSS
EXTRA WEIGHT
because sprites include text as images
because each button requires its own CSS
Wednesday, April 29, 2009
3 METRICS
1. HTTP requests
2. Size of images
3. Size of the CSS
Wednesday, April 29, 2009
OBJECT-ORIENTED CSS CAN HELP
Wednesday, April 29, 2009
CREATE A COMPONENT LIBRARYof reusable “legos”
Wednesday, April 29, 2009
SEPARATE CONTAINER AND CONTENT
Wednesday, April 29, 2009
Contour blocks Background blocks Content Objects - headings, paragraphs, lists, headers,
footers, buttons, etc.
1:n
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
Wednesday, April 29, 2009
EXTEND OBJECTS: APPLY MULTIPLE CLASSES
Wednesday, April 29, 2009
MEDIAExtending objects, a simple
example.
Wednesday, April 29, 2009
<!-- media --><div class="media mediaExt"> <img class="fixedMedia" src="myImg.png" /> <div class="body"> ... </div></div>
Wednesday, April 29, 2009
SEPARATE STRUCTURE FROM SKIN
two separate classes
Wednesday, April 29, 2009
hd
bd
ft
block
inner
STRUCTURESolves browser bugs, positions
presentational elems, and generally does the heavy lifting
of CSS.
Wednesday, April 29, 2009
SKINMakes it pretty.
The goal is very predictable skins, complexity is absorbed by the structure object and
shared across the site.
Wednesday, April 29, 2009
/* ----- simple (extends mod) ----- */.simple .inner { border:1px solid gray; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;}.simple b{*background-image:url(skin/mod/corners.png);
}
Wednesday, April 29, 2009
AVOID LOCATION DEPENDENT STYLES
to keep CSS file size in check
Wednesday, April 29, 2009
A Heading should not become a Heading in another part of the page.
Wednesday, April 29, 2009
CONSISTENCYWriting more rules to
overwrite the crazy rules from before.
e.g. Heading should behave predictably in any module.
Wednesday, April 29, 2009
#weatherModule h2{...}#weatherModule h3{...}#weatherModule p{...}#tabs h2{...}#tabs h3{...}#tabs p{...}
+1 FOR MODULARITY,BUT STILL BROKEN
Wednesday, April 29, 2009
DEMO
Wednesday, April 29, 2009
• “South Carolina” by Army.Mil
• “So Happy Together” by kalandrakas
• “sometimes, a hug is all what we need” by kalandrakas
PHOTO CREDITS
Wednesday, April 29, 2009
• “You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/
• “red lego” by http://flickr.com/photos/niznoz/5753993/
• “Pablo’s cubism period began at three” by http://flickr.com/photos/wwworks/2475349116/in/set-72157608035966422/
• “Kuwait water tower” by http://flickr.com/photos/asam/327911794/
• idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/
• lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/
• Gimli_36: http://www.flickr.com/photos/navillot/1878124531/
• NathanFromDeVryEET: http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
• Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/
PHOTO CREDITS
Wednesday, April 29, 2009
http://stubbornella.orghttp://github.com/stubbornella/oocss/
nicole@stubbornella.org“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...
LET’S KEEP TALKING...
Wednesday, April 29, 2009
Recommended