There is a bit of controversy about the nature of calling it “Object Oriented” and the specific usage benefits of the techniques. This article will delve into what it is, how it can be used and link to different resources on the web for you to learn more as these concepts are in their fledgling stages. Don’t blame me for what it’s called. I just found it interesting and somewhat useful and wanted to share.

What are the principles behind “Object Oriented” programming?

I’m going to spare you the geek-speak and tell you straight up — it’s basically programming blocks of code that you can use over again.

Those blocks of code are often called “objects” in other programming languages and with HTML/CSS they are often referred to as “modules“. So for our purposes, OOCSS is basically a flexible HTML structure that you can apply sets of efficient and flexible CSS to.

The Dirty Secret of OOCSS

For those of you who live and die CSS — you already know… We already do this! It’s the nature of the cascade. Consider this example:

So we already know of some OOCSS because they are basically best practice CSS techniques that have become more or less common place.

Advanced CSS Techniques First Please

Be Classy

ID selectors are meant for single use and Class selectors are meant for multiple use. So make sure you’re not using ID selectors for repeating styles as using Class selectors give you flexibility and of course re-usability.

No Twins Allowed

Nicole Sullivan points out that if you have styles that are very similar they should be the same. Learn to design efficiently because OOCSS will do you no good if you’re essentially re-creating the same modules (but slightly different) over and over again. (The size of the text in the diagram is slightly different.)

Seperate Stucture (HTML) and Skin (CSS)

Properties like height and width are hard to use repeatedly (in respect to modules) so it’s best to use CSS as intended and leave structure to be determined by content and “learn to love grids” (to quote OOCSS royalty; Nicole Sullivan).

Can We Get To The OOCSS Yet?

As Nicole Sullivan says — treat the modules like site-wide legos and start to build a component library that your modules will be composed of. First you define the defaults and then you start building classes that build upon the cascade.

Define Defaults

Start off with the defaults that you can then alter with a class. For instance, setting the size and font via the default and then use classes to become more and more specific with color, style and etc.

So you may have an instance where you have a h1 with a classes of h3. Honestly, this doesn’t feel great to me but I have come across having to define headers over and over again. So although this feels wrong, I’m not knocking it untlI try it.

Build On The Defaults With Classes

Avoid styling elements and localized ID selectors and try styling classes instead.

Use The Force,Cascade Luke

For the class components to work, they need to be the same strength so the cascade will overide the previous rule. So that means you can’t have some classes deprecated and expect all your CSS components to work in the way OOCSS was meant for.

Localizing is Evil in OOCSS

There are instances where you can get a little local on websites such as the masthead logo. However, you don’t want to paint yourself into a corner by localizing because when you re-use a class it won’t make sense semantically. Being semantic is a best practice that goes along with OOCSS as it will hopefully be easier to share with co-workers and train n00bs.

Over Specyfying Is Evil Too

The whole point of OOCSS is to make things efficient. If you over-specify, then I daresay you’re repeating yourself and although semantically correct… this is code bloat. If you continue down this path, it will only continue to grow.

Avoid Code Sequels

As you can see from Nicole Sullivan’s slide — rather than duplicating a class, just extend it for maximum efficiency.

The Bigger The Website Audience, The More Rewarding

Let’s be honest. Localizing is not evil for everybody but it certainly becomes more difficult to work with and is more conducive for code bloat as the website grows. It’s up to you on whether or not these OOCSS techniques are useful or not, so please I implore you to explore and help the CSS community form an opinion on some of these new ideas. Here are some links I used to bone up on the subject and believe me, there are more tasty nuggets in these resources that may be helpful to you that I may not have covered.

Nicole Sullivan is the OOCSS project queen over at Guthub:
Object Oriented CSS, Grids on Github

Nicole Sullivan Kickin’ It at Yahoo!
Object Oriented CSS video on YDN

Nicole Sullivan’s Often Referenced OOCSS Slide Presentation
SlideShare.net: Object Oriented CSS

Net Tuts did a Tutorial. Although a cool “tut” by Andrew Burgess, he uses HTML5/CSS3 in his examples which confuses the subject.
Object-Oriented CSS: What, How, and Why

Let me know if I missed anything!

The History

Patrick Griffiths and Dan Webb are credited with coming up with a simple CSS and javascript-based dropdown menu that was originally published on ALA. With the influence of ALA over the years, the popularity of the Suckerfish menu technique has grown in popularity and the basic concept of their technique — using the pseudo :hover class as the trigger — drives many a dropdown across the interwebz.

