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.

1. CSS Architecture
Implementing OOCSS Methodologies

2. Introduction
• A common problem with CSS is that while it grows in
size and scale it often becomes difficult to maintain
• Common problems; Duplication, disorganization and a
lot of extra work for the browser (parsing, re-paint, re-
layout) …Slow for the user!
• Work smarter and not harder, continually look for better
ways to organize code
• Discuss a relatively new approach to writing better CSS

3. Introduction
“To maintain UI consistency and minimize development
effort on typical interface components, those components
have to be easily reusable.” - BEM Methodology

4. What is OOCSS?
• The term OOCSS was first presented by front-end developer Nicole
Sullivan as an approach for writing CSS that’s predictable, fast and
maintainable.
• The purpose of OOCSS is to encourage code reuse and avoid
duplication
• In OOCSS, the CSS “object” is simply a repeating visual pattern
and typically consists of four things; CSS, HTML, JavaScript and
images
• Is it really object oriented programming? Simple answer, no.

5. What is OOCSS?
“What OOCSS asks us to do is spend more time upfront
thinking about what will be common across different
elements and then abstract those commonalities out into
reusable modules.” - Steven Bradley Glicksman

6. Two Principles of OOCSS
• Separate Content From Container - The content’s
container should be styled independently from the
content. A container or content should look the same no
matter where you put them ...Styles should not be
location-dependent.
• Separate Structure From Skin - The layout components
should be styled independently from the design (theme).

7. OOCSS Methodologies
• There are currently three popular methodologies for
implementing OOCSS;
• The OOCSS Framework
• SMACSS
• DRY CSS
• My implementation, called Structured CSS
• While these methodologies share many similarities, the
philosophy behind implementation in dramatically
different

8. OOCSS Methodologies:
OOCSS Framework
• Nicole Sullivan has created a Git hosted project that
includes a HTML,CSS and JavaScript framework based
on OOCSS best practices
• Several guidelines that should be followed for creating
objects, modules and extending objects

9. OOCSS Framework:
Module Objects
• The OOCSS framework suggest creating objects called
modules
• Modules describe a generic content block and are composed of
a wrapper, inner wrapper and often times a header, body and
footer wrapper.
• The purpose of the module is to abstract the style of an
element 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. OOCSS Framework:
Media Object
• One specific type of module described in the OOCSS
framework is the Media Object
• The media object provides structure for a group of related
elements
• Media object examples

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. OOCSS Framework:
Extending Objects
• Often times you will have objects that are very similar but
need some small modifications
• Objects can be extended to contain more properties by
creating 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. OOCSS Methodologies:
SMACSS
• SMACSS, as defined by it’s author, is an attempt to document
a consistent approach to site development when using CSS
• At it’s core, SMACSS is guideline to use for categorizing and
naming 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 of
some random fie)
• There’s even a book!

14. SMACSS :
Categorizing Rules
• Base - Base rules define default styling are applied to an
element using an element or descendent selector but doesn’t
not include class or ID selectors.
• Layout - The purpose of layout rules are to abstract the style
definitions for the site structure
• Module - Modules sit inside layout components and should be
designed to exist as a standalone component
• State – Definitions that provide style for an alternate state of
an element (e.g. hidden or expanded)
• Theme – Defines things like colors and images that give your
application or site its look

15. SMACSS:
Naming Rules
• Using classes to name your objects and their components
• SMACSS suggests using a prefix to differentiate between
the different categories
• The class should describe the object

16. SMACSS:
Subclassing Rules
• Subclasses are classes that extend the original objects
properties
• This is very similar to how the OOCSS framework
suggests extending objects
.button /* defaults */
.button-small /* controls size */
.button-success /* controls color */
.button-disabled /* custom state */
.button-small .button-success /* Multiple */

17. OOCSS Methodologies:
DRYCSS
• DRYCSS is a methodology for creating efficient, unified
and scalable stylesheets, that avoid duplication
• The principles of DRYCSS are never repeat a
style/property definition (if you can avoid it) and to
group selectors with shared properties
• Styles that can be completely decoupled from the HTML
(you do not have to add classes to the HTML)

18. DRYCSS: Rules
• In DRYCSS, selectors that share properties are grouped
together
• 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 top
of 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. OOCSS Methodologies:
Structured CSS
• My own interpretation of implementing OOCSS
methodologies
• It’s a combination of techniques to compose stylesheets
that are predictable, scalable, modular and maintainable
• This technique also embraces the idea of writing classes
that are extensible and reusable
• The method is heavily influenced by SMACSS

20. Structured CSS:
Naming Rules
• Create semantic selectors but avoid being too specific and
avoid shorthand (such as abbreviations) for selector names
• Use classes instead of ID’s, we want to avoid deep levels of
specificity
• ID’s ok for something that you know will on be used once on a
page (header/footer) but I generally avoid them
• Bad
.bg-orange-important-txt-rcol { color: orange; size:24px; }
• Good
.text-primary { color: orange; size:24px; }

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. 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 a
change

23. Category Rules:
Layout Category
• Grid System - Grid systems provide a consistent and predictable
system for placing objects. They define and control the structure of
the website ...Twitter’s Bootstrap is a great example
• Grid System Media Queries - CSS media queries allows us to adapt
our content to multiple screen resolutions
• Layout Helpers - Layout helpers are special classes that assist the
grid framework by abstracting vertical spacing and display properties
into their own category
.buffer-top-large {margin-top: 20px;}
.spacer-large {display: block; height: 20px;}
.display-hidden{display: none;}
.clearfix {…}
.text-displacement {…}

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 a
browser reset framework. Browser reset stylesheets override
the user agent default styles with definitions that make
elements 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 not
just roll-your-own
• None - Take what the browser gives you and embrace it ...You just saved time
and effort but your designer will hate you

25. Category Rules:
Theme Category
• The theme category contains styles for the applications
look
• These styles can override default browser styles and/or
reset stylesheets
• We group similar theme objects into subcategories;
• Buttons
• Forms
• Typography
• Images

26. Category Rules:
Modules Category
• Modules sit inside layout components and add semantics
and specificity to elements
• When defining the rule set for a module, avoid using IDs
and element selectors, sticking only to class names
• Styling elements by class name only mitigates the risk of
having to re-write CSS as the file grows in size.

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. 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. What’s Next?
• Preprocessors further enhance CSS by adding things like
nested rules, variables, mixins and selector inheritance
• SASS and LESS are currently the two most popular
preprocessors
• We’ll talk about these next time!

30. Resources
• http://smacss.com/
• http://www.stubbornella.org/content/category/general/geek/css/oocss-css-geek-general/
• http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
• http://sass-lang.com/
• http://bem.info/method/
• https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-
US&redirectslug=Writing_Efficient_CSS
• http://www.vanseodesign.com/css/object-oriented-css/
• http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/
• http://viget.com/inspire/css-squareoff
• http://www.slideshare.net/jeremyclarke/dry-css-a-dontrepeatyourself-methodology-for-
creating-efficient-unified-and-scalable-stylesheets
• http://cwebbdesign.tumblr.com/post/23666803241/scalable-and-maintainable-css-
approaches
• http://engineering.appfolio.com/2012/11/16/css-architecture/