The idea is fairly simple – write your CSS using a “bottom up” approach, as opposed to a “top down” approach, treating your elements as “objects”, using mainly classes, as opposed to IDs. The idea of this is to make classes more reusable and to encourage a greater css granularity architecture. The overall theory behind OOCSS is something I don’t dispute in the least, if anything it’s simply good practice when writing a CSS file.

For me, the whole article borders on the pedantic to the outright pretentious.

Firstly, I’m not a fan of the name. “OOCSS” implies a link to OOP (Object Orientated Programming), which it is not. I can see why they’ve named it OOCSS as I guess multiple classes could be similar to inheritance, an element on your page as an “object”, classes imply reusability etc. As a web developer, who uses OOP I was instantly put on the defensive, thinking “OOP for CSS, wtf”. I understand the name is simply a paradigm, but it sends out all the wrong signals for me personally.

Apologies if this article turns into a bit of a rant…..

Descendant CSS Selectors

OOCSS seems to have a odd rule whereby descendant CSS selectors (E>g. .foo h4) are suddenly not allowed. Instead, to adhere to OOCSS principals you need to split the this into two separate classes and apply both classes within your HTML code:

<div class="button-basic button-skin"></div>

Both methods – using a descendant selector and two classes – are perfectly valid for me.

CSS Class Abstraction

One of the ideas that I don’t agree with the fact that the article and whole concept implies that more class abstraction is good. People still learning could read into this idea the wrong way and (worse case scenario) end up with a plethora of abstract classes that produces some awful HTML:

<div class="padding center-element block text-italic floated-right"></div>

I won’t go into the debate about speed of selectors either, as the article is little one sided here. Giving preference the use of classes over IDs is not a good way to go in my opinion.

OOCSS Performance Benefits

Another major selling point of OOCSS is that of site speed – which is of huge concern to web developers nowadays after recent Google changes, citing page speed as ranking factor. This part of the article is null and void for me as it’s so obvious. Small style sheets will result in smaller css files that download faster – that’s pretty obvious. Although after the CSS file has been gzipped there wouldn’t be a great deal of real world benefit. Saying all that however, OOCSS is something the majority of good developers do anyway ….

OOCSS – Already Used …

For me, OOCSS is an acronym someone has given to a technique they have suddenly realised they use, after comparing it to OOP – a fancy name if you like. It’s an acronym I imagine will be very common on CVs.

After reading the article I wondered why it existed in the first place. OOCSS is something any designer/developer worth their salts does by default after a longer enough period of time. One of the biggest sayings when relating to good CSS is “don’t use ID selectors for everything”. It doesn’t make a great deal of sense when you’re learning, but as time goes on you’ll realise that some commonly used IDs could just as well be a class – whallah, you have yourself the beginning of OOCSS. For instance, in pretty much all my projects I have a class called input-wide that one applied to an input field, makes it longer.

Hell, when I was first learning CSS years ago and ran my (awful, naff) sites through the W3C CSS Validator popped up a warning mentioning redundant CSS that could be better served using a class instead of ID – I never heard one mention of OOCSS then either.

To conclude, I’m not against OOCSS per se, I’m against the way it’s been described in the article as something new and revolutionary. In reality, everyone uses it, unknowingly as it’s simply a collection of best practices. The article would have a made a lot more sense if it was titled something along the lines of “CSS Best Practices”, as that’s simply what it describes, nothing more or less.

For me this whole area complicates CSS. Personally, I’ll keep using LESS for rapid development of layouts on multiple devices and as a starting point for my CSS – which is just what I believe a CSS Framework should be – a starting point, not a long list of “do’s and dont’s”

I’m sure some people will totally disagree with me on this whole topic, so I apologise in advance. At the end of the day it’s a hugely subjective topic

The latter is not a new idea by any means, but is generally considored to be a positive practice to implement on any site.

SOC and Ecommerce

The effect is compounded on ecommerce sites – sites that usually have a heavy template footprint. For example, a typical ecommerce site may contain a category listing with child categories in the form of a “mega drop down menu”, as they seem to to be coined. This is fine, as such menus do contain a lot of good keyword rich material that will be relevant to your site.

However, I have recently been experimenting a little on an ecommerce site I regularly perform SEO on, that does have a fairly beefy drop down menu. I have been focusing on product pages – I like to think of these as your most important pages and pages you’d want people to land on, as it tends to help conversions. In my eyes, any white hat technique to give greater weight and meaning to such pages is a good thing.