With the now outdated IE6 slowly being taken out to pasture, modern browsers are even more optimized to use Suckerfish-style menus. IE6 for those of you who forgot — did not support the pseudo :hover class and that’s why the simple javascript is necessary at all. It triggers the dropdown action for that browser. While most of us still try to support IE6, it’s no longer a top-priority as it once was.

Patrick Griffiths and Dan Webb have updated this landmark menu technique since the original and called it the “Son of Suckerfish Dropdowns” on their now defunct HTML Dog website. They’ve expanded the functionality to include multiple levels and reduce the javascript as well as other compatibility enhancements.

Visit Patrick Griffiths and Dan Webb’s “Son of Suckerfish Dropdowns” @ HTML Dog.

See an example from HTML Dog.

Why Suckerfish Dropdowns?

It’s Lightweight and Easy To Use
Using this technique requires using three web languages. HTML, CSS and Javascript. The HTML and CSS portions are already necessary if you plan to have a menu of any kind and the javascript is there for IE6 and even then it’s just few lines of code supplied to you that you don’t have to edit. For those of you who have searched around for dropdown menus, you’ll know it’s really tough to find a simple solution that works on a standards compliant browser AND the IE6s of the world. There is always a caveat… intense javascript based on conditions, tables, intense CSS and etc.

It’s Standards Compliant & Accessible
The dropdown menu structure is marked up as a regular ol’ HTML list. It’s styled by CSS. The javascript can be used in conjunction with the CDATA tag and hence be seen as character data and pass validation.

It’s Popular and Well Supported by the Community
Every implementation of the technique will be unique and without a doubt — you’ll have a bug. The great thing about Suckerfish dropdowns is that it’s now pretty mature and well adopted by the community. Issues have been documented and supported and many work-arounds and fixes are already available online a google search away.

I had the common Suckerfish :focus problem where parts of the menu would remain visible or “sticky” depending on how the :focus was triggered on IE7. I looked around and found a simple fix here and voila, problem solved!

So although you may not have the same problem, you can be sure you’ll probably have better luck finding help for Suckerfish dropdowns over the other techniques.

It’s Versatile
I’ve been using it as a vertical menu for the most part but it works the same way with some tweaks as a horizontal menu as well.

Also, why does it have to be a menu? Use the basic concept to hide and then open up a content box using the :hover class to trigger it. For instance, a Trivia Question box and they roll over a button to display the answer. The possibilities are endless!

Six More Years of Suckerfish?
With the new features in CSS3 and HTML 5, I can’t wait to see what type of new progressive enhancement we’ll be seeing in years to come. Rounded corners, transparency, border-types, embedded media… all being used in imaginative ways with the basic Suckerfish techniques is a wonderful thing.

In the future when IE6 is nothing but a bad nightmare buried deep in our past, we won’t need the javascript portion of the technique making it even more easy to develop for. I prefer to use Suckerfish based menu techniques in general because of the reasons outlined above and I hope you consider in making your choice next time you do the dropdown dance!

Did I Miss Anything? Correct me or add to the conversation in the comments!

We’re also going to go over some of the differences between more common selectors just so you know you’re efficiently implementing your code.

COMMONLY USED SELECTORS (like squirrels)

UNIVERSAL SELECTOR:

* {color:blue;}
This is applied to all elements unless it has a explicit selector already applied. The most common usage is probably those who are using it to reset values or apply universal values (duh!). For a quick fix — it might come in handy if you were doing a website demo and wanted to adjust all the font-sizes in your website by adding a font-size: 125% temporarily for the people in the back to see better.

TYPE SELECTOR:

body {background-color:blue;}
This is applied to to all matching elements. Whether it be a default or a custom Class or ID selector (see next), the match is found and the style is applied.

CUSTOM CLASS & ID SELECTORS:

.emergency {color:blue;}
#wrapper {background-color: blue;}

These are custom selectors that are formed by either using the dot notation or the hash mark preceding the name. The usage of these are basically Class for multiple instances and ID for single instances. You can target elements by directly adding them preceding the dot or hash marks.

p.sidebar {color:blue;}
p#content {color:blue;}


DESCENDANT SELECTOR:

body p {color:blue;}
This is applied to to all descended elements of another selector. So that means all children, grandchildren, great-grandchildren will have the style applied to them.

CHILD SELECTOR:

ul > li {color:blue;}
This is applied to only the children of the parent selector. This means you can target a specific depth of the element rather than have styles applied to the entire ancestry.

LESS COMMONLY USED SELECTORS (like red pandas)

ADJACENT SIBLING SELECTOR:

h2 + p {color:blue;}
This is applied to the adjacent sibling of another element. In other words, you might want to target an element that you know immediately follows another. For instance, in the middle of your web page content you have a text call-out with a h2 header. You can have all the instances of a p be styled differently to indicate that it’s a call-out with a background value. Also, this only applies to elements — so text in between the elements will be ignored. (This only works according to HTML document tree). See Eric Meyer’s Website for more on this…

SIMPLE ATTRIBUTE SELECTOR:

a[class] {color:blue}
This is applied to any element with a matching attribute. For instance, you want to apply a style on every link on the page with a class associated with it, even though they belong to different classes.

RARELY SEEN SELECTORS (like unicorns)

EXACT ATTRIBUTE SELECTOR:

a[rel="next"] {color:blue}
This is applied to only elements with the exact matching attribute. This could be useful if you’re trying to style specific attributes or even if you’re trying to style a group of obscure attributes like a set of rel and rev links. (They’re obscure to me because I don’t often use them! ha!)

PARTIAL ATTRIBUTE SELECTOR:

a[rel~="party"] {color:blue}
This can be applied to elements with space separated values. For instance it would work for class=”party” and class=”party august” but not class=”party-time”. So you can see it would be useful if you used these selectors to group a set of targets together by naming them a certain way.

BEGINNING SUBSTRING SELECTOR:

a[href^="/party"] {color:blue}
You can apply this selector to grab a element based on the beginning substring. This is useful if you want to style a set of elements that are grouped in a certain way like the beginning of a url for instance.

ENDING SUBSTRING SELECTOR:

a[href$="/document.pdf"] {color:blue}
You can apply this selector to grab a element based on the ending substring. This is a showstopper for sure! I think it’s good usability to alert users what type of file they are clicking on and this is a great way to consistently label files for your users visually (you still might want to include the file name or file type in the text but this helps them scan).

ARBITRARY SUBSTRING SELECTOR:

a[href*="typesett.com"] {color:blue}
You can apply this selector to grab a element based on any substring in the attribute. If you can find a pattern with an occurring substring on your page, you can exploit it to target only those same substrings.

LANGUAGE SUBSTRING SELECTOR:

body[lang|="en"] {color:blue}
This is used for selecting elements with a lang attribute. This is useful for differentiating content in different languages.

I’ve actually known this to be the “match or starts with” selector. Some people use it like this:
img[src|="party"] {border-color:blue}
and what it would do is find party.jpg or party56.jpg but not august/party.jpg.

Props to Jake Vance for the image!

Comment If You Have Anything To Add Or Correct!

Other Articles You Might Like:

CSS Rehab – 3 Step Program To Getting Clean
5 Innovative CSS Techniques You Should Know About

[Just to be clear, I know some form of probably all these techniques may have existed for awhile but I feel these five choices can still be used/improved upon by us developers and/or not fully adapted yet even though they are known by many to be productive. A bump and a nod, if you will.]

1. Perfect Full Page Background Image

by Chris Coyer of CSS Tricks

For a project I worked on in the past, I tried to implement a full page background image via CSS and it is much more difficult than you’d expect. First of all you’re dealing with the scaling issue (because we don’t want white space) and then you have the proportions to worry about and then on top of all that you have to deal with the scroll bars and browser compatibility issues.

Thankfully, Chris Coyer takes you through two techniques (albeit only one technique truly fulfills all the requirements above).

http://css-tricks.com/perfect-full-page-background-image/

2. CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea of A List Apart

If your “images” folder is about to burst because of the sheer quantity and complexity of its contents, we have a winner for you! CSS sprites are basically a grid of images in a single image file that you position and re-position as necessary. You do this to help your production efficiency as you only need to maintain a single file. This technique is an absolute godsend for navigation links states effects.

ALA all-star, Dave Shea outlined these techniques as far back as 2004 and re-visited the subject in 2008.

http://www.alistapart.com/articles/sprites/
http://www.alistapart.com/articles/sprites2/

3. How To Recreate Silverback’s Parallax Effect

By Paul Annett of Think Vitamin

I first saw Jeremy Keith show off the Silverback website at An Event Apart in San francisco last year (2008) and was blown away. Not so much because of how exciting it looked but more because of its elegant coolness factor. The parallax effect can basically be described as multiple background images set at individual visual levels to acheive a nice movement effect when the user changes the browser window size.

British developper, Paul Annett is responsible for the original implementation of this technique for Clearleft (who makes Silverback) and gives us a rundown of how he implemented it for them.

http://carsonified.com/blog/design/how-to-recreate-silverbacks-parallax-effect/

