Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OBJECT ORIENTED CSS for high performance web applications and sites. ...
Web Dev Philosophy • Work out of respect for the design. • Designers make our cod...
“JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Monday, February 1...
“JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Monday, February 1...
CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford Monda...
REQUIRE EXPERT ABILITY JUST TO GET STARTED. this is not a sign of maturity. ...
FILE SIZE JUST KEEPS GETTING BIGGER As the site evolves we continuously modif...
CODE RE-USE IS ALMOST NONEXISTENT people don’t trust other developers code. ...
CODE IS TOO FRAGILE. Even the cleanest code gets ruined by the first non-expert to ...
WHAT IS THE MOST IMPORTANT MISTAKE TALENTED CODERS ARE MAKING? ...
THE SIZE OF THEIR CSS WILL INCREASE in a 1:1 relationship with the number of blocks, pages...
BUT, WE WANT A LOT! and sometimes those goals conflict. Monday, February 16, 2009
and sometimes those goals conflict. Monday, February 16, 2009
Monday, February 16, 2009
Modular - combinable , reusable, extensible. Light - One to many relationship between CSS and potential layouts. Fast - Mi...
Modular - combinable , reusable, extensible. Light - One to many relationship between CSS and potential layouts. Fast - Mi...
SOLUTION Object Oriented CSS Monday, February 16, 2009
TWO MAIN PRINCIPLES 1. Separate Structure and Skin 2. Separate ...
10 BEST PRACTICES 1. Create a component 6. Minimize selectors library...
9 PITFALLS 1. Location dependent styles. 5. Don’t sprite every image ...
CREATE A COMPONENT LIBRARY of reusable “legos” Monday, February 16, 2...
Components are like legos Mix and match to create diverse and interesting pages. Mo...
SEPARATE CONTAINER AND CONTENT break the depen...
Monday, February 16, 2009
Contour blocks Background blocks Content Objects - ...
Build HTML from the component library. New pages should not generally requir...
SITE-WIDE LEGOS • Headings • Lists (e.g. action list, external link list, product list, ...
Heading Level 1 Heading Level 2 HEADINGS Heading Level 3 ...
‣ Toggle List Default List ...
MEDIA Extending objects, a simple example. Monday, Febru...
<!-- media --> <div class=quot;media media_extquot;> <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; /> <div c...
SEPARATE STRUCTURE AND SKIN abstract the str...
block inner hd ...
Reusing elements makes them performance “freebies” Monday...
Legos first Design individual pages only once all the legos have ...
Pitfalls What not to do. Monday, February 16, 2009
Avoid redundancy Monday, February 16, 2009
Nearly identical modules Headings 3 and 5 are too similar. Monday, February 16, 2009
Rule of thumb: If two modules look too similar to include on the same page, they a...
USE CONSISTENT SEMANTIC STYLES Monday, February 16, 2009
Heading should not become a A Heading ...
Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading sho...
How about an example? Yahoo! Personal Finance Monday, Febru...
2+ different tab styles. Could they use the same ...
3 contour components are too similar. Chose ...
Changes in module width, background color, or background ...
Mix and match Container and content objects to achieve high ...
DESIGN MODULES TO BE TRANSPARENT on the inside. Monday, February 16, ...
Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for ...
Pitfalls Variable or gradient backgrounds. Monday, February...
NEVER SPECIFY ELEMENT Do: .myClass {...} ...
BE FLEXIBLE. Extensible height and width. Monday, February 16, 2009
• Grids control width • Content controls height Monday, February 16, 2009
LEARN TO LOVE GRIDS. Monday, February 16, 2009
MARK-UP AND CSS become predictable Monday, February 16, 2009
UML TO DESCRIBE both HTML and CSS Monday, February 16, 2009
TEACHING OO CSS To designers and engineers Monday, February 16, 2009
A NATURAL PROGRESSION from simple to more complex tasks. Monday, February 16, 2009
CSS WISH LIST So, maybe CSS isn’t perfect. Monday, February 16, 2009
CSS WISH LIST So, maybe CSS isn’t perfect. 1. Extending objects - possible to make “sa...
CSS WISH LIST So, maybe CSS isn’t perfect. 2. Or, class-order should impact the cascad...
CSS WISH LIST So, maybe CSS isn’t perfect. saleMod ...
PHOTO CREDITS “You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/ • ...
Let’s keep talking... http://stubbornella.org ...
Upcoming SlideShare
Loading in …5
×

Object Oriented CSS

599,274 views

Published on

How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.

Published in: Design, Technology
no profile picture user
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'll tell you right now (and I've got proof), that anyone who tells you "size doesn't matter to women" is flat out lying to your face and trying to make you feel better... Heck, just recently I asked a focus group of women via an anonymous online survey if size matters, and again and again they said "Oh my god, I HATE IT when it's SMALL." For a long time I didn't know what to tell the guys who'd write in to me and ask how to get "bigger." I'd say something lame like "Women actually like guys who are smaller... you just have to get good with your hands." Then I found "THE BIBLE of Penis Enlargement" by this guy named John Collins ♣♣♣ https://tinyurl.com/yaygh4xh
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more...  https://tinyurl.com/y52uv4vq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Girls for sex are waiting for you https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Meetings for sex in your area are there: https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

