ObjectOrientedCSS
Graeme BlackwoodCreative Lead, Deeson Onlinedeeson-online.co.uk@graemeblackwood
Props• Nicole Sullivan, http://www.stubbornella.org• Jonathan Snook (SMACSS), http://smacss.com• Everyone at http://thesas...
Before we get going
OO CSS !=OO ProgrammingBut an OOP mindset can beapplied to CSS
OOCSS does notrequire any newertechnologiesIt works in IE6 – no need for CSS3,HTML5 etc
Semantic markup isvery helpful, butusually not essentialSemantic is better though!
The traditionalapproach to CSS
Style outputas neededEach item / pageindividually...
Target styles bydrilling downthrough nestedelements
Problems withtraditional CSS
Coding takesa lot longer
It getsbloated
It is difficult to readand hard to reuse
Traditional CSS istough to maintain
‽
Object Oriented CSSA new way of thinking
Separate layout from theme(Use a grid system!)
Separate the containerfrom the content
Look for shared stylesYou will see them everywhere
Why shouldI care?
Reusable code
FasterdevelopmentLess effort to code
Easier to maintain
Less code,smaller files
Getting started
Using a grid system?You are already on the right track!
Use a resetstylesheetHTML5boilerplate’snormalize.css
Set good base stylesTo minimise later overrides* {box-sizing: border-box} is pretty handy
Set good base stylesBuild HTML prototypesTo minimise later overrideswith Drupal in mind...
Clean up what Drupalthrows at youDon’t just style,theme!
Lose unnecessarymarkup if it affects you            Some divs are            totally pointless!
Don’t be too obsessedwith perfect markupJust enough is ok
“Now, this is just a simulation of what the blocks    will look like once they’re assembled”
Let’s look at some realworld applications...
.block = inherited base styles only.grid-4 = grid class.theme-a = theme class, H3 and p inherit colour.padded is a class I...
<div class=”grid-4 theme-a block”>  <h3>Block title</h3>  <p>Hello world!</p></div>.grid-4 comes from your grid framework....
Carousel nav tabsObject is a Drupal menu – UL with a class of .sidebar-menu.Custom jQuery targets the ID.
Also used on a listingAnd it flexes to the container
99% of the styles arereused, targetedthrough .right .sidebar-menuonly to flip the active item
Carousel itemsWith a class of .product-box
Reused on listingpages
Same layout as productlistings and carousel, flexedto image size
What aboutSASS and LESS?Why bother with presentational classesin markup anymore?
Not everyone wants touse a CSS preprocessorAnd the mindset of reduce, reuse & recycleis just as important even with one
Use SASS wisely – it’sanother layer to debug
Be particularly carefulwith nested selectorshttp://thesassway.com/beginner/the-inception-rulehttp://37signals.com/svn/post...
Disregarding the otherprinciples of OOCSS maycreate pain laterYou could end up with generated CSS bloatedeven more than if...
Summary• OOCSS is as much a mindset as a technique• The principles are to reduce, reuse and recycle code• This is done thr...
Summary• CSS preprocessors like SASS and LESS are great• But they create another layer to debug• And the code they generat...
Thanks for listening!Questions?@graemeblackwoodMost of the fantastic lego images were by Kevin Poulton http://www.flickr.co...
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
Upcoming SlideShare
Loading in …5
×

Object Oriented CSS for rapid, scalable and maintainable development

8,128 views

Published on

Most frontend developers have already heard of Object Oriented CSS, yet it is still sorely under-practiced.

Do your CSS files have overrides and !importants scattered through them? Do they often come in at 3000 lines+ for a regular site?

Tied with good semantic HTML, the Object Oriented CSS approach really is the answer to rapid, lightweight, scalable and easy to maintain frontend code. OOCSS will speed up any front end build, but really comes into its own on bigger sites.

I will talk through my approach to frontend builds and show how OOCSS makes the process so much easier.

I'll also talk a bit about CSS compilers and how it is important to have a good understanding of OOCSS methods before jumping into SASS or LESS. Poor CSS practice isn't going to be rescued by a compiler; in fact it can even compound problems by bringing in another layer to debug.

I hope to instill a real understanding of what OOCSS means, why it REALLY matters, and how it's going to make you a better front end developer!

@graemeblackwood
http://www.deeson-online.co.uk/graeme-blackwood

Presented at Frontend United – http://frontendunited.org

