Object Oriented CSS
•Download as KEY, PDF•
17 likes•1,653 views
Presentation given on the topic of Object Oriented CSS at BarCamp Tampa 2009
Recommended
More Related Content
Similar to Object Oriented CSS
Similar to Object Oriented CSS (20)
Recently uploaded
Recently uploaded (20)
Object Oriented CSS
- 1. and why you probably need it a derekbender joint 1
- 2. 2
- 3. 2
- 4. The problem w/ css in large scale use 3
- 5. The problem w/ css in large scale use • Code is rarely being reused 3
- 6. The problem w/ css in large scale use • Code is rarely being reused • File size keeps getting bigger 3
- 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. 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. 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. A solution: OOCSS 4
- 11. A solution: OOCSS • Breaks down pages into “components” or “objects” 4
- 12. A solution: OOCSS • Breaks down pages into “components” or “objects” • Can be put together to create unique pages 4
- 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. So...what is OOCSS? 5
- 15. So...what is OOCSS? OOCSS is a method in which CSS is written to be reusable and easily maintained 5
- 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. 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. 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. Advantages 6
- 20. Advantages • Keeps file sizes down 6
- 21. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS 6
- 22. Advantages • Keeps file sizes down • Reusing code is faster than making new CSS • Minimal new CSS created 6
- 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. 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. 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. Who should use it 7
- 27. Who should use it • Any large scale web applications 7
- 28. Who should use it • Any large scale web applications • Large websites (50+ pages w/ different layouts) 7
- 29. Who should use it • Any large scale web applications • Large websites (50+ pages w/ different layouts) • Projects w/ large teams 7
- 30. 8
- 31. Examples in code 8
- 32. Base & modifier classes 9
- 33. Base & modifier classes 9
- 34. Base & modifier classes • box 9
- 35. Base & modifier classes • box • box warning 9
- 36. Base & modifier classes • box • box warning • box help 9
- 37. Base & modifier classes • box • box warning • box help • box help alt 9
- 38. Base & modifier classes • box • box warning • box help • box help alt • box help alt list 9
- 39. Base & modifier classes 10
- 40. Base & modifier classes • <a> 10
- 41. Base & modifier classes • <a> • <a> w/ .btn 10
- 42. Base & modifier classes • <a> • <a> w/ .btn • <a> w/ .btn & .small 10
- 43. Base & modifier classes • <a> • <a> w/ .btn • <a> w/ .btn & .small • <a> w/ .btn & .small & .blue 10
- 44. OOCSS in practice 11
- 45. OOCSS in practice 11
- 46. OOCSS in practice 11
- 47. OOCSS in practice 11
- 48. OOCSS in practice 12
- 49. OOCSS in practice 12
- 50. OOCSS in practice 12
- 51. OOCSS in practice 12
- 52. OOCSS in practice Great until... 12
- 53. OOCSS in practice 13
- 54. OOCSS in practice ...I designed this 13
- 55. OOCSS in practice 14
- 56. OOCSS in practice 14
- 57. OOCSS in practice Keep objects as open as possible 14
- 58. CSS modifiers in action 15
- 59. CSS modifiers in action 15
- 60. CSS modifiers in action 15
- 61. CSS modifiers in action 15
- 62. The grid 16
- 63. The grid 16
- 64. The grid left_col wide_col middle_col right_col 16
- 65. The grid left_col wide_col brief middle_col box right_col box box box box 16
- 66. Objects & the grid 17
- 67. Objects & the grid 17
- 68. Objects & the grid middle_col 17
- 69. Objects & the grid middle_col right_col 17
- 70. Where to start 18
- 71. Where to start • Start building separate, reusable components (objects) • Could be headings, boxes, buttons, etc. 18
- 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. 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. 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. Tip & tricks 19
- 76. Tip & tricks • Be generic w/ your classes • class=”warning-message-box-page” - bad • class=”warning message pagelvl” - good 19
- 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. 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. 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. OOCSS resources • OOCSS Framework - Nicole Sullivan •http://wiki.github.com/stubbornella/oocss 20
- 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. 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. Thank you I’m derekbender twitter: @derekbender url: derekbender.com slideshare: slideshare.net/derekbender memberfuse.com nfistudios.com 21
Editor's Notes
- 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