Object Oriented CSS

and why you probably need it a derekbender joint 1

The problem w/ css in large scale use 3

The problem w/ css in large scale use • Code is rarely being reused 3

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

The problem w/ css in large scale use • Code is rarely being reused • File size keeps getting bigger • Code can easily be broken 3

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

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

A solution: OOCSS 4

A solution: OOCSS • Breaks down pages into “components” or “objects” 4

A solution: OOCSS • Breaks down pages into “components” or “objects” • Can be put together to create unique pages 4

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

So...what is OOCSS? 5

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

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

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

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

Advantages 6

Advantages • Keeps ﬁle sizes down 6

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

Advantages • Keeps ﬁle sizes down • Reusing code is faster than making new CSS • Minimal new CSS created 6

Advantages • Keeps ﬁle sizes down • Reusing code is faster than making new CSS • Minimal new CSS created • Easy to adapt to teams 6

Advantages • Keeps ﬁle 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

Advantages • Keeps ﬁle 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

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) 7

Who should use it • Any large scale web applications • Large websites (50+ pages w/ different layouts) • Projects w/ large teams 7

Examples in code 8

Base & modiﬁer classes 9

Base & modiﬁer classes • box 9

Base & modiﬁer classes • box • box warning 9

Base & modiﬁer classes • box • box warning • box help 9

Base & modiﬁer classes • box • box warning • box help • box help alt 9

Base & modiﬁer classes • box • box warning • box help • box help alt • box help alt list 9

Base & modiﬁer classes 10

Base & modiﬁer classes • <a> 10

Base & modiﬁer classes • <a> • <a> w/ .btn 10

Base & modiﬁer classes • <a> • <a> w/ .btn • <a> w/ .btn & .small 10

Base & modiﬁer classes • <a> • <a> w/ .btn • <a> w/ .btn & .small • <a> w/ .btn & .small & .blue 10

OOCSS in practice 11

OOCSS in practice Great until... 12

OOCSS in practice ...I designed this 13

OOCSS in practice Keep objects as open as possible 14

CSS modiﬁers in action 15

The grid 16

The grid left_col wide_col middle_col right_col 16

The grid left_col wide_col brief middle_col box right_col box box box box 16

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

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

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

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

Tip & tricks 19

Tip & tricks • Be generic w/ your classes • class=”warning-message-box-page” - bad • class=”warning message pagelvl” - good 19

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

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

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 ﬂoat (it’s very possible!) 19

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

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/ﬁrst-look-object-oriented-css/ 20

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/ﬁrst-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

Thank you I’m derekbender twitter: @derekbender url: derekbender.com slideshare: slideshare.net/derekbender memberfuse.com nﬁstudios.com 21

http://chrisamccoy.com	151
http://www.slideshare.net	13
http://startnewday85.blogspot.com	12
http://derekbender.com	6
http://search.mywebsearch.com	1
http://chrisamccoy.posterous.com	1
http://www.linkedin.com	1

Object Oriented CSS

by Derek Bender

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 185

Statistics

Object Oriented CSS Presentation Transcript