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

1. Object
Oriented
CSS

2. Graeme Blackwood
Creative Lead, Deeson Online
deeson-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 Programming
But an OOP mindset can be
applied to CSS

6. OOCSS does not
require any newer
technologies
It works in IE6 – no need for CSS3,
HTML5 etc

7. Semantic markup is
very helpful, but
usually not essential
Semantic is better though!

8. The traditional
approach to CSS

9. Style output
as needed
Each item / page
individually...

10. Target styles by
drilling down
through nested
elements

11. Problems with
traditional CSS

12. Coding takes
a lot longer

13. It gets
bloated

14. It is difficult to read
and hard to reuse

15. Traditional CSS is
tough to maintain

16. ‽

17. Object Oriented CSS
A new way of thinking

18. Separate layout from theme
(Use a grid system!)

19. Separate the container
from the content

20. Look for shared styles
You will see them everywhere

21. Why should
I care?

22. Reusable code

24. Faster
development
Less effort to code

25. Easier to maintain

28. Less code,
smaller files

29. Getting started

30. Using a grid system?
You are already on the right track!

31. Use a reset
stylesheet
HTML5
boilerplate’s
normalize.css

32. Set good base styles
To minimise later overrides
* {box-sizing: border-box} is pretty handy

33. Set good base styles
Build HTML prototypes
To minimise later overrides
with Drupal in mind...

34. Clean up what Drupal
throws at you
Don’t just style,
theme!

35. Lose unnecessary
markup if it affects you
Some divs are
totally pointless!

36. Don’t be too obsessed
with perfect markup
Just enough is ok

37. “Now, this is just a simulation of what the blocks
will look like once they’re assembled”

38. Let’s look at some real
world applications...

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

40. <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
}

41. Carousel nav tabs
Object is a Drupal menu – UL with a class of .sidebar-menu.
Custom jQuery targets the ID.

42. Also used on a listing
And it flexes to the container

43. 99% of the styles are
reused, targeted
through .right .sidebar-menu
only to flip the active item

44. Carousel items
With a class of .product-box

45. Reused on listing
pages

46. Same layout as product
listings and carousel, flexed
to image size

47. What about
SASS and LESS?
Why bother with presentational classes
in markup anymore?

48. Not everyone wants to
use a CSS preprocessor
And the mindset of reduce, reuse & recycle
is just as important even with one

49. Use SASS wisely – it’s
another layer to debug

50. Be particularly careful
with nested selectors
http://thesassway.com/beginner/the-inception-rule
http://37signals.com/svn/posts/3003-css-taking-control-of-
the-cascade

52. Disregarding the other
principles of OOCSS may
create pain later
You could end up with generated CSS bloated
even more than if you had hand-coded it

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

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

55. Thanks for listening!
Questions?
@graemeblackwood
Most of the fantastic lego images were by Kevin Poulton http://www.flickr.com/photos/kevinpoulton