Object Oriented CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + ryman ryman 4 months ago
    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.
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

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

6 Favorites

Object Oriented CSS - Presentation Transcript

  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

+ Derek BenderDerek Bender, 5 months ago

custom

696 views, 6 favs, 1 embeds more stats

Presentation given on the topic of Object Oriented more

More info about this presentation

© All Rights Reserved

Go to text version

  • Total Views 696
    • 692 on SlideShare
    • 4 from embeds
  • Comments 1
  • Favorites 6
  • Downloads 37
Most viewed embeds
  • 4 views on http://derekbender.com

more

All embeds
  • 4 views on http://derekbender.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

more
What's New

© 2009 SlideShare Inc. All rights reserved.