Object Oriented Css For High Performance Websites And Applications
-
Upload
perconaperformance -
Category
Technology
-
view
4.782 -
download
0
description
Transcript of Object Oriented Css For High Performance Websites And Applications
![Page 1: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/1.jpg)
OBJECT-ORIENTED CSSfor High Performance Websites and Applications
Nicole SullivanWednesday, April 29, 2009
![Page 2: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/2.jpg)
GOOD NEWSCSS and front-end architecture have a huge impact on
performance.
Wednesday, April 29, 2009
![Page 3: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/3.jpg)
AND BAD NEWS
If I don’t do my job right, I can slow your site down to a crawlWednesday, April 29, 2009
![Page 4: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/4.jpg)
REQUIRE EXPERT ABILITY JUST TO GET STARTED.
this is not a sign of maturity.
Wednesday, April 29, 2009
![Page 5: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/5.jpg)
FILE SIZE JUST KEEPS GETTING BIGGER
As the site evolves we continuously modify the CSS.
Wednesday, April 29, 2009
![Page 6: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/6.jpg)
CODE RE-USE IS ALMOST NONEXISTENT
people don’t trust other developers code.
Wednesday, April 29, 2009
![Page 7: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/7.jpg)
CODE IS TOO FRAGILE.Even the cleanest code gets ruined by the first non-expert to
touch it.
Wednesday, April 29, 2009
![Page 8: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/8.jpg)
WHAT IS THE MOST IMPORTANT MISTAKE
TALENTED CODERS ARE MAKING?
Writing really clever modules.
Wednesday, April 29, 2009
![Page 9: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/9.jpg)
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
![Page 10: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/10.jpg)
“JAVASCRIPT DOESN’T SUCKYou’re just doing it wrong.” -- Doug Crockford
Wednesday, April 29, 2009
![Page 11: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/11.jpg)
“JAVASCRIPT DOESN’T SUCKYou’re just doing it wrong.” -- Doug Crockford
Wednesday, April 29, 2009
![Page 12: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/12.jpg)
“JAVASCRIPT DOESN’T SUCKYou’re just doing it wrong.” -- Doug Crockford
CSS
Wednesday, April 29, 2009
![Page 13: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/13.jpg)
O(n)Natural to you, but not to designers.
Wednesday, April 29, 2009
![Page 14: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/14.jpg)
CALCULATING COMPLEXITY IN CSS
All solutions are not created equal
Wednesday, April 29, 2009
![Page 15: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/15.jpg)
FRONT END ARCHITECTURE NEEDS TO BE RIGHT
Even best practices, like CSS sprites, can have unintended consequences.
Wednesday, April 29, 2009
![Page 16: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/16.jpg)
WHOA!
Wednesday, April 29, 2009
![Page 17: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/17.jpg)
Wednesday, April 29, 2009
![Page 18: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/18.jpg)
Wednesday, April 29, 2009
![Page 19: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/19.jpg)
LET’S SORT THIS OUT.In what ways have the solutions introduced complexity?
Wednesday, April 29, 2009
![Page 20: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/20.jpg)
4x HTTP REQUESTS
Four images where one is enough
Wednesday, April 29, 2009
![Page 21: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/21.jpg)
4x HTTP REQUESTS
Four images where one is enough
Wednesday, April 29, 2009
![Page 22: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/22.jpg)
2x CSS CODE
1x HTTP REQUEST
because background color is tied to border color
because structure is duplicated for both
Wednesday, April 29, 2009
![Page 23: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/23.jpg)
2x CSS CODE
1x HTTP REQUEST
because background color is tied to border color
because structure is duplicated for both
Wednesday, April 29, 2009
![Page 24: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/24.jpg)
2x CSS CODE
EXTRA WEIGHT
because sprites duplicate iconography
because the two cannot share the same CSS
Wednesday, April 29, 2009
![Page 25: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/25.jpg)
2x CSS CODE
EXTRA WEIGHT
because sprites duplicate iconography
because the two cannot share the same CSS
Wednesday, April 29, 2009
![Page 26: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/26.jpg)
EXTRA CSS
EXTRA WEIGHT
because sprites include text as images
because each button requires its own CSS
Wednesday, April 29, 2009
![Page 27: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/27.jpg)
EXTRA CSS
EXTRA WEIGHT
because sprites include text as images
because each button requires its own CSS
Wednesday, April 29, 2009
![Page 28: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/28.jpg)
3 METRICS
1. HTTP requests
2. Size of images
3. Size of the CSS
Wednesday, April 29, 2009
![Page 29: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/29.jpg)
OBJECT-ORIENTED CSS CAN HELP
Wednesday, April 29, 2009
![Page 30: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/30.jpg)
CREATE A COMPONENT LIBRARYof reusable “legos”
Wednesday, April 29, 2009
![Page 31: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/31.jpg)
SEPARATE CONTAINER AND CONTENT
Wednesday, April 29, 2009
![Page 32: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/32.jpg)
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
![Page 33: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/33.jpg)
EXTEND OBJECTS: APPLY MULTIPLE CLASSES
Wednesday, April 29, 2009
![Page 34: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/34.jpg)
MEDIAExtending objects, a simple
example.
Wednesday, April 29, 2009
![Page 35: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/35.jpg)
<!-- media --><div class="media mediaExt"> <img class="fixedMedia" src="myImg.png" /> <div class="body"> ... </div></div>
Wednesday, April 29, 2009
![Page 36: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/36.jpg)
SEPARATE STRUCTURE FROM SKIN
two separate classes
Wednesday, April 29, 2009
![Page 37: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/37.jpg)
hd
bd
ft
block
inner
STRUCTURESolves browser bugs, positions
presentational elems, and generally does the heavy lifting
of CSS.
Wednesday, April 29, 2009
![Page 38: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/38.jpg)
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
![Page 39: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/39.jpg)
/* ----- 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
![Page 40: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/40.jpg)
AVOID LOCATION DEPENDENT STYLES
to keep CSS file size in check
Wednesday, April 29, 2009
![Page 41: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/41.jpg)
A Heading should not become a Heading in another part of the page.
Wednesday, April 29, 2009
![Page 42: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/42.jpg)
CONSISTENCYWriting more rules to
overwrite the crazy rules from before.
e.g. Heading should behave predictably in any module.
Wednesday, April 29, 2009
![Page 43: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/43.jpg)
#weatherModule h2{...}#weatherModule h3{...}#weatherModule p{...}#tabs h2{...}#tabs h3{...}#tabs p{...}
+1 FOR MODULARITY,BUT STILL BROKEN
Wednesday, April 29, 2009
![Page 44: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/44.jpg)
DEMO
Wednesday, April 29, 2009
![Page 45: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/45.jpg)
• “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
![Page 46: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/46.jpg)
• “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
![Page 47: Object Oriented Css For High Performance Websites And Applications](https://reader034.fdocuments.us/reader034/viewer/2022051412/548145efb37959932b8b5e2f/html5/thumbnails/47.jpg)
http://stubbornella.orghttp://github.com/stubbornella/oocss/
[email protected]“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...
LET’S KEEP TALKING...
Wednesday, April 29, 2009