For the site in question I edited the source to force the top menu to the very bottom of the page and used absolute positioniong to force the top menu to the top of the screen for the user, when the page is rendered. I performed a similar action for the product description. As a result the important content i.e. the product title and description are now very close to the top of the page within the HTML.

Further Product Page Optimisations for SEO

Additionally I made a couple of other minor optimisations that I’ve noticed some bigger sites are using. At the top of the site in question, there is a company logo – a link, styled with a background using css. For the product page I amended this to a h1 tag with the product title within the header tag. I then used text-indent to hide this. Further down the page, I replaced the old header one tag (was further down the page previously, next to the product description) with a h2 tag and placed the product strapline within a h3 tag. So, the HTML for my company logo, for a product page is as follows:

<h1>
<a href="/product-url.html">My Product Name Here</a>
</h1>

I’ve been runing the above for a month now and have noticed the following trends in Google Analytics – I can’t be 100% sure this is directly down to the above though:

• Increased traffic to product detail pages from Google
• 1.2% increase in sales conversions

Over the next month I’ll be experimenting with replacing the logo with the category name, on my category listing pages too. I’ll update this post with my findings.

Have you had any similar experiences using the above, or similar?

• the client must be able to upload their own banner images
• the banner image was not square and had a transparfent mask around over it (in Photoshop, the banner image was underneath a clipping mask)
• The design must function in a range of legacy browsers

This presented a major headache. Usually uplaoding a totally square image is easy – a client can do this with ease themselves. However, the client in question has no experience using using Photoshop (and why should they to update their website?) and wouldn’t be able to upload a masked image. Additionally, using some of the new CSS3 image masking properties are out, as I need to support IE6 and above.

So, the solution here is to use a transparent image to overlay the square image – meaning a client can upload a square image and have it show masked on the live website – see the final result of what we’ll be making.

The HTML is quite simple:

<div id="banner_outer">

    <div id="banner">
        <div class="frame_top"></div>
        <div class="frame_bottom"></div>
        <img src="images/banners/splat.jpg" alt="splat" />
    </div>

</div>

Here, we have a simple wrapping divider to center the banner – “banner_outer” and a second divider to hold the banner – “banner”. There are also two dviders that are absolutely positioned, using a css sprites for the background images. The image is a 24 Bit PNG image – as this gives the smoothest effect for the frame and the underlying images could be photographs.

Remove the two frame dividers you’ll get a a simple box with a square image. However, when you add the two frame dividers you’ll see the image is show framed (one frame at the top, one at the bottom), exactly how an image clip would work in Photoshop. The CSS is very simple, but there is one key here to make your life easier and to ensure cross browser compatibility.

Positioning for Child and Parent Elements

Postion the parent divider to the two frames relatively. Why do this? Well a DOM element positioned relatively, gives you full control of the child DOM elements inside it, using absolute positioning – this was definately one of those ‘a-ha!’ moments for me where everything became clear.

In essence, the latter stops child elements positioned absolutely, from positioning themselves in relation to the body. To see the effect in action, view the demo and use Firebug to disable the ‘position: relative’ on the #banner element – the two frames are positioned absolutely according to the body element and not the #banner element as we want. You could ignore the position relative for the parent item, position the frame divs abolsutely and use margins to move them about – -this will work but you’ll run into issues in IE. I’d highly abvise you stick to the position relative method, as described above.

The frame I’ve chosen is a very subtle curve, but you could use any type of shape the mask the image.

A Note on IE6

As I’m sure many of you have already rightly realised – IE6 does not support transparent PNGs. This is really the only downside to this css based image masking technique. There are an absolute plethora of hacks for this, but I’ll be using the belated IE6 PNG Fix – which adds PNG support to IE6 and below. All that is required is the the following is added the head tag:

<!--[if lt IE 7]>
    <script src="js/IE_PNG.js" type="text/javascript"></script>
    <script>DD_belatedPNG.fix('div');</script>
<![endif]-->

The CSS for the example in question is extremely simple – there’s no need for me to explain this. Only difference, is that I’ve added a splash of CSS3 for eye candy.

The final result using a single image can be seen here and a result with multiple images using the excellent innerfade plugin can be seen here.

Happy image masking!

I was recently browsing a few photography website and came across a quite slick way to display a small snippet of information for for an image gallery. Unfortunately, it was Flash based, so I attemtpted to mimick the using only xHTML and CSS.