Object Oriented CSS

  1. OBJECT ORIENTED CSS for high performance web applications and sites. Nicole Sullivan Monday, February 16, 2009
  2. Web Dev Philosophy • Work out of respect for the design. • Designers make our code as beautiful and clever on the outside as it is on the inside. • Respect the original design vision. consistent design = clean code = fast site. Monday, February 16, 2009
  3. "JAVASCRIPT DOESN'T SUCK You're just doing it wrong." -- Doug Crockford Monday, February 16, 2009
  4. "JAVASCRIPT DOESN'T SUCK You're just doing it wrong." -- Doug Crockford Monday, February 16, 2009
  5. CSS "JAVASCRIPT DOESN'T SUCK You're just doing it wrong." -- Doug Crockford Monday, February 16, 2009
  6. REQUIRE EXPERT ABILITY JUST TO GET STARTED. this is not a sign of maturity. Monday, February 16, 2009
  7. FILE SIZE JUST KEEPS GETTING BIGGER As the site evolves we continuously modify the CSS. Monday, February 16, 2009
  8. CODE RE-USE IS ALMOST NONEXISTENT people don't trust other developers code. Monday, February 16, 2009
  9. CODE IS TOO FRAGILE. Even the cleanest code gets ruined by the first non-expert to touch it. Monday, February 16, 2009
  10. WHAT IS THE MOST IMPORTANT MISTAKE TALENTED CODERS ARE MAKING? Writing really clever modules. Monday, February 16, 2009
  11. THE SIZE OF THEIR CSS WILL INCREASE in a 1:1 relationship with the number of blocks, pages, and complexity of content. Monday, February 16, 2009
  12. BUT, WE WANT A LOT! and sometimes those goals conflict. Monday, February 16, 2009
  13. and sometimes those goals conflict. Monday, February 16, 2009
  14. Monday, February 16, 2009
  15. Modular - combinable , reusable, extensible. Light - One to many relationship between CSS and potential layouts. Fast - Minimal HTTP requests & minimal size. Future-proof - maintainable, semantic, standards oriented, prepared for future-browsers, redesign compatible. Visually interesting and adaptable - respectful of UED and mar keting constraints. Simplifies and speeds CSS development. Accessible - SEO, Screen readers, etc. Monday, February 16, 2009
  16. Modular - combinable , reusable, extensible. Light - One to many relationship between CSS and potential layouts. Fast - Minimal HTTP requests & minimal size. Future-proof - maintainable, semantic, standards oriented, prepared for future-browsers, redesign compatible. Visually interesting and adaptable - respectful of UED and mar keting constraints. Simplifies and speeds CSS development. Accessible - SEO, Screen readers, etc. Monday, February 16, 2009
  17. SOLUTION Object Oriented CSS Monday, February 16, 2009
  18. TWO MAIN PRINCIPLES 1. Separate Structure and Skin 2. Separate Container and Content Monday, February 16, 2009
  19. 10 BEST PRACTICES 1. Create a component 6. Minimize selectors library 7. Separate structure and skin 2. Use consistent semantic styles 8. Separate container and content 3. Design modules to be transparent on the inside. 9. Extend objects by applying multiple classes to an 4. Be flexible. element 5. Learn to love grids. 10. Use reset and fonts from YUI Monday, February 16, 2009
  20. 9 PITFALLS 1. Location dependent styles. 5. Don't sprite every image together (unless your has very few pages). 2. Avoid specifying what tag a class applies. 6. Avoid height alignment 3. Avoid IDs to style inside the main content areas. 7. Text as text, not as images. 4. Avoid drop shadows and 8. Redundancy rounded corners over irregular backgrounds. 9. Avoid premature optimization. Monday, February 16, 2009
  21. CREATE A COMPONENT LIBRARY of reusable "legos" Monday, February 16, 2009
  22. Components are like legos Mix and match to create diverse and interesting pages. Monday, February 16, 2009
  23. SEPARATE CONTAINER AND CONTENT break the dependency between the container module and the content objects it contains. Monday, February 16, 2009
  24. Monday, February 16, 2009
  25. 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 1:n Monday, February 16, 2009
  26. Build HTML from the component library. New pages should not generally require additional CSS Monday, February 16, 2009
  27. SITE-WIDE LEGOS • Headings • Lists (e.g. action list, external link list, product list, or feature list) • Module headers and footers • Grids • Buttons Monday, February 16, 2009
  28. Heading Level 1 Heading Level 2 HEADINGS Heading Level 3 Getting the look and feel you want with the semantics you Heading Level 4 need. Heading Level 5 Heading Level 6 Monday, February 16, 2009
  29. ‣ Toggle List Default List ‣ List Item 2 List Item 2 ‣ List Item 3 List Item 3 LISTS ❖ Action List ❖ List Item 2 Should be available to all ❖ List Item 3 modules on the page. Monday, February 16, 2009
  30. MEDIA Extending objects, a simple example. Monday, February 16, 2009
  31. <!-- media --> <div class=quot;media media_extquot;> <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; /> <div class=quot;textquot;> ... </div> </div> Monday, February 16, 2009
  32. SEPARATE STRUCTURE AND SKIN abstract the structure of the block from the skin which is being applied. Monday, February 16, 2009
  33. block inner hd BLOCK bd class can be extended by adding additional classes to the block element. ft Monday, February 16, 2009
  34. Reusing elements makes them performance "freebies" Monday, February 16, 2009
  35. Legos first Design individual pages only once all the legos have been defined. Monday, February 16, 2009
  36. Pitfalls What not to do. Monday, February 16, 2009
  37. Avoid redundancy Monday, February 16, 2009
  38. Nearly identical modules Headings 3 and 5 are too similar. Monday, February 16, 2009
  39. Rule of thumb: If two modules look too similar to include on the same page, they are too similar to include together in a site, choose one! Monday, February 16, 2009
  40. USE CONSISTENT SEMANTIC STYLES Monday, February 16, 2009
  41. Heading should not become a A Heading in another part of the page. Monday, February 16, 2009
  42. Consistency Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module. Monday, February 16, 2009
  43. How about an example? Yahoo! Personal Finance Monday, February 16, 2009
  44. 2+ different tab styles. Could they use the same images? Monday, February 16, 2009
  45. 3 contour components are too similar. Chose one. Monday, February 16, 2009
  46. Changes in module width, background color, or background image are an excellent example of module reuse. Monday, February 16, 2009
  47. Mix and match Container and content objects to achieve high performance design. Monday, February 16, 2009
  48. DESIGN MODULES TO BE TRANSPARENT on the inside. Monday, February 16, 2009
  49. Making it look fab Requires careful choice of pixels. Bonus: Consider PNG8 for progressive enhancement http://alistapart.com/articles/mountaintop/ Monday, February 16, 2009
  50. Pitfalls Variable or gradient backgrounds. Monday, February 16, 2009
  51. NEVER SPECIFY ELEMENT Do: .myClass {...} Don't: div.myClass {...} Exception: Extending a Extend the error class to class to work on several apply to strong or div elements. elements specify the specific tag in the rule that e.g..error{} which, by declares only the values that are different than the default, applies to a P. default value. Monday, February 16, 2009
  52. BE FLEXIBLE. Extensible height and width. Monday, February 16, 2009
  53. • Grids control width • Content controls height Monday, February 16, 2009
  54. LEARN TO LOVE GRIDS. Monday, February 16, 2009
  55. MARK-UP AND CSS become predictable Monday, February 16, 2009
  56. UML TO DESCRIBE both HTML and CSS Monday, February 16, 2009
  57. TEACHING OO CSS To designers and engineers Monday, February 16, 2009
  58. A NATURAL PROGRESSION from simple to more complex tasks. Monday, February 16, 2009
  59. CSS WISH LIST So, maybe CSS isn't perfect. Monday, February 16, 2009
  60. CSS WISH LIST So, maybe CSS isn't perfect. 1. Extending objects - possible to make "sale module" inherit from "module". .module{} .saleModule{extends: module;} Monday, February 16, 2009
  61. CSS WISH LIST So, maybe CSS isn't perfect. 2. Or, class-order should impact the cascade. <div class="module saleMod ducati"> ... </div> Monday, February 16, 2009
  62. CSS WISH LIST So, maybe CSS isn't perfect. saleMod Ducati Superbike 848 3. Proximity should The 848 is Ducati's most impressive middleweight Superbike ever. Its exceptional lightweight and legendary Ducati chassis set-up impact the cascade. combined with the smooth and thrilling torque delivery of the L-Twin Desmo provide the ideal way to enter the world of Ducati Superbikes. Nested modules, first one last in the CSS. Ducati Superbike 848 The 848 is Ducati's most impressive middleweight Superbike ever. Its exceptional lightweight and legendary Ducati chassis set-up combined with the smooth and thrilling torque delivery of the L-Twin Desmo. .protectiveGear{...} .saleMod{...} Arai RX7 Corsair Full Face Helmet - Haga Fire and Ice The 848 is Ducati's most impressive middleweight Superbike ever. protectiveGear Monday, February 16, 2009
  63. PHOTO CREDITS "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/ • Monday, February 16, 2009
  64. Let's keep talking... http://stubbornella.org nicole@stubbornella.org "stubbornella" on the web... twitter, dopplr, slideshare, everywhere... Monday, February 16, 2009

×