Implementing OOCSS Methodologies


Published on

In this presentation, we discuss the origin of Object Oriented CSS and observe three popular methods for implementation. In addition, we talk about Structured CSS ...My own (preferred) interpretation of the best practices of OOCSS.

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Implementing OOCSS Methodologies

  1. 1. CSS ArchitectureImplementing OOCSS Methodologies
  2. 2. Introduction• A common problem with CSS is that while it grows insize and scale it often becomes difficult to maintain• Common problems; Duplication, disorganization and alot of extra work for the browser (parsing, re-paint, re-layout) …Slow for the user!• Work smarter and not harder, continually look for betterways to organize code• Discuss a relatively new approach to writing better CSS
  3. 3. Introduction“To maintain UI consistency and minimize developmenteffort on typical interface components, those componentshave to be easily reusable.” - BEM Methodology
  4. 4. What is OOCSS?• The term OOCSS was first presented by front-end developer NicoleSullivan as an approach for writing CSS that’s predictable, fast andmaintainable.• The purpose of OOCSS is to encourage code reuse and avoidduplication• In OOCSS, the CSS “object” is simply a repeating visual patternand typically consists of four things; CSS, HTML, JavaScript andimages• Is it really object oriented programming? Simple answer, no.
  5. 5. What is OOCSS?“What OOCSS asks us to do is spend more time upfrontthinking about what will be common across differentelements and then abstract those commonalities out intoreusable modules.” - Steven Bradley Glicksman
  6. 6. Two Principles of OOCSS• Separate Content From Container - The content’scontainer should be styled independently from thecontent. A container or content should look the same nomatter where you put them ...Styles should not belocation-dependent.• Separate Structure From Skin - The layout componentsshould be styled independently from the design (theme).
  7. 7. OOCSS Methodologies• There are currently three popular methodologies forimplementing OOCSS;• The OOCSS Framework• SMACSS• DRY CSS• My implementation, called Structured CSS• While these methodologies share many similarities, thephilosophy behind implementation in dramaticallydifferent
  8. 8. OOCSS Methodologies:OOCSS Framework• Nicole Sullivan has created a Git hosted project thatincludes a HTML,CSS and JavaScript framework basedon OOCSS best practices• Several guidelines that should be followed for creatingobjects, modules and extending objects
  9. 9. OOCSS Framework:Module Objects• The OOCSS framework suggest creating objects calledmodules• Modules describe a generic content block and are composed ofa wrapper, inner wrapper and often times a header, body andfooter wrapper.• The purpose of the module is to abstract the style of anelement from it’s surrounding structure and inner content.<div class="mod"><div class="inner"><div class="hd">head</div><div class="bd">body</div><div class="ft">foot</div></div></div>
  10. 10. OOCSS Framework:Media Object• One specific type of module described in the OOCSSframework is the Media Object• The media object provides structure for a group of relatedelements• Media object examples
  11. 11. OOCSS Framework:Media Object [Ex.]<div class=”media"><div class=”media-inner"><div class=”pull-left"><img src=“” alt=“” class=”media-image" /></div><div class=“media-content-wrapper”><div class="media-header">head</div><div class="media-body">body</div><div class="media-footer">foot</div></div></div></div>
  12. 12. OOCSS Framework:Extending Objects• Often times you will have objects that are very similar butneed some small modifications• Objects can be extended to contain more properties bycreating additional classes for the object<img src=”#” alt=”#” /><img class=”image-large” src=”#” alt=”#” /><img class=”image-rounded” src=”#” alt=”#” /><img class=”image-border” src=”#” alt=”#” />
  13. 13. OOCSS Methodologies:SMACSS• SMACSS, as defined by it’s author, is an attempt to documenta consistent approach to site development when using CSS• At it’s core, SMACSS is guideline to use for categorizing andnaming CSS rules• Categorizing CSS rules allows us to;• Define better practices around how we style elements• Have a solid understanding how our CSS should be organized• Know exactly where to place them (instead of at the bottom ofsome random fie)• There’s even a book!
  14. 14. SMACSS :Categorizing Rules• Base - Base rules define default styling are applied to anelement using an element or descendent selector but doesn’tnot include class or ID selectors.• Layout - The purpose of layout rules are to abstract the styledefinitions for the site structure• Module - Modules sit inside layout components and should bedesigned to exist as a standalone component• State – Definitions that provide style for an alternate state ofan element (e.g. hidden or expanded)• Theme – Defines things like colors and images that give yourapplication or site its look
  15. 15. SMACSS:Naming Rules• Using classes to name your objects and their components• SMACSS suggests using a prefix to differentiate betweenthe different categories• The class should describe the object
  16. 16. SMACSS:Subclassing Rules• Subclasses are classes that extend the original objectsproperties• This is very similar to how the OOCSS frameworksuggests extending objects.button /* defaults */.button-small /* controls size */.button-success /* controls color */.button-disabled /* custom state */.button-small .button-success /* Multiple */
  17. 17. OOCSS Methodologies:DRYCSS• DRYCSS is a methodology for creating efficient, unifiedand scalable stylesheets, that avoid duplication• The principles of DRYCSS are never repeat astyle/property definition (if you can avoid it) and togroup selectors with shared properties• Styles that can be completely decoupled from the HTML(you do not have to add classes to the HTML)
  18. 18. DRYCSS: Rules• In DRYCSS, selectors that share properties are groupedtogether• The groups are based on the their role in the design (e.g.colors, fonts, shapes) and use a group name as an ID at the topof the definition list and a class at the bottom#LARGE-TEXT,#featured-headline, h1, .pull-quote,.credit textarea, .credit label, #comment-div,.archive-meta, .archive-title, .column-header,.column-subtitle, .recent-articles, .tab-container.large-text {font-size: 20px;}
  19. 19. OOCSS Methodologies:Structured CSS• My own interpretation of implementing OOCSSmethodologies• It’s a combination of techniques to compose stylesheetsthat are predictable, scalable, modular and maintainable• This technique also embraces the idea of writing classesthat are extensible and reusable• The method is heavily influenced by SMACSS
  20. 20. Structured CSS:Naming Rules• Create semantic selectors but avoid being too specific andavoid shorthand (such as abbreviations) for selector names• Use classes instead of ID’s, we want to avoid deep levels ofspecificity• ID’s ok for something that you know will on be used once on apage (header/footer) but I generally avoid them• { color: orange; size:24px; }• Good.text-primary { color: orange; size:24px; }
  21. 21. Structured CSS:Subclass Rules• Use subclasses to extend objects with additional properties• Twitter’s Bootstrap is a great example• Avoid creating too many properties for an object, it’s costly.button /* defaults */.button-small /* controls size */.button-success /* controls color */.button-disabled /* custom state */<a href=“#” class=“button button-small button-success”>
  22. 22. Structured CSS:Category Rules• Follow SMACSS categories;• Layout• Base• Theme• Module• I do not create a state stylesheet• I like to keep state changes with the object• I don’t like traversing two stylesheets to make achange
  23. 23. Category Rules:Layout Category• Grid System - Grid systems provide a consistent and predictablesystem for placing objects. They define and control the structure ofthe website ...Twitter’s Bootstrap is a great example• Grid System Media Queries - CSS media queries allows us to adaptour content to multiple screen resolutions• Layout Helpers - Layout helpers are special classes that assist thegrid framework by abstracting vertical spacing and display propertiesinto their own category.buffer-top-large {margin-top: 20px;}.spacer-large {display: block; height: 20px;}.display-hidden{display: none;}.clearfix {…}.text-displacement {…}
  24. 24. Category Rules:Base Category• Base Rules - are applied to element selectors (h1, a, p) ,descendent selectors ( h1 em), or a child selector ( ul >li) but doesn’t not include classes or IDs• Browser reset - The base stylesheet can optionally include abrowser reset framework. Browser reset stylesheets overridethe user agent default styles with definitions that makeelements appearance consistent across the different browsers.• Normalize CSS - Good for fluid layouts• Eric Meyer’s Reset - Good for fixed layouts• RYO - Chances are you’re probably going to modify the framework, why notjust roll-your-own• None - Take what the browser gives you and embrace it ...You just saved timeand effort but your designer will hate you
  25. 25. Category Rules:Theme Category• The theme category contains styles for the applicationslook• These styles can override default browser styles and/orreset stylesheets• We group similar theme objects into subcategories;• Buttons• Forms• Typography• Images
  26. 26. Category Rules:Modules Category• Modules sit inside layout components and add semanticsand specificity to elements• When defining the rule set for a module, avoid using IDsand element selectors, sticking only to class names• Styling elements by class name only mitigates the risk ofhaving to re-write CSS as the file grows in size.
  27. 27. Category Rules:Module Category [Ex.]<div class="module-name"><div class="module-name-inner"><div class="module-name-header">head</div><div class="module-name-body">body</div><div class="module-name-footer">foot</div></div></div>.module-name {…}.module-name-inner {…}.module-name-header {…}.module-name-body {…}.module-name-footer {…}
  28. 28. Putting It All Together<div class=“row”><div class=“span4”><div class=”post"><div class=”post-inner"><div class=”post-header"><h2 class=“color-primary”>Title</h2></div><div class="post-body"><p>Lorem ipsum</p></div><div class="post-footer"><a href=“#” class=“button button-success button-large”>More</a></div></div></div></div></div>Layout Objects | Module Objects | Module Subclass Objects | Base Objects | Theme Objects
  29. 29. What’s Next?• Preprocessors further enhance CSS by adding things likenested rules, variables, mixins and selector inheritance• SASS and LESS are currently the two most popularpreprocessors• We’ll talk about these next time!
  30. 30. Resources••••••••••••