The basic xHTML is as follows:

<ul class="gallery">
	<li>
<div class="image_holder"><img src="images/1.png" alt="some image" /></div>
<div class="detail">

ImageTitle

{YOUR SNIPPET TEXT}

      <a class="more button" href="#detail_link">View More</a></div></li>
</ul>

The HTML is simply an unordered list, with a detail div, absolutely positioned, that contains the popup information about that item. When a user hovers over an image the detail tab will be shown. To achieve this effect a simple bit of CSS is used:

ul.gallery li:hover .detail {
   display: block;
}

There’s not a lot more to be honest – take a look at the result or download the source files.

The only downside is that due to the selectors used, the information divider fails to show in IE6.

The HTML

<div class="thumb_wrap">
<a href="#link" class="thumb_link">
<span><img src="play.png" alt="play" class="play_video" /></span>
<img src="thumb.jpg" alt="thumbnail" />
</a>
</div>

I’ve simply nested a span tag containing the hidden play button. Additionally, to keep everything XHTML valid, the hyperlink doesn;t contain block level elemnts.

The CSS

a img {
border:none;
}

.thumb_wrap {
width:194px;
height:110px;
margin:0 25px 0 0;
float:left;
}

img.play_video {
position: absolute;
margin:40px 0 0 80px;
display: none;}

The CSS is simply sets the image’s position absolutely (to ensure nothing gets pushed out of line).

The JQuery

The give the show effect a nice fade in style and in order the show our hidden image I’ll add a small piece of JQuery that finds the image within our span tag and fades it in. The latter is done when the user hovers over the image, when the mouse leaves, the image is hidden again. The folllwing would go within the head tag (I’ve also let Google CDN host my JQuery file):

<script type="text/javascript">
$(document).ready(function() {

$(".thumb_link").mouseover(function(){
 $(this).find('img.play_video').fadeIn('slow');
});

$(".thumb_link").mouseout(function(){
 $(this).find('img.play_video').hide();
});

});
</script>

…..and that’s it. You now have a cross browser compatible (IE 6 plus) image gallery effect, that is very easy to implement. See the image gallery in action.

In fact, using sprites are so effective many of the internets biggest site’s are using them, all in slightly different ways. On such sites a truely huge number of requests are saved every day. For example, Youtube, Google, AOL,  Amazon and Apple all use CSS sprites. Take the mimilist example of Google (left):

Google CSS Sprite

Youtube, does things slightly different and uses a absolutely massive sprite 2800px in height! You’ll notice that some sprites are tightly packed together and other have spacing around each image. This is to allow for browser based text sizing, that would otherwise display multiple background images. A good example of planning for such an occurance is Digg’s sprite, where each image is highly spaced out.

The CSS is relatively simple. Take the example of a simple unordered list with a different image for each item. I made a very simple sprite and applied the background-position property to each link class. Here’s the simple HTML used for the list:

<ul id="sprites">
	<li><a class="exclamation" href="#">Top Product</a></li>
	<li><a class="hot" href="#">Sizzlin Offers</a></li>
	<li><a class="offer" href="#">Special Deals</a></li>
</ul>

..and the CSS:

#sprites li {
 	list-style-type:none;
	font-size:1.1em;
	display: inline;
}
#sprites li a {
	background-image:url('yada.png');
	background-repeat:no-repeat;
	padding:5px 35px;
	line-height:35px;
	text-decoration: none;
	color: #333;
}
#sprites li a:hover {
text-decoration: underline
}
#sprites li a.hot {background-position:0px -165px}
#sprites li a.exclamation { background-position: 0px 0px; }
#sprites li a.offer { background-position: 0 -82px; }

The final result is a horizontal list, using a single image for the icons – no CSS hacks required for correct display in all the latest browsers! I won’t bother explaing the HTML or CSS as is self explanatory and very simple.

I personally find CSS sprites most useful for application icons as I can easily add a new icon class and set the background position accordingly. For instance, I’m currently working on a project that uses a lot of the fabulous famfamfam silk icons and have used a sprite similar to that on their site. While this is a lot of work initially, my recent discovery the sprite generator has limited this work load.

Sprites can be used a for avriety of things, including simple image rollovers – see a quick example I put together using a simple hyperlink and a single background image (image from devianrt). When I hover on the logo the background-position property simply shifts the spirite to right. You can view the result right here!

As with everything, you can take this idea a stage further and apply some JQuery to the mix to create an amazing Flash like menu.