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

Published on

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

Published in: Design, Technology, Education
1 Comment
16 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
4,175
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
174
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide
  • OOCSS can be used across a company for multiple projects
  • OOCSS can be used across a company for multiple projects
  • OOCSS can be used across a company for multiple projects
  • An overall concept of oocss is to be able to reuse css easily
    The base / modifier class can help
  • An overall concept of oocss is to be able to reuse css easily
    The base / modifier class can help
  • An overall concept of oocss is to be able to reuse css easily
    The base / modifier class can help
  • An overall concept of oocss is to be able to reuse css easily
    The base / modifier class can help
  • An overall concept of oocss is to be able to reuse css easily
    The base / modifier class can help
  • An overall concept of oocss is to be able to reuse css easily
    The base / modifier class can help
  • 1 here is the basic box element
    2 once we start adding modifying classes, it changes
  • 1 here is the basic box element
    2 once we start adding modifying classes, it changes
  • 1 here is the basic box element
    2 once we start adding modifying classes, it changes
  • write your css to easily extend
  • write your css to easily extend
  • write your css to easily extend
  • here is an example of a grid i use w/ MF.

    Notice i name all the columns with unique names

    (CLICK) now this is breakdown of individual box elements i have on this page
  • here is an example of a grid i use w/ MF.

    Notice i name all the columns with unique names

    (CLICK) now this is breakdown of individual box elements i have on this page
  • here is an example of a grid i use w/ MF.

    Notice i name all the columns with unique names

    (CLICK) now this is breakdown of individual box elements i have on this page
  • here is an example of a grid i use w/ MF.

    Notice i name all the columns with unique names

    (CLICK) now this is breakdown of individual box elements i have on this page
  • here is an example of a grid i use w/ MF.

    Notice i name all the columns with unique names

    (CLICK) now this is breakdown of individual box elements i have on this page
  • Leave your code open
    - in the same way you should leave your elements open, you should leave your styles open
    - dont add div to a class. you or someone else may want to expand the element later
    Avoid using float
    - general practice
    - easier to come back and change things without breaking elements
  • Leave your code open
    - in the same way you should leave your elements open, you should leave your styles open
    - dont add div to a class. you or someone else may want to expand the element later
    Avoid using float
    - general practice
    - easier to come back and change things without breaking elements
  • Leave your code open
    - in the same way you should leave your elements open, you should leave your styles open
    - dont add div to a class. you or someone else may want to expand the element later
    Avoid using float
    - general practice
    - easier to come back and change things without breaking elements
  • Leave your code open
    - in the same way you should leave your elements open, you should leave your styles open
    - dont add div to a class. you or someone else may want to expand the element later
    Avoid using float
    - general practice
    - easier to come back and change things without breaking elements
  • 1. Nicole Sullivan actually made a framework from her OOCSS code
    A METHOD, or PRACTICE
  • 1. Nicole Sullivan actually made a framework from her OOCSS code
    A METHOD, or PRACTICE
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×