I see people mention maintainability as an upside of using presentational classnames such as “rounded”. But what about the maintainability of the markup? What if I have defined lots of elements with the “rounded” class and then decide I want some of them to have sharp corners instead? I’d have to go into the markup and make changes in multiple files, instead of just editing one stylesheet.

Arguably using id’s and then inserting the corresponding presentational classes with javascript would get me around this, but otherwise I don’t see the real benefit. Am I missing something?

Thank you for this tutorial Trevor.

I really like the final effect. It’s also nice that you included all those different previews.

Also, thanks for the links about jquery. I’ve been wanting to learn how to code from scratch and the link that you gave will definitely be of help.

I wish 24 ways was year-round.

Kind of disappointed. The title led me to believe I was going to read an article on front-end code reusability with CSS and JavaScript. Turned out to be an article on how to build a jQuery slide show. Should be re-titled to more accurately reflect the majority of the article. :(

Awesome read, Trevor. I use a lot of similar techniques when building sites, but the jQuery caching was new to me. Thanks for all the great tips!

Some nice work but the only problem I can see is that without js, the visitor can only ever access the first image. It seems to me that you’d better putting the pagination links in the HTML which lead to real images and disabling the link when js is on, so that if js is off, at least the images can be viewed.

I know this was a very small portion of the article, but I just want to say object-oriented CSS is a terrible name for what should be described simply as CSS that follows the DRY principle.

Regarding OOP, Wikipedia describes it in this way:

Object-oriented programming (OOP) is a programming paradigm that uses “objects” – data structures consisting of datafields and methods together with their interactions – to design applications and computer programs. Programming techniques may include features such as information hiding, data abstraction, encapsulation, modularity, polymorphism, and inheritance. It was not commonly used in mainstream software application development until the early 1990s.[citation needed] Many modern programming languages now support OOP.

Now, last time I checked, CSS is not passing “objects” anywhere. It is applying styles to HTML elements based upon rules. Just want to throw that out there. Again, I know it was not the point of your article, so please pardon my little tangent.

Recently, I’ve found myself migrating toward this “object” based syntax with my CSS classes. The farther I go down this path, the more I start to wonder if I’m actually moving away from semantics by describing the style (with classes like “wide” or “rounded”) in the markup. This applies to most of the popular grid systems out there also.

I’m not saying these tools (or concepts) shouldn’t be used. I’m just wondering how far my conscience will let me go before I begin having nightmares of Zeldman strangling me with inline styles…

Hum… (i++ + 1) or (++i) ?

By the way, there is means to make OO CSS, without removing the semantic of the elements… take a look : http://lesscss.org/

@Benoît – In production I’d use ++i (it’s simpler and faster), but for an example i++ + 1 is less subtle and therefore easier to understand.

@Design Informer; I’m glad you liked the article. jQuery is a great JavaScript framework to learn and has an awesome community, you shouldn’t have much trouble finding a tutorial or plugin to help you achieve what you need. I would always recommend learning some tutorials first, so you can spot good plugins and fix any problems you may have with them.

@Crazy Henaway; I’m sorry you’re disappointed with the article. Although the majority of the article is about applying the concept to a jQuery plugin, I was hoping you would take away the concept – adding a few classes and writing your JavaScript/CSS to be more reusable.

@Ray Brown; thank you, I really appreciate that. Caching of jQuery objects is a really useful way to speed up your application, especially when you have a lot of elements and potentially slow queries.

@John Faulds; This is a good point, however, there are a few issues I see with this behaviour. The technique you mention is similar to that found when using the “lightbox” popup. If the user doesn’t have JavaScript, then the full image is shown – on it’s own, top left in the browser, usually surrounded by white-space. I don’t think this is a very good way of fallback content (albeit an easy one) but it does mean the full-sized image is available to the user. Another method is linking to a page within the site which just displays the full-sized or next slide image or within the current context, simply swapping out the old image with the new. This method would be preferable, but this rarely happens due to numerous reasons, but mainly due to budget and potential conflict in duplicate content. If the slideshow is simply icing on the cake (so to speak), then losing this functionality isn’t a great problem. If the content IS the slideshow, then I agree you should definitely have separate URLs and you could then hijax it in to a better user-experience.

I am a fan of using css frameworks for rapid prototyping which make use of reusable classes similar to how you describe in this article. There is however a divide between designers, some saying the classes bloat markup and are un-semantic. I am happy to use these in personal projects where I can apply semantics through applying ID’s, but for a large-scale production website these reusable classes just won’t do.

It is interesting that you are applying these classes through jQuery which may get around the problem when javascript is enabled, but what happens when it is disabled? How unobtrusive is this javascript?

I think for most, writing well formed, semantic HTML and CSS will be the order for the day when it comes to the day-to-day markup. This is a great tutorial but will be kept to the personal website where a playground for code is acceptable.

Everyone is free to use whatever method they like, but ultimately what you are proposing here is using presentational class names.

Is class=“rounded” any different to class=“red”?

I accept that truly separating content and presentation isn’t always practical or achievable. I can see the productivity benefits. It just doesn’t seem right to me personally, and it’s not the sort of idea I expect to see promoted on an otherwise progressive site like this.

Humf. As you were.

@Kevin Rapley; I don’t understand your logic about large-scale production websites and reusable code. It’s large-scale websites which require reusable code the most. Reusable classes (whether you agree with the multiple OOP/DRY class method described in the article or not) are the only way to build large scale websites. Sure, you have IDs for the main sections and for markers throughout the content, but it’s the classes you will style to maintain cohesion and keep the style across a lot of content – that, and as you mentioned, well-formed semantic HTML.

I think you’ve mis-understood my article. I am not apply these classes through jQuery. These classes are on the IMG itself and are being used by the JavaScript. I also describe what happens when JavaScript is disabled, that is the starting point. I also justify the method I have chosen and state an alternative. The JavaScript is completely unobtrusive and the outcome is a good example of progressive enhancement.

One of the ways of adding data to your markup that can be quite useful is being able to grab database information such as ids from classes. Here is a generic function for doing this (I can’t find a way to get pre blocks working on here, which makes this look messy…):

function getNumberFromClassName(el, prefix) { var regexp = new RegExp(prefix + ‘(\\d+)’), matches = el.className.match(regexp), result = (matches¹) ? matches¹ : false; return result;
}

Markup:

<a href=”/somewhere” class=“random i-14555”>My Link</a>

Call the function:

var number = getNumberFromClassName(myLink, ‘i-’);
// number equals 14555

Hope this is useful to someone… sorry textile bc. codeblocks do not work here…

Just a small remark I have, and has been made before by @Pieman and Kevin Rapley- directed mainly at the concept of Object Oriented css. Often I see people recommend to create classes like .rounded, .floatleft or .bold.

While at first sight this may seem like a good idea in terms of reusability there is something fundamentally wrong with this approach. When you do this, you will create html like this: <div class=“rounded floatleft”>. The problem is that this goes against the concept of seperating markup and content.

The idea is to create meaningful html. For example instead of <p class=“bold”> you might want to go for <p class=“emphasis”> so the classname has meaning, but does not imply any markup. Instead of thinking in terms of markup, you should be thinking of the function this markup serves. e.g. .rounded could be .box or .button.

Ofcourse this will make you repeat yourself when you want to round both box and button. A solution to this might be css variables, but this is a completely different story ofcourse.

Another solution I have been thinking about is to have jquery add these “presentational” classes to the desired elements. This would allow me to combine the maintainability (let’s face it, they are very practical) of these classes, while keeping the markup in javascript-and not in html. Problem here might be rendering speed, and ofcourse it still isn’t completely semantic.

Great article though, and as chance would have it, I just needed a jquery slideshow.

Good article Trevor – good to see the Midlands getting some talent rep! Having said that, you spelled your page title wrong on the demo site… ;p keep up the good work!