• Save
Object Oriented CSS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Object Oriented CSS

on

  • 479,590 views

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, ...

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.

Statistics

Views

Total Views
479,590
Views on SlideShare
204,627
Embed Views
274,963

Actions

Likes
920
Downloads
0
Comments
41

606 Embeds 274,963

http://net.tutsplus.com 119089
http://wiki.github.com 33016
http://code.tutsplus.com 21557
http://www.stubbornella.org 16741
http://www.vanseodesign.com 10699
http://ajaxian.com 9201
http://www.basing.nl 4477
http://woorkup.com 4079
http://www.cssnolanche.com.br 3901
http://magazynt3.pl 3098
http://www.smashingmagazine.com 3021
http://www.qianduan.net 2471
http://www.zhangxinxu.com 2115
http://www.blueidea.com 2029
http://coding.smashingmagazine.com 1959
http://webhosting.pl 1957
http://seohools.pl 1524
http://jacktse.com 1503
http://www.albertofortes.com 1342
http://usabili.ru 1319
http://tech4learning.jugem.cc 1266
http://www.xarop.com 1237
http://ferrante.pl 1204
http://www.webmasterlibre.com 1175
http://www.cssblog.es 1155
http://basing.nl 1008
http://www.rss-ems.com 985
http://odesenvolvedor.andafter.org 937
http://blog.negonation.com 912
http://www.slideshare.net 856
http://andafter.org 797
http://www.intergraphicdesigns.com 781
http://saintist.ru 738
http://www.jacktse.com 610
http://blog.dreamcss.com 590
http://www.javaeye.com 572
http://www.barbarosalp.com 497
http://cssvault.com 487
http://www.atcreativa.com 475
http://www.andafter.org 433
http://jacky.seezone.net 407
http://css9.net 347
http://blog.firsthand.ca 303
http://codeforge.gfsrv.net 301
http://blogs.zdnet.com 297
http://internetmaker.pl 287
http://www.julien-verkest.fr 277
http://translate.googleusercontent.com 257
http://flavors.me 256
http://www.chinaz.com 245
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 41 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks to give this information its very useful for beginner like me ...
    Are you sure you want to
    Your message goes here
    Processing…
  • @georghoff1 I agree. And sometimes we want a class called '.error' but acting differently on different elements, for example with form elements.
    Are you sure you want to
    Your message goes here
    Processing…
  • I do not agree with slide 51. CSS-selectors should be as precise as possible and as flexible as necessary. A selector like '.lorem_ipsum { [...] }' is nonsense in most cases, because its styles are meant for a defined element in a defined context (e.g. a paragraph in a teaser-box). A good selector might be instead 'div#sidebar div.teaser_box p.lorem_ipsum { [...] }'. This precise definition of styles leads to safe, readable and maintainable css. Remember what the 'c' stands for in css!
    Are you sure you want to
    Your message goes here
    Processing…
  • Assessing by the date of this excellent presentation, it may be safe to deduce that the content pertains in large part to CSS level 2, often referred to as 'CSS 2' or 'CSS2'. According to Wikipedia CSS 2.1 was a Candidate Recommendation mid-2007 and updated twice in 2009. And the W3C no longer maintains the CSS 2 recommendation. Yet the OOCSS concepts remain valid.
    Are you sure you want to
    Your message goes here
    Processing…
  • clearly mind, helpful content supporting for the newbiew to reach the design, the new directory.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Introductions - Nicole Sullivan, worked at yahoo, specialist in scalable high performance websites. <br />
  • <br />
  • <br />
  • After which he said that “CSS is broken” <br /> Very common to say that CSS is broken when it is misunderstood. <br /> Emerging frameworks are a sign that CSS is broken. <br /> Java developers -- Math class <br /> TRANSITION <br /> On the other hand, I honestly do believe we are doing it wrong. <br />
  • couple years coding in the basement by yourself before you are remotely useful. <br /> Profession needs to accomodate entry level, mid level, and architect level developers. <br /> Frankly, I’m tired of writing rounded corner boxes. I’ve done it 1000 times already. What I want is a system that allows newbies to do that part so I can focus on the architect level challenges. <br /> <br />
  • New (different) html pages should be able to be built without modifying the CSS. <br />
  • And for good reason. Currently there is no consistency or predictability. <br />
  • Perfectly accessible or high performance website, and then the first newbie to touch it, ruins it. Our code should be robust enough that newbies can contribute while maintaining the standards we’ve set. <br />
  • <br />
  • <br />
  • yoga, balance metaphor <br />
  • “Once upon a time...” pages to modules to objects <br /> <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • If we build new HTML pages from a component library, new pages won’t require new css. <br /> So what goes into a component library. First up, content objects. <br />
  • Anything else that should be consistent site-wide. <br />
  • <br />
  • <br />
  • media, media extended, wrap <br /> Open editable zone <br />
  • <br />
  • presentational elements <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • function created to return area that occasionally returns the diameter instead. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • not because you can’t do it <br /> everyone in this room could position something to the left and something else to the right. <br /> Also because, when working with beginners, they need not to figure out a brand new system with each module. <br /> <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • If ducati and saleMod both specify border, and the rules are the same strength, ducati should “win” as it is the last class specified. <br />
  • Support for child element selectors would solve this, but would increase the length of the rules. E > F <br />
  • <br />
  • <br />

Object Oriented CSS Presentation Transcript

  • 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