• Like
Object Oriented CSS for rapid, scalable and maintainable development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Object Oriented CSS for rapid, scalable and maintainable development


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

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!


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

Published in Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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.
  • 17. Object Oriented CSSA new way of thinking
  • 18. Separate layout from theme(Use a grid system!)
  • 19. Separate the containerfrom the content
  • 20. Look for shared stylesYou will see them everywhere
  • 21. Why shouldI care?
  • 22. Reusable code
  • 23. FasterdevelopmentLess effort to code
  • 24. Easier to maintain
  • 25. Less code,smaller files
  • 26. Getting started
  • 27. Using a grid system?You are already on the right track!
  • 28. Use a resetstylesheetHTML5boilerplate’snormalize.css
  • 29. Set good base stylesTo minimise later overrides* {box-sizing: border-box} is pretty handy
  • 30. Set good base stylesBuild HTML prototypesTo minimise later overrideswith Drupal in mind...
  • 31. Clean up what Drupalthrows at youDon’t just style,theme!
  • 32. Lose unnecessarymarkup if it affects you Some divs are totally pointless!
  • 33. Don’t be too obsessedwith perfect markupJust enough is ok
  • 34. “Now, this is just a simulation of what the blocks will look like once they’re assembled”
  • 35. Let’s look at some realworld applications...
  • 36. .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
  • 37. <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}
  • 38. Carousel nav tabsObject is a Drupal menu – UL with a class of .sidebar-menu.Custom jQuery targets the ID.
  • 39. Also used on a listingAnd it flexes to the container
  • 40. 99% of the styles arereused, targetedthrough .right .sidebar-menuonly to flip the active item
  • 41. Carousel itemsWith a class of .product-box
  • 42. Reused on listingpages
  • 43. Same layout as productlistings and carousel, flexedto image size
  • 44. What aboutSASS and LESS?Why bother with presentational classesin markup anymore?
  • 45. Not everyone wants touse a CSS preprocessorAnd the mindset of reduce, reuse & recycleis just as important even with one
  • 46. Use SASS wisely – it’sanother layer to debug
  • 47. Be particularly carefulwith nested selectorshttp://thesassway.com/beginner/the-inception-rulehttp://37signals.com/svn/posts/3003-css-taking-control-of-the-cascade
  • 48. Disregarding the otherprinciples of OOCSS maycreate pain laterYou could end up with generated CSS bloatedeven more than if you had hand-coded it
  • 49. 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
  • 50. 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
  • 51. Thanks for listening!Questions?@graemeblackwoodMost of the fantastic lego images were by Kevin Poulton http://www.flickr.com/photos/kevinpoulton