Thoughts on adding javascript without conflicting with web designer

For some project I included Jquery animations in web sites. There are many Jquery scripts on Internet but, of course, not all of them satisfy your requirements.

When creating the animation, the first thing I do is choosing the script animation that can be useful as basis, creating a sort of demo and start to understand the code in order to be changed.

What I don’t see in several scripts is the absence of thinking for web designers, I mean people that know only CSS and html and they are interested on how to modify the classes name or id because they already exist in the website. Usually indeed the names or id have prefix but these variables are spread around the code, instead of being written once.

So I started to use some template system like Dust.js (which has been adopted by Linkedin) or Hogan (adopted by Twitter) to bring the html code and classes/id inside the html and not keeping them in javascript files. For the rest I give the possibility to pass as parameters classes/id to the Jquery script so they can be modified from design point of view.

Still this means that classes and id are duplicated once in the code and once as parameters in the javascript, there must be  a way to reduce the impact. Somebody proposes to use different classes for the style and for the javascript, somebody else uses data-attributes for the javascript which have been introduced by HTML 5 (which seem to be less performant as selectors moreover on IE, see Jsperf comparison and this article).

If I have to introduce some javascript in a website HTML 4 compliant then I would certainly go for 2 classes so the css designer doesn’t touch those for the javascript, even though we still create redundancy.

If have to work with HTML 5, I still don’t know if using data-attributes it is a good idea. In I can see that Internet Explorer 11 doesn’t fully support data attributes and Internet Explorer is still a big player in the browser puzzle, on the other side:

  • Jquery 2.0, which provide support from IE9 onward (major media queries are supported by IE9), has .data or .attr functions.
  • Further there are framework like AngularJS that make use of data attributes, working per injection without add/repeating any css/id which make me think that I should start to explore it since recently they start to make use of animations.

The problem more over is that you start from a built in CMS so adding a javascript which uses the current classes/id is easier that touching the html generated.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s