1. Object Oriented CSS Creative Director Deeson Online twitter.com/graemeblackwood Graeme Blackwood

2. Graeme Blackwood Creative Director, Deeson Online deeson-online.co.uk @graemeblackwooddeeson-online.co.uk Graeme Blackwood Creative Director, Deeson Online deeson-online.co.uk @graemeblackwooddeeson-online.co.uk

3. Object Oriented CSS

4. Props Nicole Sullivan, http://www.stubbornella.orghttp://www.stubbornella.org Jonathan Snook (SMACSS), http://smacss.comhttp://smacss.com Everyone at http://thesassway.comhttp://thesassway.com Chris Eppstein, http://compass-style.orghttp://compass-style.org Kevin Poulton http://www.flickr.com/photos/kevinpoultonhttp://www.flickr.com/photos/kevinpoulton And loads more!

5. Some misconceptions

6. OO CSS != OO Programming But an OOP mindset can be applied to CSS OO CSS != OO Programming But an OOP mindset can be applied to CSS

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

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

9. The traditional approach to CSS

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

11. Target styles by drilling down through nested elements

12. Problems with traditional CSS

13. Coding takes a lot longer

14. It gets bloated

15. It is difficult to read and hard to reuse

16. Traditional CSS is tough to maintain

17. ‽

18. Object Oriented CSS A new way of thinking

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

20. Separate the container from the content

21. Look for shared styles You will see them everywhere

22. Why should I care?

23. Reusable code

25. Faster development Less effort to code

26. Easier to maintain

29. Less code, smaller files

30. Getting started

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

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

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

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

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

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

37. PHP code not for you? I find Drupal modules like Display Suite and Skinr helpful

38. Check out TWIG We’re working on making Drupal 8 a lot easier to theme. http://twig.sensiolabs.org/ http://twig.sensiolabs.org/ Check out TWIG We’re working on making Drupal 8 a lot easier to theme. http://twig.sensiolabs.org/ http://twig.sensiolabs.org/

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

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

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

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

43. Block title Hello world!.grid-4 comes from your grid framework.theme-a { background-color: #580174; border-radius: 6px; color: #fff; //H3 and p inherit this }

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

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

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

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

48. Reused on listing pages

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

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

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

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

53. 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 http://thesassway.com/beginner/the-inception-rule http://37signals.com/svn/posts/3003-css-taking-control-of-the- cascade 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 http://thesassway.com/beginner/the-inception-rule http://37signals.com/svn/posts/3003-css-taking-control-of-the- cascade

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

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

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

58. Спасибо за внимание Вопросы? Creative Director Deeson Online @graemeblackwood Graeme Blackwood

59. @graemeblackwood Вопросы? Спасибо за внимание Most of the fantastic lego images were by Kevin Poulton http://www.flickr.com/photos/kevinpoultonhttp://www.flickr.com/photos/kevinpoulton