Front-End Code Reusability with CSS and JavaScript

20 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Design Informer

    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.

  2. Crazy Henaway

    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. :(

  3. John Faulds

    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.

  4. Chris Wallace

    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.

  5. Ben Callahan

    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…

  6. 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/

  7. trovster

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

  8. trovster

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

  9. trovster

    @Chris Wallace; you make a good point. DRY principle is probably a better way to describe what is happening. However, I was simply expanding on what others, such as Nicole Sullivan & Jeff Croft, have been talking about. They talk about the object-oriented CSS concept and I think it is known within the industry now (although this doesn’t detract from the misuse).

    @Ben Callahan I feel your reluctance on this issue – I really do! Since working in the industry I’ve learnt that you need to make certain compromises. The compromise of adding a few non-semantic classnames to your beautifully semantic HTML (!important;) is not only a very minor misdemeanour, but also helps build code-reusability, gain consistency throughout your website/application & can dramatically improve development time.

  10. Kevin Rapley

    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.

  11. Pieman

    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.

  12. trovster

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

  13. trovster

    @Pieman; I am proposing “presentational class names” or even behavioural class names, but it’s all about context and common sense. To your question, yes and no! I wouldn’t recommend using class=“red” but instead ask WHY is this content being styled as red? Is it because it is important, or required in a form. Most cases you should be using the answer to this question to decide on your class and ID names. You are free to take what you will from this article, hopefully it will spark another idea which will work better than this, and if it does I would love for you to share it with us.

  14. Andrew Phillipo

    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 = (matches1) ? matches1 : 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…

  15. Kevin Rapley

    @trovster admittedly I breezed over the jQuery explanation as I am not familar with writing javascript, sorry about that, my bad.

    At this time I have to agree with Pieman, the classes are too presentational for my liking. Although great for rapid prototyping, I would not allow (nor would my colleagues) these classes in the kinds of websites that we build.

    I disagree that these classes are required for a large scale build to maintain cohesion. I build websites for financial institutes, public sector agencies and large private sector brands. I never use these types of classes for these builds as I don’t deem them as being semantically written.

    The stylesheets are large by not using such classes, but I write stylesheets that are well commented and structured in such a way that everything is easily located and written logically. I find problems never arise and cohesion is maintained.

    I would be interested to have a bit of a stylesheet comparison with you at a multipack meetup in the new year if you’re game? I think your method certainly has a place and I am probably not seeing the whole picture at the moment.

  16. Maikel

    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.

  17. Daniel Koskinen

    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?

  18. Steven Howe

    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!

Impress us

Be friendly / use Textile