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.
and why you probably need it
                    a derekbender joint




             1
2
2
The problem
w/ css in large scale use




                            3
The problem
                    w/ css in large scale use

• Code is rarely being reused




                             ...
The problem
                      w/ css in large scale use

• Code is rarely being reused
• File size keeps getting bigge...
The problem
                      w/ css in large scale use

• Code is rarely being reused
• File size keeps getting bigge...
The problem
                      w/ css in large scale use

• Code is rarely being reused
• File size keeps getting bigge...
The problem
                      w/ css in large scale use

• Code is rarely being reused
• File size keeps getting bigge...
A solution: OOCSS




                    4
A solution: OOCSS

• Breaks down pages into “components” or “objects”




                                                ...
A solution: OOCSS

• Breaks down pages into “components” or “objects”
• Can be put together to create unique pages




   ...
A solution: OOCSS

• Breaks down pages into “components” or “objects”
• Can be put together to create unique pages
• Break...
So...what is OOCSS?




                      5
So...what is OOCSS?
OOCSS is a method in which CSS is written to be reusable
and easily maintained




                   ...
So...what is OOCSS?
OOCSS is a method in which CSS is written to be reusable
and easily maintained

A way of writing scala...
So...what is OOCSS?
OOCSS is a method in which CSS is written to be reusable
and easily maintained

A way of writing scala...
So...what is OOCSS?
OOCSS is a method in which CSS is written to be reusable
and easily maintained

A way of writing scala...
Advantages




             6
Advantages
• Keeps file sizes down




                                  6
Advantages
• Keeps file sizes down
• Reusing code is faster than making new CSS




                                       ...
Advantages
• Keeps file sizes down
• Reusing code is faster than making new CSS
• Minimal new CSS created




             ...
Advantages
• Keeps file sizes down
• Reusing code is faster than making new CSS
• Minimal new CSS created
• Easy to adapt t...
Advantages
• Keeps file sizes down
• Reusing code is faster than making new CSS
• Minimal new CSS created
• Easy to adapt t...
Advantages
• Keeps file sizes down
• Reusing code is faster than making new CSS
• Minimal new CSS created
• Easy to adapt t...
Who should use it




                    7
Who should use it
• Any large scale web applications




                                     7
Who should use it
• Any large scale web applications

• Large websites (50+ pages w/ different layouts)




              ...
Who should use it
• Any large scale web applications

• Large websites (50+ pages w/ different layouts)

• Projects w/ lar...
8
Examples in code


                   8
Base & modifier classes




                         9
Base & modifier classes




                         9
Base & modifier classes


• box




                                 9
Base & modifier classes


• box
• box warning




                                    9
Base & modifier classes


• box
• box warning
• box help




                                      9
Base & modifier classes


• box
• box warning
• box help
• box help alt



                                      9
Base & modifier classes


• box
• box warning
• box help
• box help alt
• box help alt list


                             ...
Base & modifier classes




                         10
Base & modifier classes
• <a>




                                 10
Base & modifier classes
• <a>
• <a> w/ .btn




                                    10
Base & modifier classes
• <a>
• <a> w/ .btn
• <a> w/ .btn & .small




                                     10
Base & modifier classes
• <a>
• <a> w/ .btn
• <a> w/ .btn & .small
• <a> w/ .btn & .small & .blue




                     ...
OOCSS in practice




                    11
OOCSS in practice




                    11
OOCSS in practice




                    11
OOCSS in practice




                    11
OOCSS in practice




                    12
OOCSS in practice




                    12
OOCSS in practice




                    12
OOCSS in practice




                    12
OOCSS in practice
     Great until...




                      12
OOCSS in practice




                    13
OOCSS in practice
    ...I designed this




                         13
OOCSS in practice




                    14
OOCSS in practice




                    14
OOCSS in practice
Keep objects as open as possible




                                   14
CSS modifiers in action




                         15
CSS modifiers in action




                         15
CSS modifiers in action




                         15
CSS modifiers in action




                         15
The grid




           16
The grid




           16
The grid
left_col           wide_col




           middle_col         right_col




                                     ...
The grid
left_col             wide_col
                       brief




           middle_col
              box           ...
Objects & the grid




                     17
Objects & the grid




                     17
Objects & the grid



middle_col




                          17
Objects & the grid



middle_col


                          right_col



                                      17
Where to start




                 18
Where to start
• Start building separate, reusable components (objects)
 • Could be headings, boxes, buttons, etc.




   ...
Where to start
• Start building separate, reusable components (objects)
 • Could be headings, boxes, buttons, etc.

• Use ...
Where to start
• Start building separate, reusable components (objects)
 • Could be headings, boxes, buttons, etc.