Other ways to accomplish this technique:
http://forthelose.org/examples-of-and-how-to-do-the-css-parallax-effect
http://webdev.stephband.info/parallax.html

4. CSS: Add a “Loading” Icon To Your Larger Images

by DynamiX Labs

The tricky thing about dealing with large images (or multitudes of images that hog bandwidth) is that during loading it can really mess with your layout and confuse your viewers until the image loads. In other words – a bad first impression with your audience. To remedy this, use a preload image so that they know something is coming and they won’t be alarmed that the page is broken.

DynamiX Labs has a nice solution that is multi-browser compatible and requires no javascript.

http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/

5. Create a Lightbox Effect Only With CSS – no javascript needed (except to close the windows)

by Emanuele Feronato

I am an advocate of Lightbox, Greybox and the other jQuery options to achieve the pop-up effects for opening new windows within a webpage. As they mature, the options for them become more and more impressive. However, sometimes all you need is a simple lightweight option that gets the job done for you without a whole lot of fuss. That’s the beauty of this mostly CSS solution (rudimentary javascript is used to close the window).

For a landing page project that I worked on that had a shelf-life of about a month, I decided to use this technique for a registration form and it worked out great. it was easy and fast to implement and had I appreciated the tiny footprint.

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

You may also find these articles useful:

3 Fresh Web Design Ideas
CSS Rehab – 3 Step Program To Getting Clean
Why I Love Expression Engine (CMS)

Did I Miss Something?! Let me know in comments!

I eventually added CSS to slowly wick away the pain of tables by using simple global CSS selectors (i.e. body, link, img and etc.). At that time, I would say that’s what most people did. It was still very difficult for pure CSS based layouts because the browser situation was still awkward.* Internet Explorer was at it’s prime and Firefox was not as popular and easy an alternative as it is now.

