Object Oriented CSS for rapid, scalable and maintainable development
22 likes5,123 views
The document discusses Object Oriented CSS (OOCSS), emphasizing the separation of layout and theme to promote reusable styles for efficient web development. It highlights the importance of clean and semantic markup, the benefits of using a grid system, and touches upon the use of CSS preprocessors like Sass and Less. OOCSS is presented as a mindset aimed at reducing code bloat and enhancing maintainability, particularly in the context of Drupal theming.
Object Oriented CSS for rapid, scalable and maintainable development
- 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
- 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
- 22. Reusable code
- 24. Faster development Less effort to code
- 29. Getting started
- 30. Using a grid system? You are already on the right track!
- 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
- 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