CSS ArchitectureImplementing OOCSS Methodologies

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

Introduction

“To maintain UI consistency and minimize development effort on typical interface components, those components

have to be easily reusable.” - BEM Methodology

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.

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

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

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

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

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>

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

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>

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=”#” />

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!

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

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

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 */

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)

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;}

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

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; }

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”>

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

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 {…}

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

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

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.

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 {…}

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

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!

Resources

• http://smacss.com/• http://www.stubbornella.org/content/category/general/geek/css/oocss-css-gee

k-general/• http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-a

pproach/• http://sass-lang.com/• http://bem.info/method/• https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redire

ctlocale=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-method

ology-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/