Tuesday, September 8, 2009

jQuery CSS

The user interfaces of web applications these days are filled to the brim with rich user interactions that were confined only to desktop applications no long ago. This high level of user interactivity is made possible by javascript toolkits such as jQuery. The features seen in nice web application user interfaces are possible using javascript without a toolkit, but this is a bad programming practice. In this case all the developer is doing is simply re-inventing the wheel.

These javascript toolkits allow for easy manipulation of the DOM tree. This means that elements of the page can be added, removed, or manipulated in controlled ways based on the user input. Without this ability, the user generally needs to wait for a response from the server which really takes away from the responsiveness of the GUI.

Aside from adding and removing page elements in response to user actions, page elements can change form in response to user actions. jQuery has the ability to add in-line styles to page elements. This is a useful feature for altering the appearance of page elements. Again, this is bad programming practice. If using the in-line CSS style attribute in the HTML markup is bad practice, this is synonymous. It is generally a good idea to keep the styles of various elements in the CSS definitions rather than add them using the jQuery functionality. Rather than add a style attribute, add a CSS class with jQuery. This is a much cleaner approach and makes the life of both the CSS designer and the javascript developer easier.