• Use ...
Where to start
• Start building separate, reusable components (objects)
  • Could be headings, boxes, buttons, etc.

• Use...
Tip & tricks




               19
Tip & tricks
• Be generic w/ your classes
 • class=”warning-message-box-page” - bad
 • class=”warning message pagelvl” - g...
Tip & tricks
• Be generic w/ your classes
 • class=”warning-message-box-page” - bad
 • class=”warning message pagelvl” - g...
Tip & tricks
• Be generic w/ your classes
 • class=”warning-message-box-page” - bad
 • class=”warning message pagelvl” - g...
Tip & tricks
• Be generic w/ your classes
  • class=”warning-message-box-page” - bad
  • class=”warning message pagelvl” -...
OOCSS resources
• OOCSS Framework - Nicole Sullivan
 •http://wiki.github.com/stubbornella/oocss




                      ...
OOCSS resources
• OOCSS Framework - Nicole Sullivan
 •http://wiki.github.com/stubbornella/oocss


• First Look : Object Or...
OOCSS resources
• OOCSS Framework - Nicole Sullivan
 •http://wiki.github.com/stubbornella/oocss


• First Look : Object Or...
Thank you
I’m derekbender
 twitter: @derekbender
 url: derekbender.com
 slideshare: slideshare.net/derekbender


 memberfu...
Upcoming SlideShare
Loading in …5
×

Object Oriented CSS

4,664 views

Published on

Presentation given on the topic of Object Oriented CSS at BarCamp Tampa 2009