[*This is from my experience, as I remember specifically working on a client project in 2003-2004 how hard it was to follow tutorials as every one had so many browser caveats. I'm sure my inexperience contributed to the difficult as well.]

Needless to say, my HTML/CSS was a mess even after I started using CSS the way it is supposed to around 2006-2007. This is the time frame I’d say Firefox really started getting traction and soon after IE7 came out in 2007 making everybody’s life so much easier. The main problem was that even though I used CSS, the actual implementation was kind of jagged. As a designer/developer — it’s important to be clean, simple and elegant (as Jamie from Myth Busters likes to phrase technically challenging concepts implemented efficiently) as it helps to debug, transfer, share, update, teach and perform best practice techniques.

Even now, I can do better but here are 3 techniques I practice religiously that have really benefited me after adapting them into my routine.

STEP 1: RESET – Let’s Code on a Level Programming Field

Since Eric Meyer made resetting browsers popular with his influence/community in 07′— it started to build in popularity quite rapidly. As soon as I started using it, I immediately thought to myself how great it was as many problems started fading away very quickly. Sure, we all used mini resets like setting margins and padding to “0″ in the html or body selectors but completely eviscerating all browser defaults is a wonder you have to experience yourself.

If you take nothing away from this article — make sure you start using CSS resets. It’s been one of the biggest difference makers in reducing day-to-day CSS headaches (especially between browsers). Eric Meyer is generally accepted as a CSS authority and his style sheet is generally accepted as the best:

From: http://meyerweb.com/eric/tools/css/reset/index.html

[Link updated: 7.8.09]


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


The way I use this is by linking to it as a separate external style sheet as the first cascade.

STEP 2: FRAMEWORK – No Need to Re-Invent The Wheel

I initially did not flock to CSS Frameworks but have personally experienced the benefits from using them these last few years. CSS is pretty simple once you gain experience using it, so going through the trouble of using a “bloated” framework seems like BS to some developers. This is especially true for those Jedi web developers who have made dozens and dozens of websites through the years and have developed their own way of doing things.

There are plenty to choose from, the two I am most familiar with is Blueprint and a pseudo framework called 960 Grid System (GS) that predominantly focuses on standardizing grid layouts. Once I started using 960 GS, I never stopped. The main reason behind that is because it takes away arbitrary decisions that change from website to website.

For example — what size should the sidebar be from website to website? In the past, it could range from 251px to 327px. Yes, circumstances may require you to make the sidebar exactly 243px wide but if you design it with the grid in mind in the first place — you can avoid these awkward numbers. That can become difficult to manage as you work on several new websites during the course of a day and even more if you do work updating old ones. 960 GS logically gives you several options to design from and as you implement the framework — it’s consistent and makes sense no matter what website you work on.

The way that all the frameworks work is that they supply you with basically a template — but a bare template that’s flexible and versatile enough that web professionals will not reject it for lack of adaptability and can use it for any conceivable future project. Blueprint unlike 960 GS goes much further and offers all the selectors but IMO, it starts to get bloated. However, that’s the beauty of CSS frameworks — you can choose the one that makes sense to you. There probably is a Goldilocks framework out there waiting for you.

Here’s a list of some of the most popular for you to explore:
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/en/

w3avenue and SpeckyBoy have explored more of the frameworks more in-depth:
http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Jeff Croft waxes poetic about this subject over at A List Apart
http://www.alistapart.com/articles/frameworksfordesigners

I actually saw Eric Meyer speak about CSS frameworks at An Event Apart SF 08 and the conclusion he left us with is that each one has good and bad points but most stress standards compliant code and organization… so using them certainly can’t hurt.

STEP 3: ORGANIZING – It Works For Your Socks, Why Not Your Code?

[NOTE: Step 3 is hard. It's a bit nit-picky but hey — we're all trying to get better right?! I know I need to follow my own advice better at times!]

You’ve heard this before and like me — you’re too busy writing the code to fuss with it too much. That’s the reality but there are clear benefits as well. CSS = Cascading Style Sheets. Organization is inherently built into the functionality of the language! We should be striving to be clean and easy, and here’s a few quick tips that any of us can start doing right away without much fuss:

Selector Grouping

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is the same as:

h1, h2, h3 { font-family: sans-serif }

and a real world example of the space you’d be saving is:

h1, h2, h3 { font-family: sans-serif }
h1 {2.5 em}
h2 {2 em; color#000000;}
h3 {2 em; color#333333;}

Reducing some of the redundancy will really help make your CSS be more efficient and save you time as well!

Default Selectors First

Define the values of these at the top of the document and keep them there. I’ve seen some style sheets where they group similar selectors together with the assigned selectors such as putting form selectors with the rest of the structure and styling of the form. It makes some sense but it’s bad practice because it’s hard to locate later on and especially frowned upon if you work with a team.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td

This actually happened to me… a co-worker a few years back told me I should stop sprinkling my selectors everywhere. He had to use the Find tool all the time to figure out what the hell I was doing. Don’t annoy your co-workers like me!

Alphabetizing Selector Values

Yep. It’s as simple as that and yet it’s so hard to do.

h1 {
background-color: #000000;
color: #ffffff;
font-family: sans-serif;
padding: 20px;
}

I read about some developers doing it but I always opted for grouping similar/popular values together. Such as width and height, padding and margin and etc. The reason why I’ve come over to this way of thinking is because I realized when I deliver code to a client’s IT team — it makes sense to them that it’s alphabetical since they don’t work with me and don’t know my quirks. In other words, my arbitrary grouping of selectors means nothing to other people. Alphabetical makes sense since it’s a simple and functional way to organize.

In Conclusion…

The reasons why you should strive for clean CSS is to code faster, be efficient and to not annoy your co-workers and clients.

• 1. RESET!
• 2. Use a Framework!
• 3. Organize within your code!

Thanks Darwin for the photo!

Helpful? Comment!

Security — Sad.

Internet Explorer 6’s golden age, around 2002 and 2003 where it captured about 95% of the browser market unfortunately led to it being the main target of hackers, spy ware, phishing rings and nefarious scammers across the globe. Active X and Active scripting really just opened the door for these vile bastards and I think Microsoft products can be directly credited for phrases like “identity theft”.

Standards — Pathetic.

The very people slaving away each day making web pages for your browser are the same ones that curse your name! From the noted lack of support for CSS, PNG files and sufficient debugging tools — is this any way for the leader of the market to act? We had to wait for late 2006 until IE7 to come out and even that wasn’t enough! We’ve been suffering since 2001 for God sakes (and still am *cough*cough*)!

Crashing — Unforgivable.

If you can’t stand the heat stay out of the kitchen! Unfortunately, IE6 runs out of the kitchen hides under the bed. Because of all the security fixes that came out one after another, the browser was often left kind of unstable. The reasons it crashed ranged from new security fixes, innovative CSS, Flash and Shockwave rendering and just not being able to handle multiple windows. Considering IE7 in 2006 was the first to get tabbed browsing, we’d have liked our primary content delivery system to the masses be more stable for the users we develop for.

Don’t let the door hit your ass on the way out — farewell, IE6.

Finish this sentence for me in the Comments: IE6 makes me want to _________!*

Expletives allowed. Go to town!