Published in: Design, Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,128
On SlideShare
0
From Embeds
0
Number of Embeds
1,716
Actions
Shares
0
Downloads
124
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Object Oriented CSS for rapid, scalable and maintainable development

  1. ObjectOrientedCSS
  2. Graeme BlackwoodCreative Lead, Deeson Onlinedeeson-online.co.uk@graemeblackwood
  3. Props• Nicole Sullivan, http://www.stubbornella.org• Jonathan Snook (SMACSS), http://smacss.com• Everyone at http://thesassway.com• Chris Eppstein, http://compass-style.org• Kevin Poulton http://www.flickr.com/photos/kevinpoulton• And loads more!
  4. Before we get going
  5. OO CSS !=OO ProgrammingBut an OOP mindset can beapplied to CSS
  6. OOCSS does notrequire any newertechnologiesIt works in IE6 – no need for CSS3,HTML5 etc
  7. Semantic markup isvery helpful, butusually not essentialSemantic is better though!
  8. The traditionalapproach to CSS
  9. Style outputas neededEach item / pageindividually...
  10. Target styles bydrilling downthrough nestedelements
  11. Problems withtraditional CSS
  12. Coding takesa lot longer
  13. It getsbloated
  14. It is difficult to readand hard to reuse
  15. Traditional CSS istough to maintain
  16. Object Oriented CSSA new way of thinking
  17. Separate layout from theme(Use a grid system!)
  18. Separate the containerfrom the content
  19. Look for shared stylesYou will see them everywhere
  20. Why shouldI care?
  21. Reusable code
  22. FasterdevelopmentLess effort to code
  23. Easier to maintain
  24. Less code,smaller files
  25. Getting started
  26. Using a grid system?You are already on the right track!
  27. Use a resetstylesheetHTML5boilerplate’snormalize.css
  28. Set good base stylesTo minimise later overrides* {box-sizing: border-box} is pretty handy
  29. Set good base stylesBuild HTML prototypesTo minimise later overrideswith Drupal in mind...
  30. Clean up what Drupalthrows at youDon’t just style,theme!
  31. Lose unnecessarymarkup if it affects you Some divs are totally pointless!
  32. Don’t be too obsessedwith perfect markupJust enough is ok
  33. “Now, this is just a simulation of what the blocks will look like once they’re assembled”
  34. Let’s look at some realworld applications...
  35. .block = inherited base styles only.grid-4 = grid class.theme-a = theme class, H3 and p inherit colour.padded is a class I add to the grid framework for situations like this
  36. <div class=”grid-4 theme-a block”> <h3>Block title</h3> <p>Hello world!</p></div>.grid-4 comes from your grid framework.theme-a { background-color: #580174; border-radius: 6px; color: #fff; //H3 and p inherit this}
  37. Carousel nav tabsObject is a Drupal menu – UL with a class of .sidebar-menu.Custom jQuery targets the ID.
  38. Also used on a listingAnd it flexes to the container
  39. 99% of the styles arereused, targetedthrough .right .sidebar-menuonly to flip the active item
  40. Carousel itemsWith a class of .product-box
  41. Reused on listingpages
  42. Same layout as productlistings and carousel, flexedto image size
  43. What aboutSASS and LESS?Why bother with presentational classesin markup anymore?
  44. Not everyone wants touse a CSS preprocessorAnd the mindset of reduce, reuse & recycleis just as important even with one
  45. Use SASS wisely – it’sanother layer to debug
  46. Be particularly carefulwith nested selectorshttp://thesassway.com/beginner/the-inception-rulehttp://37signals.com/svn/posts/3003-css-taking-control-of-the-cascade
  47. Disregarding the otherprinciples of OOCSS maycreate pain laterYou could end up with generated CSS bloatedeven more than if you had hand-coded it
  48. Summary• OOCSS is as much a mindset as a technique• The principles are to reduce, reuse and recycle code• This is done through separating layout from theme• and the container from the content• It relies primarily on reused classes and markup• We are working on Drupal 8 to make it much easier to change markup. In the meantime, try Display Suite or Skinr for node theming
  49. Summary• CSS preprocessors like SASS and LESS are great• But they create another layer to debug• And the code they generate can be very bloated• Preprocessors are not an excuse to be lazy• They still need to be used with an OO mindset
  50. Thanks for listening!Questions?@graemeblackwoodMost of the fantastic lego images were by Kevin Poulton http://www.flickr.com/photos/kevinpoulton

×