Published in: Design, Technology, Education
  • The video never hav any sound! What's the deal? This site is broke. I have tried it Windows with IE7 and IE8 and still no go.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Object Oriented CSS

  1. 1. and why you probably need it a derekbender joint 1
  2. 2. 2
  3. 3. 2
  4. 4. The problem w/ css in large scale use 3
  5. 5. The problem w/ css in large scale use • Code is rarely being reused 3
  6. 6. The problem w/ css in large scale use • Code is rarely being reused • File size keeps getting bigger 3
  7. 7. The problem w/ css in large scale use • Code is rarely being reused • File size keeps getting bigger • Code can easily be broken 3
  8. 8. The problem w/ css in large scale use • Code is rarely being reused • File size keeps getting bigger • Code can easily be broken • Hard for new people to join the team 3
  9. 9. The problem w/ css in large scale use • Code is rarely being reused • File size keeps getting bigger • Code can easily be broken • Hard for new people to join the team • One guy does most of the work (*cough*me*cough*) 3
  10. 10. A solution: OOCSS 4
  11. 11. A solution: OOCSS • Breaks down pages into “components” or “objects” 4
  12. 12. A solution: OOCSS • Breaks down pages into “components” or “objects” • Can be put together to create unique pages 4
  13. 13. A solution: OOCSS • Breaks down pages into “components” or “objects” • Can be put together to create unique pages • Breaks down dependency between container and contents 4
  14. 14. So...what is OOCSS? 5
  15. 15. So...what is OOCSS? OOCSS is a method in which CSS is written to be reusable and easily maintained 5
  16. 16. So...what is OOCSS? OOCSS is a method in which CSS is written to be reusable and easily maintained A way of writing scalable, sane, maintainable CSS - Nicole Sullivan 5
  17. 17. So...what is OOCSS? OOCSS is a method in which CSS is written to be reusable and easily maintained A way of writing scalable, sane, maintainable CSS - Nicole Sullivan Best use is in large applications and/or large teams 5
  18. 18. So...what is OOCSS? OOCSS is a method in which CSS is written to be reusable and easily maintained A way of writing scalable, sane, maintainable CSS - Nicole Sullivan Best use is in large applications and/or large teams NOT A FRAMEWORK But there is a framework called OOCSS (huh?) 5
  19. 19. Advantages 6
  20. 20. Advantages • Keeps file sizes down 6
  21. 21. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS 6
  22. 22. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS • Minimal new CSS created 6
  23. 23. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS • Minimal new CSS created • Easy to adapt to teams 6
  24. 24. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS • Minimal new CSS created • Easy to adapt to teams • Extends what can be done with markup 6
  25. 25. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS • Minimal new CSS created • Easy to adapt to teams • Extends what can be done with markup • Consistent design = clean code = fast site (& happy dev guys) 6
  26. 26. Who should use it 7
  27. 27. Who should use it • Any large scale web applications 7
  28. 28. Who should use it • Any large scale web applications • Large websites (50+ pages w/ different layouts) 7
  29. 29. Who should use it • Any large scale web applications • Large websites (50+ pages w/ different layouts) • Projects w/ large teams 7
  30. 30. 8
  31. 31. Examples in code 8
  32. 32. Base & modifier classes 9
  33. 33. Base & modifier classes 9
  34. 34. Base & modifier classes • box 9
  35. 35. Base & modifier classes • box • box warning 9
  36. 36. Base & modifier classes • box • box warning • box help 9
  37. 37. Base & modifier classes • box • box warning • box help • box help alt 9
  38. 38. Base & modifier classes • box • box warning • box help • box help alt • box help alt list 9
  39. 39. Base & modifier classes 10
  40. 40. Base & modifier classes • <a> 10
  41. 41. Base & modifier classes • <a> • <a> w/ .btn 10
  42. 42. Base & modifier classes • <a> • <a> w/ .btn • <a> w/ .btn & .small 10
  43. 43. Base & modifier classes • <a> • <a> w/ .btn • <a> w/ .btn & .small • <a> w/ .btn & .small & .blue 10
  44. 44. OOCSS in practice 11
  45. 45. OOCSS in practice 11
  46. 46. OOCSS in practice 11
  47. 47. OOCSS in practice 11
  48. 48. OOCSS in practice 12
  49. 49. OOCSS in practice 12
  50. 50. OOCSS in practice 12
  51. 51. OOCSS in practice 12
  52. 52. OOCSS in practice Great until... 12
  53. 53. OOCSS in practice 13
  54. 54. OOCSS in practice ...I designed this 13
  55. 55. OOCSS in practice 14
  56. 56. OOCSS in practice 14
  57. 57. OOCSS in practice Keep objects as open as possible 14
  58. 58. CSS modifiers in action 15
  59. 59. CSS modifiers in action 15
  60. 60. CSS modifiers in action 15
  61. 61. CSS modifiers in action 15
  62. 62. The grid 16
  63. 63. The grid 16
  64. 64. The grid left_col wide_col middle_col right_col 16
  65. 65. The grid left_col wide_col brief middle_col box right_col box box box box 16
  66. 66. Objects & the grid 17
  67. 67. Objects & the grid 17
  68. 68. Objects & the grid middle_col 17
  69. 69. Objects & the grid middle_col right_col 17
  70. 70. Where to start 18
  71. 71. Where to start • Start building separate, reusable components (objects) • Could be headings, boxes, buttons, etc. 18
  72. 72. Where to start • Start building separate, reusable components (objects) • Could be headings, boxes, buttons, etc. • Use a grid • Let grid control width & content control height 18
  73. 73. Where to start • Start building separate, reusable components (objects) • Could be headings, boxes, buttons, etc. • Use a grid • Let grid control width & content control height • Separate structure and appearance 18
  74. 74. Where to start • Start building separate, reusable components (objects) • Could be headings, boxes, buttons, etc. • Use a grid • Let grid control width & content control height • Separate structure and appearance • Use consistent, semantic styles (duh) 18
  75. 75. Tip & tricks 19
  76. 76. Tip & tricks • Be generic w/ your classes • class=”warning-message-box-page” - bad • class=”warning message pagelvl” - good 19
  77. 77. Tip & tricks • Be generic w/ your classes • class=”warning-message-box-page” - bad • class=”warning message pagelvl” - good • Assign unique IDs • id=”eventcal_location” • id=”profile_comments” 19
  78. 78. Tip & tricks • Be generic w/ your classes • class=”warning-message-box-page” - bad • class=”warning message pagelvl” - good • Assign unique IDs • id=”eventcal_location” • id=”profile_comments” • Leave your code open • div.error not .error 19
  79. 79. Tip & tricks • Be generic w/ your classes • class=”warning-message-box-page” - bad • class=”warning message pagelvl” - good • Assign unique IDs • id=”eventcal_location” • id=”profile_comments” • Leave your code open • div.error not .error • Minimal use of float (it’s very possible!) 19
  80. 80. OOCSS resources • OOCSS Framework - Nicole Sullivan •http://wiki.github.com/stubbornella/oocss 20
  81. 81. OOCSS resources • OOCSS Framework - Nicole Sullivan •http://wiki.github.com/stubbornella/oocss • First Look : Object Oriented CSS •http://www.sitepoint.com/blogs/2009/06/16/first-look-object-oriented-css/ 20
  82. 82. OOCSS resources • OOCSS Framework - Nicole Sullivan •http://wiki.github.com/stubbornella/oocss • First Look : Object Oriented CSS •http://www.sitepoint.com/blogs/2009/06/16/first-look-object-oriented-css/ • OOCSS and Being Generic with Your Base Classes •http://www.bennadel.com/blog/1675-Object-Oriented-CSS-OOCSS-And-Being- Generic-With-Your-Base-CSS-Classes.htm 20
  83. 83. Thank you I’m derekbender twitter: @derekbender url: derekbender.com slideshare: slideshare.net/derekbender memberfuse.com nfistudios.com 21

×